Table of Contents

Modifying the presentation options of the navigational tree layout


Only available versions of this content are shown in the dropdown

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

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.

    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%).
    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 check boxes that represent specific personalization settings.

  13. Click Submit.

  14. On the section form, click Save.

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.