Designing Apps – Workflow Actions Widget

Workflow actions widget - at least one of those is required if app has workflow defined, defines a place in an app where workflow actions will be displayed together with actual state.

Workflow buttons can be formatted, see more in article about Button formatting.

Workflow actions button widget with formatting options

Name – section name

Size - Width and height of sections

In the designer, with multiple actions, you can position the buttons one below the other. Simply take hold of the edge of the action widget in the workflow and reduce its width so that the buttons are displayed one below the other. This method does not reduce the width of the widget itself, but allows you to position the widgets correctly.

Visibility - allows a formula to be added to a section, the result of which will determine whether or not it will be displayed in the application instance.

Hide mode - together with the visibility of the section determines how the section is hidden

Auto With - enables a fixed section size to be set in relation to the application screen

Action names - the name of the workflow actions that are available in the current state of the application will be visible in this section.

Icons position - specifies the position of the action name icon (none, left, top, right, bottom)

Buttons height - height of a single workflow action button

Adding an icon to a workflow action widget

It is possible to add an icon to a workflow action widget. To assign an icon, select the relevant action in the workflow tab and then in the properties select the icon from the list or specify it using formulas.

Action property in the workflow tab

In the design tab, the position of the icon and the size of the buttons can also be set.

The action widget in the workflow designer

The action widget in the workflow instance

Style - Workflow Actions

Section:

• Section
  • We can choose a style from the list or define it using a formula, set the alignment of the button, and save the style.

• Button:
  • We can choose a button style from the list of available styles or calculate it using formulas. Additionally, we can set the style from the formatting bar, add borders, and save the selected style.
• Button (hover):
  • Style options can be specified similarly to the button, with the difference that the style will be applied when hovering over the button.

Next to each style property, there is an icon  thet allows you to:

- reset the applied style

-save the selected style