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.

Example

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.
 

actionsAdded

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

createNewPage

 

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

name

 

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

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.

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. 

delete

 

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.

folderHeader

 

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

actionsBar

 

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

reportViewer

 

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.

newView

 

 

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.

allButton

 

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.

editPage

 

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.

editActionsBar

 

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”. 

addActions

 

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.

actionsAdded

 

 

Additional Resources