Action Bar

An Action bar contains a group of icons, which are used to perform certain actions. The Action bar has the action items defined by the user during the design time and it is available to the user while using the form during run-time.

Note:
- Action bar is supported only on the web browsers. However, it is not supported in AVEVA Work Tasks Pro App.
- When the window is in the Responsive mode (< 800 pixels in width) in the Web browsers, the Action bar is not displayed.
- Action bar supports only one level of child Action Items.
- You can add multiple child Action Items to an Action Item.

To enable Action bar

1. In the Enterprise Console, click menu icon, and then click Forms. The Forms page appears.

2. Right-click on the form for which you want to enable Action bar, and then click Design Form. The Forms Designer page appears.

3. On the Action tool bar in the Forms Designer, click Properties. The Properties dialog box appears.

4. Click the Advanced tab.

5. Click Yes for the Enable Action Bar property.

   The Action Bar section appears.

6. Click the + icon.

   A new action item is added.

7. Click the Properties icon.

   The Action Bar Item - Properties window appears.

8. In the Basic tab, specify the following details:

   Property	Description
   Name	Name that identifies the Action Item. This value is also used for the label of the Action Item.
   Image Path	Path to the image for the Action Item. The image path is specified as: A URL starting with http:// or https://. An image path tag. For information about using image path tags, see Image Path Tags in Image. A path to the BPMUITemplates folder as BPMUITemplates\Default\Images\. If you want to use an image and a hover image for an Action Item, then add the respective images in the <NextGenForms/custom/Themes/<ThemeName>/images path. Note: - If the image name is tagged with FormCustomPath:, the location is <Installpath>/Web/BPMUITemplates/Default/NextGenForms/custom/images - If the image name is tagged with FormCustomThemePath:, the location is <Installpath>/Web/BPMUITemplates/Default/<NextGenForms/custom/Themes/<ThemeName>/images - If the image name is not tagged with FormCustomPath: or FormCustomThemePath:, the location of image of earlier version will be considered i.e. <Installpath>/Web/BPMUITemplates/Default/Themes/<ThemeName>/NextGenForms/images folder. - For AVEVA Work Tasks Pro, mapping of themes is not considered. For example: If the image ClearAll.png is available in <NextGenForms/custom/Themes/<ThemeName>/images, then ensure that you add the hover image ClearAll-Hover.png (with -Hover suffixed to the image name) in the same path. Note: - Ensure the size of the image (icon) is 25x25 pixels. - You can use relative paths as follows: -- Use . for the current folder where the html page resides. -- Use .. for the folder above the current folder where the html page resides.
   Custom Style Sheet Identifier	Prefix for the CSS class name in the custom style sheet. If you want to use an image and a hover image for an Action Item using a CSS, then add the respective images in the <NextGenForms/custom/Themes/<ThemeName>/images path and add the CSS file in the <NextGenForms/custom/Themes/<ThemeName>/css path. The CSS can be defined as: .customItem .icon { background-image: url("../../images/ClearAll.png"); } .customItem:hover .icon { background-image: url("../../images/ClearAll-Hover.png"); } .customItem[disabled='disabled']:hover .icon { background-image: url("../../images/ClearAll.png"); } For the Action Item, enter the CSS class name as customItem. For information about using custom style sheets, see Custom Styles. Note:  - The value must start with an alphabet and can contain only alphanumeric characters. - For AVEVA Work Tasks Pro, mapping of themes is not considered.
   Tooltip	Message that appears when the pointer hovers over the Action Item.
   Enable	Enable or disable the Action Item. Select Yes to enable the Action Item. Select No to disable the Action Item. The default value is Yes. For more information about enabling or disabling the Action Item via script, see control.topLevelForm.actionbar.getActionItemByName().
   Visible	Show or hide the Action Item. Select Yes to show the Action Item. Select No to hide the Action Item. The default value is Yes. For more information about changing the Visible property of the Action Item via script, see control.topLevelForm.actionbar.getActionItemByName().
   Action Type	Action for the Action Item. Select Link to Existing Control to perform the respective action, when the Action Item is clicked. Select Specify Script to enter a script that must be executed, when the Action Item is clicked. To link to an existing control. Select Link to Existing Control. The Existing Control drop-down list appears with the controls (of Button, Popup, Invoke Workflow types) present in the Forms Designer including the ones present in the Embed Form Controls. In the Existing Control drop-down list, select the required control to be executed, when the Action Item is clicked. The Action Item is linked to the selected control.

9. Click Apply.

The properties are applied to the Action Item.

10. Repeat steps 6 - 9 to add more Action Items.

Scripts

For information about using scripts, see scripting guidelines for Action Bar control.

Applying styles for Action Bar

You can apply the following styles for the Action bar:

11. Background color for the action bar.

12. Background color for the parent and child Action items in expanded mode.

13. Borders for the expanded child Action item.

14. Borders for the expanded parent Action item.

15. Text color for the Action item.

16. Background color for the Action item on hover.

17. Text color for the Action item on hover.

18. Background color for the icon in the Action item on hover.

19. Action item separator.

20. Action item down arrow, Action item up arrow.

The following image represents the Action bar with custom styles applied. The numbers in the image represent the styles for the Action bar mentioned above.

Add the following CSS file in the <NextGenForms/custom/Themes/<ThemeName>/css path. The CSS can be defined as follows:

/*Background color for the action bar*/

.actionBarWrapper .actionBar

{

background-color: #666666;

}

/*Background color for the parent and child Action items in expanded mode*/

.actionBarWrapper .actionBar .subMenu, .actionBarWrapper .actionBar .menuItem.selected, .actionBarWrapper .actionBar .menuItem.subSelected, .actionBarWrapper .actionBar .subSubMenu

{

background-color: #515151;

}

/*Borders for the expanded parent Action item*/

.actionBarWrapper .actionBar .menuItem.selected, .actionBarWrapper .actionBar .menuItem.subSelected

{

box-shadow: inset -1px 0 0 0 #7F7F7F, inset 1px 1px 0 0 #7F7F7F;

/*box-shadow: none !important;*/

}

/*Borders for the expanded child Action item*/

.actionBarWrapper .actionBar .subMenu, .actionBarWrapper .actionBar .subSubMenu

{

box-shadow: inset 0 0 0 1px #7F7F7F;

}

/*Text color for the Action item*/

.actionBarWrapper .actionBar .menuItem .content .name

{

color: #ffffff;

}

/*Text color for the Action item on hover*/

.actionBarWrapper .actionBar .menuItem:hover .content .name

{

color: #ffffff;

}

/*Background color for the Action item on hover*/

.actionBarWrapper .actionBar .menuItem:not(.menuItemDisabled):hover

{

background-color: #3dcd58;

}

/*Background color for the icon in the Action item on hover*/

.actionBarWrapper .actionBar .menuItem:hover .icon

{

background-color: #009530;

}

/*Action item separator*/

.actionBarWrapper .actionBar .separator

{

background: #7F7F7F;

}

/*Action item down arrow*/

.actionBarWrapper .actionBar .menuItem .downArrow

{

border-color: rgba(0, 0, 0, 0) #FFFFFF #FFFFFF rgba(0, 0, 0, 0);

}

/*Action item up arrow*/

.actionBarWrapper .actionBar .menuItem.selected .downArrow

{

border-color: #FFFFFF rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #FFFFFF;

}