You can configure interfaces for both generated and custom screens in FlowX Designer.
Create a simple process:
Go to FlowX Designer and navigate to the Definitions tab.
Click on the New Process button, using the breadcrumbs in the top-right corner.
Add a Start Node.
Add two User Tasks that will represent the screens of the application.
Finish your BPMN process with an End Node.
Now create a Navigation Area (Page) where we will include our user tasks.
In the FlowX Designer, you can create the following navigation areas:
All visual properties of the UI elements and navigation areas are configured using the using the FlowX UI Designer.
To begin, we need to define the type of navigation for our page application. The options are:
We will use the Wizard type for our example.
Open the UI Designer for your first user task. This will represent the first card.
Add a CARD element to the UI.
Add a Form to the card to group the inputs.
Add an input field to the form.
Add a button with a save data action to advance to the next screen and save the input data.
First, configure the action at the node level. The action, called when the button is clicked, should be Manual (not automatic because it is triggered by a user).
Start the process definition that you just configured.
The card with the Form and the Input is displayed.
Test the Input.
Go to your second user task and add a new CARD.
Add other UI elements of your choice.
Start the process definition again to review the final result:
You can configure interfaces for both generated and custom screens in FlowX Designer.
Create a simple process:
Go to FlowX Designer and navigate to the Definitions tab.
Click on the New Process button, using the breadcrumbs in the top-right corner.
Add a Start Node.
Add two User Tasks that will represent the screens of the application.
Finish your BPMN process with an End Node.
Now create a Navigation Area (Page) where we will include our user tasks.
In the FlowX Designer, you can create the following navigation areas:
All visual properties of the UI elements and navigation areas are configured using the using the FlowX UI Designer.
To begin, we need to define the type of navigation for our page application. The options are:
We will use the Wizard type for our example.
Open the UI Designer for your first user task. This will represent the first card.
Add a CARD element to the UI.
Add a Form to the card to group the inputs.
Add an input field to the form.
Add a button with a save data action to advance to the next screen and save the input data.
First, configure the action at the node level. The action, called when the button is clicked, should be Manual (not automatic because it is triggered by a user).
Start the process definition that you just configured.
The card with the Form and the Input is displayed.
Test the Input.
Go to your second user task and add a new CARD.
Add other UI elements of your choice.
Start the process definition again to review the final result: