Optimize the screen area by using a Layout group to arrange information into orderly segments.
For example, you can configure a Layout group to display related information as a series of tabs that the user can efficiently browse.After you create a layout group, you can use it as the basis for a region in a design template.
-
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 Layout group onto the work area.
-
In the Choose layout-group format dialog box, select one of the following formats for the layout group:
- To display layouts as simple pages with no headers or menus, select Default.
- To display layouts under collapsible headers, select Accordion.
- To display layouts one at a time as options in a menu, select Menu.
- To display all layouts at the same time, with the layouts stacked on top of one another, select Stacked.
- To display a layout one at a time, with a tab for each layout, select Tab.
- To display the layouts in a custom format that is defined in the skin, select Other, and then select the format.
-
To include layouts or container elements in the Layout group, expand the Structural list, and the elements that you want into the layout group.
- Creating a templated region based on a layout group
You use a layout group to present closely related information with accordion, menu, stacked, or tab navigation mechanisms. You can create a templated region that is based on a layout group. You might do this if users need to add, reorder, or remove tabs from screens at run time in App Studio.
- Skin form — Components tab — Layouts — Layout Groups
A layout group combines different types of layouts to display a set of content such as a list of financial accounts and related transactions. You use a layout group to specify how to navigate sets of information. For example, this could be a tab for each account, or by simply changing the type, the account list can be rendered as either a drop-dow
- Skin form — Components tab — Layouts — Containers
These styles apply to the container header. You can specify styles for the Default container format and create custom container formats.