Adding an Actions Bar and a Folder Actions Button To a Folder Page

Last Updated: 07/18/2016 Introduced in Verision: 2.0

An actions bar contains buttons that allow a user to quickly access primary functions, such as adding and editing entities. A user can add an actions bar to a new page or to an existing page.

Add an Actions Bar component to a folder page in the Page Designer, then adjust some property settings in the Properties panel.


In our example, we will:

  1. Create a folder page.
  2. Add a header, Actions Bar, and Report Viewer to the page. 
  3. Save the folder page and view it.
  4. Edit the folder page to add more buttons to the Actions Bar.


First, add a folder page that will contain the actions bar.  Select a folder from the Folders tree, click the Manage button in the folder data panel, and select Page: Create New Page



In the Page: Create New Page pop-up, we’ll name the page and click OK.  



In the Page Designer, we begin by formatting the new page.

We’ll expand the Explorer panel in the lower right by clicking the Restore button in the title bar. We’ll select Surface



The Properties panel changes, displaying settings based on our selection of the Surface component.

In the Properties panel, in the Layout section, in the Container type drop-down list, we’ll select VerticalStack.



The Explorer panel displays a new component: SilverGrid 1(SilverGrid), which divides the layout into sections. Our layout should allow components to stack vertically, so we’ll delete this component by clicking it and selecting Delete from the menu. 



The workspace is now blank, and we can begin adding components to our page.

We’ll use the search bar in the Components panel to quickly locate components.

We’ll search for “Folder” and then drag a Folder Header Data component to the workspace.



Next we search for the “Actions Bar” then drag it to the workspace and place it below the Folder Header Data component.



Finally we will follow these same steps to search for “report” and drag a Report Viewer component to the workspace.



Now that the components have been added to the page, we’ll save it by clicking the Save Page link, and close the Page Designer.

We’ll view the new page by clicking the folder page name’s link below the address bar.




Our page displays with the three components we added, the folder data header, the Actions bar, and the report viewer.

The Actions bar has an All button.



We will edit the page to add more buttons to the Actions bar.

In the Actions menu in the upper right, we’ll select Edit Page.



In the Page Designer we can change the page’s components and settings.

To change a component’s properties, we must first select it. We’ll click the Actions bar component in the workspace. When selected, yellow arrows appear on the component and an actions menu displays on the workspace.



Next, we’ll change the actions bar properties so that the actions bar will display more buttons. In the Properties panel, in the Display Info section, in the Minimum Number of Primary Actions field, we’ll enter “2”.

In the Minimum Number of Secondary Actions field, we’ll enter “2”. 



We’ll save the page, and close the Page Designer.

Our updated page contains an actions bar with two primary action buttons, shown in blue, and two secondary action buttons, shown in gray.




Additional Resources