Adding Folder Navigation Buttons to a Page

Last Updated: 04/12/2018 Introduced in Version: 2.0

 

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 the Create Page/Dashboard button. 

On the New Page pop-up, enter the page name and click CREATE

 

 

 

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.

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

 

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

 

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

 

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

 

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

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.

 

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.

 

When we click the Designer Folder button, the Designer Folder opens.

Additional Resources