Skip to main content


         This documentation site is for previous versions. Visit our new documentation site for current releases.      
 

Creating a navigational tree layout

Updated on December 13, 2022
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.

Note: 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.
Before you begin: 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.
      For example: 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.
      For example: 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.
      For example: 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.
      For example: Enable filtering by selecting the Allow filtering (additional settings on column) checkbox.
    3. Click Submit.
  7. On the section form, click Save.
What to do next: 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.
  • Previous topic Modifying the presentation options of the column layout
  • Next topic Modifying the presentation options of the navigational tree layout

Tags

Pega Platform 8.7 User Experience

Have a question? Get answers now.

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

Visit the Support Center

Did you find this content helpful?

Yes
No

Want to help us improve this content?
Suggest an edit

We'd prefer it if you saw us at our best.

Pega.com is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us