Multistep Form
🪜 Build complex dynamic personalised forms in no time!
Last updated
🪜 Build complex dynamic personalised forms in no time!
Last updated
Multistep form is a new generation of the component (for now we keep them both available). It allows users to create complex multistep dynamic forms which are personalised for app users.
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. There are two default properties: step defines which form step is displayed now) and popup shows the popup and the relevant step in it.
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.
We need to have the endpoint for creating/editing objects. For the beginning we may make it public.
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
The last thing that we need to configure the default value of the state – define the first step in the Form:
Push "Save" and – voilà:
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.
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:
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, as a dropdown select or a button line. For select and button line you need to add options. Those options can be set manually or pulled from the object's field (type of json, an array of key-value pairs like [{"key" : "option1", "value" : "option one"}, {"key" : "option2", "value" : "option two"}]).
By default the step (section) is visible if its name == FormState.step. If you want to make it visible in other cases, use Advanced step settings:
The step may be visible always or when the FormState.step value is in the list (comma separated)
Here is how debug mode looks like:
Don't forget to turn off the debug when you go public with your app!
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 and arrayLink)
Images-radio-buttons (for link)
Images-checkboxes (for arrayLink)
Dropdowns support any number of options thanks to dynamic filtering.
Important: if you use dropdown, there have to be system filters for _value and _filer. if you create an endpoint right from the Multiform component, that filter is added automatically. But pay attention, that if you want filtering (quick search in the dropdown) work with more fields, add them in the filter (field like _filter)
If you want to connect filtering on endpoint with the values that user fills, use custom request parameters and pass them those values.
If you like, you can save the options quantity to a state field. It works for hidden elements as well.
You can set up the conditional visibility for each step element and for each action separately.
equal, not equal
contains/dos not contain (for Directual arrays – comma separated strings)
in/not in (for Directual arrays – comma separated strings)
empty/not empty (no second value)
model is changed/not changed since last submit (no any values at all)
Action is an element that can do the following:
Send POST-request to API-endpoint
Edit object model or state (including resetting the model and discarding changes in it)
Action can be either button or auto-action (performed on a certain step or when a certain field is changed)
One configures an action (tab Actions) first and then add it to the form as an element
There can be a few action buttons within a single form element, in a row.
To save the whole model to the object you can use Submit element
By default the submit button resets the model and sets the FormState.step to submitted.
You can change those settings: keep the model and choose different step.
Also, you can set up conditional visibility. Common case: hide the submit button if the model is not changed.
On the State tab you can turn on saving state to a certain field on submit.
Turn on switch "Edit the 1-st object in API-response"
Editing an object pay attention to the following:
Object's fields including ID have to be available both for reading and writing
Form takes the first object from the endpoint. Configure filters or sorting accordingly.
If you edit an object, you can restore the state from it. There are two options.
You can place any Step (section) to the popup:
If you like you can even configure a chain of popups!
This feature turns Multistep-form into a super-powerful component!
You can add a progress bar to the form:
Configure the progress bar, adding steps into it, arranging the order, and filling steps' names, descriptions, etc.
Bear in mind that you can redirect to the page or a subpage using object fields or form state properties in target URL.
The updated fields have to be available for reading
The form settings includes "Edit object" option
Here is how the form look like (be sure that your endpoint provides you with the required object. If not — use filters and sorting)
Install the plugin from the Marketplace
Create a scenario, that triggers when object is Changed. It calls the Socket plugin for all users (* in the first field), for a certain event (in our example event name = refresh)
Don't forget to publish and run the scenario!
Next — add a refresher component to the page where the form is located (use the same event name. In our case — refresh)
That it is! Result:
Apply for changing the state;
Apply .
You can turn on debug for displaying Form Model (and system messages on developer console about ) and Form State:
Any dynamic input requires an endpoint. You can configure filters and sorting in this endpoint as you wish. Moreover, don't forget to set up and make it available for reading in that endpoint.
The conditions can be combined either with AND or OR operators. You can compare current model fields and state properties with expressions (using the ). There are the following operators for comparison:
Each action button has its own visibility conditions, . One can hide or disable the button conditionally.
Actions support .
Submit supports .
Tip: usually endpoint filters depend on
If you want to proceed editing object after submitting, turn on "Keep the model" on .
Similar to step you can set up popup specifying which section should be displayed in the popup (for example, ):
and can send a POST-request. As we know, the . That means the API response may contain the result of the object processing within the scenario.
Use in the scenario and compose a response in the following format:
First—better to put progress bar in a step that is (or at leas on the steps that are included into the progress).
Redirect element (surprise!) redirects the user. It works like , but automatically.
The common case: the form creates the object, returns its ID, and the redirect element leads the user to the page where he proceeds editing the object.
If you using the Multiform, you can update it using .
.svg?alt=media&token=4bf51eda-48c4-43d1-8222-6f71465a87f1)
