Skip to main content


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

Modifying the presentation options of the navigational tree layout

Updated on December 13, 2022
Applicable to Theme Cosmos applications

Define the look and behavior of the navigational tree layout in your user interface to build an intuitive application that meets your business needs.

Before you begin: Create a navigational tree layout for your application. For more information, see Creating a navigational tree layout.
  1. In the navigation pane of Dev Studio, click Records.
  2. Expand the User Interface category, and then click Section.
  3. In the section list, select the section that contains the target layout.
  4. In the Navigational tree header, click the View properties icon.
  5. In the Layout properties window, click the Presentation tab.
  6. In the Style list, define how the layout arranges its contents.
    Tip: You can see the available styles and their previews in the skin rule. For more information, see Component style formats.
  7. In the Container format list, define the look of the layout.
    For more information, see Styling a layout.
  8. In the Width of content list, define whether the width of the layout columns is set as a percentage or in pixels:
    • To set minimum column widths that expand if the content exceeds the minimum width, select Pixels (fit content).
    • To set specific column widths, select Pixels (fixed).
    • To set column widths as fractions of the total width of the layout area, specified in pixels, select Fill (100%).
    Note: In each case, you can adjust each column width directly in the column properties:
    • For Pixels (fit content) and Fill (100%), the Width field represents the minimum column width.
    • For Pixels (fixed), the Width field represents the width of that particular column.
  9. Optional: To specify a fixed height for the layout, select Fixed (pixel) size grid, and then provide the height in pixels.
  10. In the Expand/collapse icon field, specify which icon you want to use to represent the hierarchy by clicking the Show image viewer icon, and then selecting an image.
  11. In the Show +/- icon list, define the visibility of the expand icon.
  12. Optional: To define additional layout behavior, select the checkboxes that represent specific personalization settings.
  13. Click Submit.
  14. On the section form, click Save.

Have a question? Get answers now.

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

Did you find this content helpful?

Want to help us improve this content?

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