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)

ActionsGroupPanelImg004

 

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.

 

ActionsGroupPanelImg001 ActionsGroupPanelImg002

Type:

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

  • Bar
  • Menu
  • Action Sheet
  • Floating

ActionsGroupPanelImg003

 

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.

FloatingActionsImg001

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

FloatingActionsImg002

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

FloatingActionsImg007

 

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.

 

FloatingActionsImg004

 

FloatingActionsImg005

 

FloatingActionsImg006

 

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;

FloatingActionsImg008

 

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

FloatingActionsImg009

 

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.

FloatingActionsImg010