Custom Button Documentation

the following outlines how to configure and utilize custom buttons within your flow screen solutions

1) Create Button Collection Variable(s)

this collection will be used to store new buttons and will be assigned to the screen component.

Create Button Collection Variable: To configure custom buttons for a flow screen first create a new flow resource with a Data Type of "Apex-Defined" and Apex Class set to "FlowToolKit_Button". This resource must also be marked as "Allow multiple values (collection)". This collection will be passed to the Form (Buttons) screen component. If your solution requires multiple sets of buttons, create multiple button collection variables, one for each business case. Note: a single button collection can be referenced within multiple screen components. Additional button collection variables are only required if different types of buttons are required.

 

2) Add New Buttons to the Button Collection

Drag the action element into the flow composer and search for "Add New Button"

Buttons are configured and added to the button collection variable via an Apex Action labeled "Add New Button". Drag a new action element onto the flow composer and search for "Add New Button". The Add New Button custom property editor which is outlined below provides an interface for building custom flow buttons. See the documentation and demo component below for more details.


It is important to note that new buttons are added to the button collection variable by setting the Button Collection selector to the related button collection variable .  The Add New Button action returns a "buttons" output value which includes the newly configured button.

The order in which buttons are configured within the flow composer, is the order in which the buttons will be displayed within the flow screen component. The example above shows that the "Submit Form Button" will be the first button displayed, follwed by the "Update Contact(s) Button", then the "Reset Values Button", and finally the "Save and New Button".

Add New Button (Custom Property Editor)

this custom Apex Action is used to configure and assign new buttons to a button collection variable.

Add New Button (Action)

Use the component below to demo creating custom buttons.

The component below will allow you to test configuring a custom button to be used within flow screen components. Be sure to reference the Button Preview section for a live preview of the configured button and optional modal.

Note: click the button to preview modal message configuration.

FinishButton
Button Configuration
Button Action/Navigation
Google reCAPTCHA V3
Button Display Details
Button Icon (optional)
Enable Confirmation Modal
Button Preview
Common-Unite   |   support@common-unite.com  |   Release 3.217  |   Latest
Falk87gl7c4W000008PXY1

Assign Output Variable

Don't forget to set the output value to the Button Collection variable.


The FlowToolKit_Button resource collection that was set within the Button Collection selector, must be assigned to the "buttons" output value. Click the Advanced accordion button then check the "Manually assign variables" checkbox. Assign the button collection variable to the "buttons" output as shown below.

Falk87gl7c4W000008PXY1

Add New Button (Action) Documentation

The following outlines how to configure custom buttons utilizing the "Add New Button" flow action.


Button Collection

Assign a flow resource value with a Data Type of "Apex-Defined" and Apex Class set to "FlowToolKit_Button". This resource must also be marked as "Allow multiple values (collection)". Note: the value set within the Button Collection selector should also be assigned to the "buttons" output variable under Advanced --> Manually assign variables --> Store Output Values


Button Display Details

This section includes parameters for changing the button label as well as the style of the button.

  • Button Label
    • When the Button Label selector is set to "Default" the button's label will be set to the Button Action Type selector value. For example "Next", "Back", or "Finish". The button's label can be overridden by selecting a custom flow resource from the Button Label selector. Note: only resources that have a Data Type of "Text" are available as button label override options.  Furthermore, only resources with a Resource Type of Variable, Formula, or Constant can be used to override the label.
  • Variant
    • The Variant selector can be changed to adjust the styling of the button. More details about button variant options can be found within the lightning-button documentation.

Button Action/Navigation

  • Button Action Type
    • The Button Action Type selector sets which flow action type is triggered when a User clicks the button.  The Form (Buttons) component allows multiple buttons that share the same action type. For example, multiple NEXT buttons can be configured for a screen. Note: like with standard flow buttons, NEXT, FINISH, and BACK buttons are only displayed when the configured flow allows for NEXT, FINISH, or BACK actions.
  • Button Return Value
    • When a button is clicked within the Form (Buttons) screen component an output variable labeled "Button Clicked" is returned. The returned Button variable can be used within a decision element to determine which button a User clicked. When the Button Return Value selector is set to "Default" the returned Button returns the value set within the Button Label selector. This can be overridden by selecting an alternate return value defined within a flow resource.
  • Bypass Validation
    • Fields marked as required or that include field validation such as min/max values will prevent a User from navigating forward within a screen flow. Enabling the Bypass Validation toggle allows Users to navigate forward even if validation errors are present.

