Action Groups in Panels

From the hierarchical tree you can add Action Group with their respective actions, which are explained in the GeneXus documentation: Action Group for Panels (GeneXus Wiki)

An Android phone preview of a WorkWithPlus 'Action Groups' screen showing three floating action buttons stacked at the bottom-right: Sheet, Bar, Menu.

 

You can add Action Groups from the main node of the hierarchical tree, then inside you can add several Action Groups, where inside you can add the actions.

 

GeneXus WorkWithPlus for Native Mobile panel editor: a right-click context menu on the root node 'Based on template: NMEmpty' with Add submenu Events / Parameters / ActionGroups (highlighted) / Animations. WorkWithPlus Native Mobile panel node tree with 'Action groups' selected and a context menu Add > ActionGroup, highlighted by a red arrow.

Type:

Inside you will have 4 types of actions, 3 of them you will see in the GeneXus documentation:

  • Bar
  • Menu
  • Action Sheet
  • Floating

WorkWithPlus Native Mobile panel editor with an 'Action group' node selected; right, its properties (Name ActionGroup1, Type dropdown open showing Bar, Menu, Action Sheet, Floating); center, an Android Phone preview.

 

Floating

Of the available actions, Floating is implemented by WorkWithPlus.

To include the floating actions to the Lists, you can include them from the Design System Wizard in the Data Sections section.

This means that in all the Lists (except those that contain graphics) they will have an Action Group of type 'Floating' included, which will make all the actions inside be of floating type.

The "Create a New Application" wizard's Data sections page shows a left navigation tree (App Info, Home and Menu, Security, Data sections) with a red arrow pointing to a checked "Use floating actions" checkbox under Customizations (Tabs: Bottom); adjacent panels show Detail fields design (Labels left, values right), Data section boxing (Card with elevation), and Data edit boxing (Outline), each with a phone mockup preview.

Here you can see the Lists with 'Floating Actions' included.

The WorkWithPlus pattern settings editor shows an NMListCards selection tree (CardBox with attribute templates for Title, Subtitle, Description) and an Action group node highlighted; the Properties panel's Type field is set to "Floating" (with Bar, Menu, Action Sheet also listed), with red arrows linking the Action group node, the Type property, and a floating plus-button overlay in the card-list preview below.

You can also include it manually by adding an 'Action groups' node and inside an 'Action group' of type 'Floating' in any panel.

The WorkWithPlusHome web panel's Patterns tab shows the "Action group" node selected under Action groups, with a red arrow linking it to the Properties panel showing Name ActionGroup1 and Type Floating, next to a phone preview of the three floating action buttons (pie-chart, headset, Support) above a Soup product card.

 

How to customize this action?

 

Within the Action Group you can add User Actions, and you can customize these by using Images, Font Icons, or a Button with text inside.

 

The WorkWithPlusHome web panel's Patterns tab shows the pattern tree with "User Action (ContactSupport1)" selected under Action groups, and a red arrow linking it to the Properties panel showing Control type Button, Name ContactSupport1, Caption Support, next to a phone preview highlighting a "Support" floating button below two round action icons.

 

The WorkWithPlusHome web panel's Patterns tab shows "User Action (ContactSupport2)" selected, with red arrows linking it to Properties panel fields Control type Image, Image Type Font icon, and Font Icon f590, next to a phone preview highlighting a round headset icon button above the "Support" floating action.

 

The WorkWithPlusHome web panel's Patterns tab shows "User Action (ContactSupport3)" selected, with red arrows linking it to Properties panel fields Control type Image, Image sdpreshomestaoption4, and Image Class FloatingActionImage, next to a phone preview highlighting a round pie-chart icon button above the headset and Support floating actions.

 

The default style when you add an Action is that of the button, with a square shape and rounded edges, aligned with Material Design 3 in Floating Actions.

If you want to use the Floating Actions layout from Material Design v1 and v2 which is with circles instead of square with rounded edge, you can customize it as follows:

 

The class that shapes the action is found in the Design System WorkWithPlusDSNative, where the border radius is defined by the Token $spacing.FloatingActionIconRounding;

The Styles tab of the WorkWithPlusDSNative design system editor shows the .FloatingActionFIWrapper CSS rule, with background-color set to $colors.FontIconFloating and gx-elevation: 4. A red box highlights the four border-radius properties (top-left, top-right, bottom-left, bottom-right), each bound to $spacing.FloatingActionIconRounding, above a comment noting the suggested size is 56x56.

 

This is defined in DS Native tokens, with a rounded base of 16 dip.

The Tokens tab of the WorkWithPlusDSNative design system editor lists the #spacing section, including CardPadding, CardRounding, AttributeLabelWidth, TabsElevation, and ApplicationBarElevation. A red arrow points to the Tokens tab and another to the FloatingActionIconRounding: 16dip line, which carries the comment '//28dip will make action round'.

 

As we suggest not modifying the base design, to modify the value of the token, we define the Token Spacing within the Design System for Android that we have defined, and we give it the value of 28dip so that it has rounded edges.

The Tokens tab of the WorkWithPlus15U2SDDSAndroidTokens file (color-scheme: Light|Dark) shows the #colors, #fonts, and #fontSizes sections, followed by #spacing. A red arrow points to the highlighted line FloatingActionIconRounding: 28dip, commented '//28dip will make action round', illustrating how to make the floating action button fully round.