Designing Screens - Working with Button Group
Buttons on User Input Screens are implemented to direct users to the next step. Buttons that are commonly used in screens are Save
, Cancel
, Back
, Send
, or Edit
. As a template creator, buttons helps with the logic design and connect a screen with different steps.
How to add Buttons to Screen
Place the cursor to where the new buttons should be
Select
Button Group
from the left side panelA new button group is added. In the
Button Group
element more buttons can be added by using "Add Button" option on the right side-panel.
![image-20240204-043108.png](../__attachments/174424080/image-20240204-043108.png?inst-v=5205e5d1-dc16-46d7-af02-1258d99cc136)
How to Configure a Button
To configure a button inside the Button Group
, choose the button in the screen edit view:
![image-20240204-043617.png](../__attachments/174424080/image-20240204-043617.png?inst-v=5205e5d1-dc16-46d7-af02-1258d99cc136)
Move Left/Right: move the button to far left or right of the next buttons.
Next Step: Name of the step in the same segment that this button should direct users to
Next Message: short text message while loading and redirecting to next step (for example, Saving document, Loading, Redirecting,…)
![image-20240204-043929.png](../__attachments/174424080/image-20240204-043929.png?inst-v=5205e5d1-dc16-46d7-af02-1258d99cc136)
Name: is the variable name of the button which can be used later in the Flow to make conditions (for example, “
param.button == Button
" to help identify which buttons users have clicked from the previous screen.Label: the text to display in the button to direct users where to click.
Use cases
Buttons are used frequently in screens as it helps users to exit from one screen to another or or navigation. It helps connect multiple steps and provide interaction for users. For example, in the Custom Form subflow within default template, the OK
button has been connected to Form After
steps to exit the subflow and go back to Main flow
![image-20240204-044545.png](../__attachments/174424080/image-20240204-044545.png?inst-v=5205e5d1-dc16-46d7-af02-1258d99cc136)
It is also possible to connect steps and screen from Flow view. Button Name
is visible from Flow view for template designers to identify which button connects to which step.
![image-20240204-044630.png](../__attachments/174424080/image-20240204-044630.png?inst-v=5205e5d1-dc16-46d7-af02-1258d99cc136)
View from the subflow