Button Icon (optional)

Optionally append an icon to a button by setting the Icon Type and Icon parameters.  The Button Icon Position selector toggles the icon position either left or right of the button label.


Enable Confirmation Modal

Optionally apply a confirmation modal to the button by enabling the toggle next to the "Enable Confirmation Modal" section label. When enabled a custom modal pops up whenever a User clicks the button. In order for the flow action to trigger the User must click the 'Confirm' button within the modal. Clicking "Cancel" closes the modal allowing the User to continue editing within the flow screen.

  • Modal Theme: Changes the styling of the modal. Style options utilize style classes outlined within the Lightning Design System.
  • Modal Heading Value: Set the modals heading/title to either a flow resource value or manually type in a text value.
  • Modal Subheading Value: Set the modals subheading/subtitle to either a flow resource value or manually type in a text value.
  • Modal Subheading Value: Set the modals subheading/subtitle to either a flow resource value or manually type in a text value.
  •  Modal Confirm Button Label: Set the modals to confirm the button label to either a flow resource value or manually type in a text value.
    • The "Default" button label is 'Confirm'.
  • Modal Cancel Button Label: Set the modals to cancel button label to either a flow resource value or manually type in a text value.
    • The "Default" button label is 'Cancel'.
  • Modal Body Value:  Optionally set a message to display within the modal's body. The selector includes Text Template resources as options.
    • Administrators can also manually type in a text value.

3) Configure Custom Screen Components

Use the Form (Buttons) or Form (Header) components to display custom buttons.

Drag and drop either the Form (Buttons) or the Form (Header) component onto the flow screen. Reference the Form (Buttons) documentation outlined below for configuration details.

Custom Screen Components

the following screen components are used to display custom buttons within a flow screen.

Form (Buttons)

Screen component custom property editor

customButtons
Configure Buttons

Button Display Configuration
Button Display Type
Component Settings
Common-Unite   |   support@common-unite.com  |   Release 3.217  |   Latest

Assign Output Variable

Assign the output value to a flow button resource

The Form (Buttons) component returns an output value that includes the information about the button that was clicked. Store this value within a flow resource and use it within a decision element when applicable.

Form (Buttons) Documentation

The following outlines how to display custom buttons using the Form (Buttons) screen component

Select Buttons

  • Button Collection
  • Assign a flow resource value with a Data Type of "Apex-Defined" and Apex Class set to "FlowToolKit_Button". This resource must also be marked as "Allow multiple values (collection)".


Button Display Configuration

  • Button Display Type
  • Standard: when selected the buttons are display as floating buttons without any special formatting.
  • Footer: when selected the buttons are displayed within a formatted block footer. See Below.

  • Docked Footer: when selected buttons are fixed within a formatted block footer at the bottom of the page.
  • Button Alignment: aligns the buttons within the compenent to the left, right or center of the screen.
  • Number of Buttons to display: defines the total number of visible buttons. If the Button Collection includes more buttons than this value additional buttons will be assigned to a button menu at the end of the component. The following example has a collection with 4 buttons. Number of Buttons to display was set to 2, the other two buttons are accessible from within the drop down menu.


  • Group Buttons: when enabled all buttons are displayed as a button group without any spacing between buttons. For more information reference the lightning component developer guide.

 

Flow Buttons Demo

try out the buttons configured within the demo flow below.

utility:touch_action
there are multiple ways to display buttons within a flow screen.
Form Buttons Configuration Demo

Custom buttons are displayed within flow screens via the Form (Buttons) component or the Form (Header) component. The following examples demo how the Form (Buttons) component can display buttons on the screen. The header above which is configured with the Form (Header) component also allows administrators to assign a collection custom buttons.

Form (Buttons) can be aligned to the left, right or center of the screen.


 


Display Buttons as Grouped or Spaced.

This example shows spaced out buttons.

 


Form (Buttons) can be configured to show a specified number of buttons.

All other buttons will be added to a button menu.

 


Form (Buttons) can Display buttons with multiple variants.

see lightning-button documentation for more details

 


Enable Google reCAPTCHA v3

click button below to learn more!