Table of Contents

Creating a navigational tree layout


Only available versions of this content are shown in the dropdown
Applicable to Theme Cosmos applications

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.

The UI Gallery landing page contains a working example of the Navigational tree in the Hierarchical list category. You can use the example as a reference or copy the data directly into the application. For more information, see Accessing the UI Gallery.
Create or identify a section in which to nest your layout. For more information, see Creating sections.
  1. Search for and open an existing section.

  2. If the section is based on a template, in the section editor header, click convert to full section editor, and then confirm the conversion.

  3. On the Design tab, expand the Structural list, and then drag Navigational tree onto the work area.

  4. In the Navigational tree header, click the View properties icon.

  5. In the Layout properties window, on the General tab, specify the key settings:

    1. In the List field, enter the name of the list property from which you want to source data.

      Enter EmployeeList.Name.
    2. In the Conditions section, define visibility for the tree and its branches.

    3. In the Header and footer section, define visibility conditions for the header and footer of the tree layout.

    4. In the Pagination format field, define how the application displays page numbers in the layout.

      Select First X results, and then, in the Page size field, enter 25 to limit the number of entries to 25.
  6. On the Operations tab, define how the user can interact with the data in the layout:

    1. In the Row operations section, define row editing settings.

      Enable editing employee data in a pane by performing the following actions:
      1. In the Row editing field, select Master-detail.
      2. In the Display of details field, select Embedded elsewhere.
      3. In the Detail flow action field, enter ShowDetails.
      4. In the Details location, select Default (display after grid).
    2. In the Grid operations section, define additional settings for your layout.

      Enable filtering by selecting the Allow filtering (additional settings on column) check box.
    3. Click Submit.

  7. On the section form, click Save.

Depending on your business needs, you can now further customize the appearance of the layout. For more information, see Modifying the presentation options of the navigational tree layout.
Did you find this content helpful?

Have a question? Get answers now.

Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.