Adding Folder Navigation Buttons to a Page
  • Updated on 09 May 2013
  • 1 minute to read
  • Print
  • Dark
    Light

Adding Folder Navigation Buttons to a Page

  • Print
  • Dark
    Light

When a user clicks a folder navigation button on a page, the folder associated with that button opens.
Add folder navigation buttons in the Page Designer by dragging a Folders Bar component to the workspace, then configuring it in the Properties panel.

Example

In the example, we create a page, add three folder navigation buttons to the page, then view the buttons in action.
Begin by navigating to a Designer folder and clicking theCreate Page/Dashboard button. 
On the New Page pop-up, enter the page name and click CREATE .

2017-12-28_114101-1024x612.png

In the Page Designer , in the Page Elements panel,  expand the Navigation category, select a Folders Bar component and drag it to the workspace.
Now that the Folders Bar component has been added to the page, we add buttons to the Folders Bar.
2017-12-28_114226.png

In the Properties panel, in the Display Info section,  click the Add New button under the Folders box.

2017-12-28_114407.png

In the Edit Object pop-up, in the Button Text field, enter the label for the button, then click the Select Folder selector.

2017-12-28_114558.png

In the Select Folder pop-up, select the folder to open when a user clicks the button, then click OK .

2017-12-28_114848.png

To finish configuring the folder navigation button, select an option from the Display Type drop-down list then click Save .

2017-12-28_114927.png

We've added the Designer Folder button which has a Display Type of Primary
You can add two more buttons following these steps. The Service Catalog button, which opens the Service Catalog folder, has a Display Type of Primary . The Events button, which opens the Events folder, has a Display Type of Secondary .

33.add-more-buttons.png

This completes configuring the Folders Bar , save the page and close the Page Designer .
To preview the page and see the Folders Bar in action, we select the page's thumbnail and select View > Preview Page in its Action menu.

2017-12-28_115948.png

The page with the Folders Bar displays. Buttons with the display type of primary display in a different color than those with a display type of secondary.
2017-12-28_120015.png

When we click the Designer Folder button, the Designer Folder opens.
2017-12-28_120315-1024x566.png

Was this article helpful?