Creating a user interface
You can configure interfaces for the processes for both generated and custom screens.
Creating a stepper structure
To create a stepper structure:1
Go to FlowX Designer and go to the Definitions tab.
2
Click on the New process button, using the breadcrumbs from the top-right corner.
3
Add a start node.
4
Add a new milestone to describe all the user tasks.
5
Add a user task that will represent the first card of our step.
6
Add an end milestone for both the step and the stepper.
7
End your process with an end node.
Configuring the UI
- All the UI elements are configured via the UI designer
- Starting from our basic process, we need to set the start of the stepper template config
- It is enough to open the drag and drop menu and add a Stepper template config for now
- For the first step, it will be useful to add also a label
- Clear the cache to test what we have until now
Testing the flow that we have
1
From the process definition, click the Start process button.
2
We will not pass any data to this process so an empty object
{}.3
Click Start Process and you will see the first step.
Adding a card with one input
1
Go to your user task (this will represent the first card of your step).
2
Add a
CARD (this is the UI card element).3
Add a Form to it (Form elements group inputs together).
4
Add an input into the form:
- Configure the key - you can use the key to retrieve the data form saved on that element
- Configure a label
Testing our first input
1
Start one more time the process that you just configured.
2
The input is displayed.
3
Test the input.
Adding second input and a submit action
1
Go to your user task node and add a new input via Node UI designer.
2
Now go back to the process and add a new action rule:
- first we need to configure the action - the action is called when the button is pressed - the action should be Manual (not automatic because it is triggered by a user)
- we need to keep in mind the name of the action -
saveDataFirstStep
3
Go back to the Node UI designer and add a button (we need to link the button to the action based on the name).