- In the navigation pane of Dev Studio, click Case types, and then click the case type that you want to open.
- Run a new case by clicking Save and run.
- In the new case, navigate to the layout that you want to edit.
- In the footer of Dev Studio, click the Live UI icon.
Result: The Live UI tool is activated. You can now inspect user interface components in real time.
- Click the layout that you want to edit, and then click the Open in Dev Studio icon.
- If your section is based on a template and cannot be edited, click Convert to full section editor.
- On the Design tab, expand the Structural list, and then drag the Repeating dynamic layout onto the work area.
- In the Repeating dynamic layout header, click the View properties icon.
- In the Repeating dynamic layout properties window, in the
Source field, specify the source of the data for the dynamic
- 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.
- 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 that you want to reference.
- Specify the look and behavior of the layout:
- In the Layout format list, select how the layout arranges
For example: Group content into two columns by selecting Inline grid double.
- In the Container format list, define the look of the
For example: Apply a custom format by setting Container format to Other, and then selecting the name of the format in the adjacent field. For more information, see Styling a layout.
- Optional: To define when the layout contents are refreshed, next to the Refresh
condition field, click the Open condition builder
icon, and then build a conditional expression.For more information, see Defining conditions in the condition builder.
- In the Visibility field, select when you want to display the Dynamic layout.
- Optional: To prevent the layout from loading its content on initialization of the page, select Defer load contents.
- In the Caption row, select the type of text you want to display above the layout, and then complete the Settings section.
- In the Layout format list, select how the layout arranges its contents.
- In the Pagination section, define when the application loads new
rows of the layout.
For example: Select Progressively load on scroll, and then set the Page size to 20 to load 20 rows of new data whenever the user scrolls to the end of the list.
- In the Accessibility node, define settings that help users with
different levels of abilities to navigate the layout:
- In the Label field, enter the name of the layout for the screen reader.
- Optional: To switch to Tab-key navigation, select the Use form navigation (by
tab) check box.By default, users navigate a Repeating dynamic layout by using the arrow keys.
- Click Submit, and then click Save.
- Repeating dynamic layout - Operations tab
Click the View properties icon in a repeating dynamic layout header to display the Properties panel, and then select the Operations tab. The Operations tab sets the default behavior configuration for a dynamic layout, determining how users view the properties displayed in the layout.
- Configuring drag-and-drop functionality for list items
Configure repeating dynamic layouts so that users can reorder items within and between lists. By adding drag-and-drop functionality to your lists, you create an interactive user interface where users can modify content to match their business needs.
- Configuring swipe actions for a mobile app
To help users complete their tasks quickly without leaving the main screen of a mobile app, configure swipe actions for repeating dynamic layouts. Swiping in a row in a mobile app opens a menu of available actions, such as Edit or Delete.