Creating a navigational tree layout
Help your users navigate large numbers of nested entries by creating a navigational tree layout with expandable branches. Navigational tree layouts source data from a page list property, and reflect the structure of the source.
For example, you want to build a navigational tree that displays the names of all company employees by hierarchy. You already have an EmployeeList list property that holds that information. You also want to be able to click an entry to view detailed employee data in a pane below the navigational tree. For this purpose, you also created a ShowDetails flow action that references the Details section that holds the data.
- Search for and open an existing section.
- If the section is based on a template, in the section editor header, click convert to full section editor, and then confirm the conversion.
- On the Design tab, expand the Structural list, and then drag Navigational tree onto the work area.
- In the Navigational tree header, click the View properties icon.
- In the Layout properties window, on the
General tab, specify the key settings:
- In the List field, enter the name of the list
property from which you want to source data.
For example: Enter EmployeeList.Name.
- In the Conditions section, define visibility for
the tree and its branches.For more information, see Defining conditions in the condition builder.
- In the Header and footer section, define visibility conditions for the header and footer of the tree layout.
- In the Pagination format field, define how the
application displays page numbers in the layout.
For example: Select First X results, and then, in the Page size field, enter 25 to limit the number of entries to 25.
- In the List field, enter the name of the list property from which you want to source data.
- On the Operations tab, define how the user can interact
with the data in the layout:
- In the Row operations section, define row editing
For example: Enable editing employee data in a pane by performing the following actions:
- In the Row editing field, select Master-detail.
- In the Display of details field, select Embedded elsewhere.
- In the Detail flow action field, enter ShowDetails.
- In the Details location, select Default (display after grid).
- In the Grid operations section, define additional
settings for your layout.
For example: Enable filtering by selecting the Allow filtering (additional settings on column) checkbox.
- Click Submit.
- In the Row operations section, define row editing settings.
- On the section form, click Save.
- Modifying the presentation options of the navigational tree layout
Define the look and behavior of the navigational tree layout in your user interface to build an intuitive application that meets your business needs.
Previous topic Modifying the presentation options of the column layout Next topic Modifying the presentation options of the navigational tree layout