Multistep Form
🪜 Build complex dynamic personalised forms in no time!
Learning the Basic Component Concepts
Form step (section). A block that includes Form elements.
Form element. Could be one of the following:
Text paragraph;
Inputs (up to 12);
Action buttons (up to 12);
Submit button;
Hint;
Sub-header;
Redirect.
Object model. JSON-object that includes the current fields' values (default values and filled by the user).
Form state. JSON-object that includes one ore several parameters of the current form state. One default property is
step
— it defines the current Form step.
Building a Simple Form
Let's start from creating a simple form where all users (both authorised and unauthorised) would be able to add new book, filling it's title. First of all, we are creating a data structure and then follow the steps.
Step 1. Install Multistep Form plugin from the marketplace
It's a free plugin available for everybody
Step 2. Add a Multistep form to your page
Step 3. Configure endpoint
We need to have the endpoint for creating/editing objects. For the beginning we may make it public.
Step 4. Add step elements
By default, we have 2 form steps: default step
and submitted
. Let's configure them!
Add new element to default step
:
Choose Inputs element. Here we can configure inputs for filling fields available for reading (as well as state properties):
The second element will be "Submit". It'll send the POST request to the endpoint creating new object. Also, submit changes Form state step
current value → submitted
Step 5. Set up the first form step
The last thing that we need to configure the default value of the state – define the first step in the Form:
Step 6. Test the form!
Push "Save" and – voilà:
Applying the Templating engine
You can use templating engine in the form title, description, in step elements, etc. The available fields include:
Form State properties
Fields from Object model
WebUser's fields like
firstName
,lastName
,role
,userpic
,id
If the element has a description <HTML /> is allowed here
, you can apply HTML and CSS.
You can use the templating engine in different elements like paragraph, sub-header, input descriptions, etc.
Navigating between steps
As we pinpointed, the current step is defined by the form state, FormState.step
.
For example, if you want to start from my step
, you need to define it as a default value:
Setting default step
Changing state
There are the following ways to change the state (and, the step
property in particular):
Add Inputs element and define it as an Input for changing the state. You can configure it as a plain text input or as a dropdown select (this case you need to add some options):
Debugging
Here is how debug mode looks like:
Don't forget to turn off the debug when you go public with your app!
Setting up Dynamic Inputs
One may need an input that dynamically provides user with options. It may be a dropdown select, radio buttons, tags. etc. The options may depend on the other fields' values, on the user's role, and on other parameters. Let's figure out how to set up the dynamic input!
First and foremost — the dynamic input is one for link
or arrayLink
fields. The options are defined by the request to the additional endpoint.
Example of a dynamic input. first input is a radio button: "guys or girls". The dropdown below provides us with the options according to the first choice:
There are the following options for rendering dynamic input:
Dropdown select (for
link
)Dropdown multi-select (for
arrayLink
)Radio-buttons (for
link
)Checkboxes (for
arrayLink
)Tags (both for
link
andarrayLink
)Images-radio-buttons (for
link
)Images-checkboxes (for
arrayLink
)
Dropdowns support any number of options thanks to dynamic filtering. All the other — up to 1000 options.
Configuring Conditional Visibility of Elements
Documentation is being composed...
Using Action Buttons
Documentation is being composed...
Editing Existing Objects
Documentation is being composed...
Autosubmit
Documentation is being composed...
Processing Requests Synchronically
Documentation is being composed...
Setting up Progress Bar
Documentation is being composed...
Using Redirect Element
Documentation is being composed...
Online Refreshing with Socket.io
Documentation is being composed...
Last updated