Multi-Step Form Flow with Reference Fields
In this video you will understand how to create a multi-step form flow with a main collection and several sub/child collections or reference fields. You can link everything to the main parent collection.
For eg., while onboarding an employee data if you want to create several pages for collection such as Education, Previous Employer, Family Members and other details but want to link all of them to the main Employee collection only in the flow. This will be possible via this feature.
1. Create a Reference Field
In your collection add a Reference Field. This will link the data of the collection data to each other and help create the flow. Here also tick the Multi Select Option to allow entry of multiple data for the field as need be.Finish by selecting the Create Field button.
While creating references you may also create a parent-child relationship between the relevant fields. For this choose the Child Of option to build the flow.
2. Create a Page
Now create a page to capture the data and link it back to the main collection. You can either create a new page or copy from an existing page. If you haven’t created your page yet, Click Here
3. Create a Collection Form
To capture details for fields and sub-fields create a collection form. If you haven’t created your page yet, Click Here. Similarly, you can create collection forms for other sub-fields.
4. Create an Event to Save Data
Create an event to save data and it will indicate what exactly has to be done. Choose the Add Event option from the Events option in the left menu. Name the event and click the Create button.
4.1 Define the Event
Go to the Collection and choose Save Data to create this event flow.
4.2 Fill the Form
In the form that appears mention the collection name. You can suggest a confirmation popup such as success or failure if you want to and then click the Save button.
4.3 Redirect the Page
In Navigation choose the Page Redirect option.
4.4 Mention Redirect Details
In the form that appears mention step or the page to be redirected to. Then choose the Send Current Object ID to Page option. This will be needed to send the data details with the selected page when redirected.
5. Bind the Collection to the Page
To create a multi-step form bind the collection to the page to attach and display information of the main and the sub-fields. In the form that appears mention the collection and the page to bind and click the Update option.
6. Bind the Event to the Page
You can bind the event to the page. For this go to your collection form and choose the collection and the event to bind respectively from the dropdown. Then save your settings.
7. Create an Input Field
Now you can even create a reference field without a dropdown. For this choose the Input option from the Component category. In the form that appears mention from where the field can get its content from and the name of that input.
7.1 Hide the Input Field
On doing this the URL will display the ID of the data being displayed. You can mark this ID as hidden too by selecting the Hide option from the dropdown.
8. Create a Collection Form to Share Collection ID
Anytime you add data you will have to propagate its corresponding data ID. For this go to the Component category and choose a Collection Form. Choose the relevant collection and use the Submit button. This means your user can go to the next page and carry the relevant data ID with them.
9. Create an Event to Share Collection ID
Create an event to propagate data ID to the next page it will indicate what exactly has to be done. Choose the Add Event option from the Events option in the left menu. Name the event and click the Create button.
9.1 Define the Event
In the first step go to Collection and Update Data. There can be scenarios where you can store the steps that are being implemented to move from one step to the other. This will help to know what step the user is in or will be taking next.
9.2 Fill the Form
In the form that appears you can mention the confirmation popup if you want and then Save it.
9.3 Redirect the Page
Then go to Navigation and Redirect the Page.
9.4 Mention The Page
In the form that appears mention which page the user will be redirected to by selecting it from the dropdown. Choose the Send Previous Step Parent Collection ID to propagate the main collection ID of the previous page to the redirected page. Then click the Save button to finish.
10. Bind the Event to Share Collection ID
Now bind the event to share collection ID to the collection form. For this go to your collection form and choose the collection and the event to bind respectively from the dropdown. Then save your settings.
11. Add & View Data
Now you can add data to the collections. As you do so the collection ID that is generated in the previous step will carry forward to the next step when you begin adding data there after submission. This is crucial. You can add relevant buttons to help the user move from one step to the other to submit their details.
