Adding Folder Navigation Buttons to a Page

Last Updated: 08/16/2016 Introduced in Verision: 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.

createPage

 

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

namePage

 

In the Page Designer, in the Toolbox panel,  expand the Navigation category, select a Folders Bar component and drag it to the workspace.

dragFoldersBar

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 button next to the Folders box.

addFolders

 

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

buttonText

 

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

pickFolder

 

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

displayType

 

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.

addedMoreButtons

 

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.

previewPage

 

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.

pagePreview

 

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

 

finished 

Additional Resources