Control Type property in Action Group for Panels

Official Content
This documentation is valid for:
Indicates if the Action Group will be rendered as a Bar, a Menu, or an Action Sheet.


Action Sheet The Action Group will be rendered as an Action Sheet.
Bar The Action Group will be rendered as a Bar.
Menu The Action Group will be rendered as a Menu.


Generators: Android, Apple, Angular
Controls: Action Group


Below are described the different behaviors depending on the selected value.

Bar Default value.
The group is visualized as an Action bar.
On iOS, it may be split into two bars depending on the properties of its contents.
This Control type support nested groups with any control type.
Action Sheet  Its visualization depends on the platform. This control type will not show nested groups; it is only for simple grouping actions.
Menu This control type is used to display a group of contextual actions with a user interface very similar to the Overflow Menu (which is as low priority actions shown)

On iPhone or Ipad with Split Navigation on the left, the Menu Type will be shown as an Action Sheet. On the rest of the targets, it will be shown as Menu. -This is an iOS standard.
The Bar Type for secondary action groups is available only for Android.

Runtime/Design time

This property applies only at design time.


Case 1 - Behavior

Suppose the application bar with the following options:


where 'M', 'B', 'AS', '101' are buttons and the last one an ActionGroup within the ApplicationBar with 3 options ('201','202','203').

  • Button 'M' (Menu) calls ActionGroup2 as 'Menu'.
  • Button 'B' (Bar) calls ActionGroup3 as 'Bar'.
  • Button 'AS' (ActionSheet) call ActionGroup4 as 'Action Sheet'.

Sample Code

Event 'Menu'

Event 'Bar'

Event 'AS'

and the following design:

ActionGroup2 - Menu actiongroupdesign02
ActionGroup3 - Bar actiongroupdesign03
ActionGroup4 - Action Sheet
Note: Nested groups are not allowed. 

The application bar with the initial options are detailed as follows:

Android - Default Layout iOS - Default Layout
actiongroupandroiddefault01 actiongroupiOSdefault01

Once you select the options:

Android - Menu Android - Bar Android - Action Sheet
actiongroupAndroidMenu01 actiongroupAndroidBar01 actiongroupAndroidActionSheet01

Remember that iOS (iPhone and iPad split) displays the Menu as ActionSheet; Bar is not implemented, so the result is:

iOS- Menu iOS - Bar iOS - Action Sheet
actiongroupiOSMenu01 actiongroupiOSBar01 actiongroupiOSActionSheet01

Case 2 - With default options

Define an ActionGroup with the following options

  • Edit
  • Share
  • Delete

The following sample details an ActionGroup with the Edit, Share and Delete options for Android (its three alternatives) and iOS (action sheet only).

 Android - Action Sheet  Android - Bar Android - Menu  iOS - Action Sheet
 controlypesagexample1   controlypesagexample2  controlypesagexample3  iosactionsheetexample 


See Also

Action Group Control for Panels