Layout

In the vFlow module, a layout is a virtual container. When you create a page in the application, it is created with a default layout. In a page, the page’s layout’s name is prefixed by the name of the page. An empty layout is composed of the following:

• A default row, which is referred to as L1_R1.
• A column, which is referred to as Column1.

In the default structural composition of the page layout, a page layout contains the default row, L1_R1. You can see this naming convention in the following screen capture:

Thus, the L1_R1 row also contains a default column, Column 1. The following screen capture shows Column 1, which is a child container or column in the L1_R1 row.

The purpose of a page layout is to design a page. You design a page following a planned scheme of wireframes. By following a final and approved wireframe, you add components and elements to a page layout. In the page layout, you can only add components and elements to the column container (for example, Column 1).

Layout’s Properties

A page’s layout contains the following basic properties:

Property Name	Description
Layout Name	This field displays the default layout name. You can also change the default name of the layout to a new name.
Layout ID	This field displays a unique and non-editable numeric value, which is called layout ID. The Layout ID is used to manage the page’s layout at the application level.

In the page’s layout, you can perform the following functions:

Adding a Row

Apart from the default row, you can add a row to the page layout when you want to display two different sections row-wise on a page.

To add a new row to the page layout:

1. On the <<Page Name>> page, see the middle panel.

2. The middle panel displays the page layout’s default row, L1_R1.
3. To add another row to the layout, scroll down the page, and then see Add Row.

4. Click Add Row to add a new row.

Row-level Properties

After you add a new row, you can configure its properties as follows:

Property Name	Description
Row Name	This field displays the name (for example, L1_R1) of the row section in the layout. This name is non-editable. When you add a new row, the Row Name field automatically displays the row’s name in non-editable format.
Row Sequence	This field displays the sequence number of the row from the top of the layout. This field is also non-editable. After you add a row, the Layout property automatically defines the sequence number of the row section.
Row ID	This field displays a unique and non-editable numeric value. This value is called row ID. When you create a row in the layout, the vFlow module automatically creates and assigns a unique row ID to the row. This row ID helps manage the row at the application level.
Custom CSS Class Name	In this field, enter the name of the CSS class that you implement under the Theme section in the General Settings menu.
Layout Alignment	You configure this property to define the position of a layout’s row by selecting one of the following options: a. Center Center b. Start Center c. Center Start d. End Center e. Center End These alignment options are visually depicted in the following heading section.

Adding a Column

You add a column when you want to display two vertical sections in the page layout. To add a column:

1. On the <<Page Name>> page, see the middle panel.

2. In the middle panel, find a row (for example, Row 1) where you want to add a column.
3. In the row (for example, Row1) panel, see Add Column in the right section.

2. Click Add Column to add a new column.

Layout Alignment Options

Option	Visual Presentation
Center Center
Start Center
Center Start
End Center
Center End

Adding a New Component

To design a page based on the planned wireframe, you add one or more components to a page layout. In the vFlow 2.0 module, a component is a user interface with a specific purpose or a collection of multiple user interfaces.

To add a component to the page layout:

1. On the <<Page Name>> page, see the middle panel.
2. In the middle panel, find a row (for example, Row 1) where you want to add a component.

3. After you find the row, find the column (for example, Column 1) where you want to add a component.

4. Under <Column Name>> (for example, Column 1), click Add Component to display a None box.

5. Click the None box, and then click Create New to display the Create Component dialog box.
6. In the Create Component dialog box, in the Name box, enter the component’s name (for example, first_form_dashboard).
7. Click the Type list and then select the component’s type (for example, Form).
8. After you define the component’s name and select its type, click Create to create a new component.
9. After you create the new component, the <<component_name>> page opens.

Note:- On the <<component_name>> page, you can change the reference name of the component.

10. On the <<component_name>> page, click Save to finally update the newly created component.

Linking New Component to Page

After you create a new component, you can link it to a page as follows:

To link the component to a page:

1. On the vFlow 2.0 module’s dashboard, see the left panel.
2. Put the mouse pointer on the left panel.
3. In the left panel, click Inventory to display the Inventory panel.

4. In the Inventory panel, under Inventory, click Pages to display the list of different pages in the application.
5. In the list of pages, under the Reference Name column, find the page that you want to link to a component.
6. After you find the page, move the mouse pointer to the right and then click the Edit icon () to display the page-related dashboard.
7. In the page-level dashboard, see the Config panel.

8. In the Config panel, click Layout to display layout-related properties.
9. In the right panel, see the row (for example, Row 1) where you want to link the component.

10. In the row section, see the column (for example, Column 1) where you want to link the component.
11. In the column, click the None list and then select the component to link it to the current page.

12. After you select the component in the None list, click Save () at the bottom of the page to link the selected component to the current page.