Creating a dynamic layout group
To optimize the screen area, use a Dynamic layout group. In this way, you can modularize closely related information and present all the
relevant data to the application users at run time.
Dynamic layout groups
provide flexible display of content. Because the data is sourced form a Property or Data
Page, the output changes when the source changes, which ensures that the information on the
page is current.
- Search for and open an existing Section form.
- On the Design tab, expand the Structural list, and then drag the Dynamic layout group onto the work area.
- To include elements in the group, expand the Structural list, and then drag any number of dynamic layout, column, or section elements onto the layout group.
- Click the Dynamic layout group, and then click the View properties icon.
-
In the Properties window, in the
Source field, specify the source of the data for the
dynamic layout group:
- To source the data from a page list or page group, select
Property and then in the
List/Group field specify the name of the property
by pressing the Down arrow key.
To reference nested page lists or page groups, use the following syntax: page1.page2.myArray
Note: If you are only prototyping, accept the placeholder property .pyTemplatePagelist. - To access data from a range of sources on a clipboard, select
Data Page and then in the Data
Page field specify the name of the page by pressing the Down
arrow key.
Use the following syntax: the name of the data page, followed by a full stop and then a property name; for example D_Products.pxResults.
- To source the data from a page list or page group, select
Property and then in the
List/Group field specify the name of the property
by pressing the Down arrow key.
-
In the Display type field, select a format for the
dynamic layout group:
- To display layouts in collapsible headers, such as Account and
Transaction Details, select Accordion.Note: Only one layout from the layout group is displayed at a time. Because accordions take up less horizontal space than tabs, this option is the preferred format for tablets.
- To display layouts as options in a menu, one at a time, select Menu.
- To display all layouts at the same time in a list, with the layouts on top of one another, select Stacked.
- To display a tab for each layout, one at a time, select Tab.
- To display the layouts in a custom format that is defined in the skin, select Other, and then select the format in the adjacent field.
- To display layouts in collapsible headers, such as Account and
Transaction Details, select Accordion.
-
In the Visibility field, select when you want to display
the group layout:
- Select one of the default options.
- To create your own condition, select Condition
(expression) and click the Open condition
builder icon.
For more information, see Harness and Section forms — Using the Condition Builder to configure dynamic UI actions
- To specify the size of headers of the items that you included inside the Dynamic layout group, select an option in the Heading Level list under Container settings for layout group items.
- Click Submit.
Example: The UI Gallery landing page contains a working example of the Dynamic layout group. For more information, see UI Gallery landing page.