Action Group for the Web

Official Content
This documentation is valid for:

In the web platform, an Action Group is an element of the user interface which is used to group controls (buttons, images, text blocks and variables), and it helps to easily create a toolbar.

It is supported in abstract layouts and its main purpose is to allow you to insert several controls inside the same cell of a Responsive Table.

This implies that it won't be necessary to adjust offset settings between the different controls because the whole group is displayed as a single element.

Another use of an action group, is to create a menu.

When to use an action group:

To insert several controls inside the same cell and to avoid the effort of adjusting the offset settings between the controls. This is a Toolbar action group.

To create a responsive menu. This is a menu action group.

Toolbar action group

In this case the Control Type= Toolbar. In all devices, it will be displayed in only one row.

For example, the navigation buttons of a web transaction are inside an action group.

i2016_08_14_16_10_118_png 
Picture #1

The paging buttons and the select button are inside an action group, along with the confirm, delete, and cancel buttons which are inside another action group:

i2016_08_14_16_12_149_png
Picture #2

Menu action group

In this case the Control Type= Menu. See Web Navigation Bar for details.

Both toolbar and menu action groups can have a dynamic component. See How to create a dynamic menu for WEB applications

Creating Action Groups

There are two ways to create an action group, which we explain below:

Alternative #1. Click on the arrow in the top left corner of the layout and select "Add Action Group", as shown below:

i2016_08_14_15_13_491
Picture #3

Then in the toolbox of the responsive table, the action group will be available to be dragged to the form:

i2016_08_14_15_39_196_png
Picture #4

Alternative #2. Drag the "New Action Group" item from the toolbox to the web form.

DragNewActionGroup
Picture #5

Then you can set the Action Group name and if it's dynamic or not.

NewActionGroupSettings
Picture #6

The action group will also appear in the toolbar.

ActionGroupintheToolbar
Picture #7

Afterward, regardless the way you added the control to the form, new controls can be added to the group by right-clicking at the top of the layout and by selecting the insert <control>.

i2016_08_14_15_14_252
Picture #8

The controls of the action group have the same properties as any control inside the responsive table.

Nesting groups of controls inside the toolbar

A subgroup of controls can be added inside an action group. 
Dragging a group from the Toolbox to the toolbar will result in an arrow where other controls can be dropped.

i2016_08_14_15_20_155_png
Picture #9

Then the controls can be added or dragged to the group:

i2016_08_14_15_19_414_png
Picture #10

Note: Another way to add a group to the action group is by rick-clicking and by selecting "Insert Group".

As an example, web transactions default web forms have paging buttons defined in a subgroup (see the Picture #1)

Note: The subgroups are generated as BootStrap button groups.

Action Group properties

Control Name Control Name of the action group.
Caption

Caption to be shown. It only applies when the Control Type = Menu. It's displayed when there is no Image(*) configured for the Menu.
If an image is configured, the Caption is used as an alternate text of it.

The Caption style settings can be configured using the Caption Class property of the ActionGroup Theme Class. 

Class  Theme Class associated with the action group control.
Control Type {Toolbar, Menu}. See Web Navigation Bar
Image(*) It only applies when the Control Type = Menu. It's an image (logo) to be shown at the left-hand side of the menu. It can be configured using the Image Class property of the ActionGroup Theme Class. 
Position Only for control type = Menu. The possible values are: {Default, Fixed top, Fixed bottom}






Was this page helpful?
What Is This?
Your feedback about this content is important. Let us know what you think.