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.
Example: The UI Gallery landing page contains a working example of the
Layout group, which you can use as a reference or copy directly to the
application. For more information, see
UI Gallery landing page.