An action bar organizes actions into sections and groups. The bar is typically displayed on the right hand side of an app. In content apps, the browser subapp has an action bar that allows the user to manage content items  (add, edit, delete).

The action bar also defines availability rules that determine which section of the action bar is displayed to the user. For example, when the user selects a content item, you want to only display actions that are relevant for that item.

The action bar references actions which are defined elsewhere. This separation allows you define an action once and use it in many places, not only in the action bar.

Here is the action bar from the Contacts app.

Node name

Value

 
browser

 

 
actionbar

 

 
sections

 

 
root

 

 
groups

 

 
addActions

 

 
items

 

 
addContact

 

 
addFolder

 

 
importExportActions

 

 
availability

 

 
nodes

false 

 
root

true 

 
label

Contacts 

 
deletedContact

 

 
deletedFolder

 

 
contact

 

 
folder

 

 
defaultAction

editContact

 

Properties:

  • actionbar
    • sections
      • <section name>: Name your sections after what the user has selected, such as folder when a folder is selected.
        • groups: Groups are actions that belong together. They are separated by horizontal lines in the action bar.
          • <group name>: Name your groups after what is common to the actions. For example, create an addActions group for actions like addFolder and addContact.
            • items
              • <action name>: Name of the action. Must be the same as defined in the action definition.
        • availability: Defines whether the section is displayed to the user. This typically depends on what type of node the user has selected.
        • label: The section label is the green text displayed to users on the action bar.
      • defaultAction: Name of the action executed when the user double-clicks an item.

 

#trackbackRdf ($trackbackUtils.getContentIdentifier($page) $page.title $trackbackUtils.getPingUrl($page))