As you create the advanced forms you will have scenarios where the user would need to enter multiple values for the same column. For example, there could be multiple rows for the candidate’s experience, team expenses, candidate’s qualifications, and so on.
At the same time when designing forms you need to keep in mind the need of the hour; to create user-friendly device friendly responsive forms. In this world of multiple mobile devices, the users expect to access forms on all relevant screens and across multiple screen sizes. All forms need to work on all devices: mobiles - portrait and landscape view, tablets, and desktop view.
For such repeatable form, the platform offers Form MultiRow control which is a Container control that enables you to add a group of controls. These are the columns that would be repeated when you are running the form. It will thus be multiple records for the same base column. Moreover, we can customize it for the different types of screens. The data that is captured through this control is stored in two ways; as an array of values for the given column or as multiple rows for the same base column.
Let us first have a look at this video to understand the working of the Form MultiRow Control.
Form MultiRow control is similar to Form Repeat control with the only difference being the values for the control are stored as different rows or as an array against storing in the JSON field as done for the Form Repeat control.
Using the Form MultiRow control
Let us take an example to add a form to add a student’s name and educational qualifications. Multiple educational qualifications would need multiple rows. Moreover, say we want to store the Degree details, the marks, and the type of course: full time or part-time. This is the most important functionality that we should be able to provide to the user.
For this example, you can add a Text control for Candidate name, and a Form MultiRow control for the Educational qualifications and a Submit button. To the Educational qualifications add the Text control for the Degree, Numeric control for the Marks, and a Dropdown control with a single select option for Duration. Let us also create a sheet Candidate_details_doc to store these details. Add columns for Candidate_name (text type) , Degreename (text type), Marks (number type), and Duration (text type).
Now let us see the properties for the Form MultiRow control that you need to set it for multiple rows and multiple types of screens. Let us check the basic properties that can be used.
Now set the properties for the multiple types of screen sizes. We would be setting the number of columns that would be shown for the multiple records that we add. Set the properties under Section box Configuration and the Child as columns configuration to set the number of columns displayed on the screens. Here in this example, we have set the column for the different screen sizes. For screen sizes between than 640 to 768 we have set it to 2 columns. Similarly for the screen sizes between than 769 and 1024 we have set it to 3 and 4 for those larger than that.
Now let us add the workflow for the form so that you can submit the data to your sheet. Select Workflow from the menu and click + (add) icon under the current Screen to add the workflow. It is important that the workflow is created under the screen where it is to be applied. Open the workflow to configure the tasks of the workflow for submitting information.
Select the task as Update Sheet and click Continue. Add a Task name and description (optional) and click Next. Here specify the sheet as Candidate_details_doc where the records are to be inserted and select What to do as Insert Record.
Now we need to link the columns of the sheet to the controls, under Insert Data, type the control name, that is available as suggestions representing the Uniquename for the control. For the name, you can see the Uniquename of the control on the form. The Uniquename is a unique identifier for the control and is auto-generated, based on the label name of the control when we added the controls. Now for the three Qualifications fields, you can get them as qualifications. Degree, qualifications.marks, and qualifications.duration. Optionally you can select the F option > Tasks > Initiated. Under Initiated you can select the MultiRow control’s child controls as qualifications.degree, qualifications.marks, and qualifications.duration.
Now to add the records as separate rows to your sheet, you need to add the settings for the workflow accordingly. Select the Edit Workflow and select Submit records separately. Add a description and Save Workflow. This feature is only available for the Form MultiRow control and cannot be used for other controls.
Alternatively, instead of enabling Submit record separately, you can make use of the other feature which allows you to iterate this specific task and not run other tasks multiple times. Further, you can also specify the conditions when the iteration should be done.
You now need to link the Workflow to the Submit Button. In the properties of the Submit button, click Select Workflow. Select Candidate_workflow that we created in the previous step. Now you can set the properties as required. Set the action for successful submission as required. For the sake of this example, we will set it as a Popup Message.
Now you can take a preview of the form. Note that the mobile landscape view is between 641 and 768, In this case, the child sections are added in two columns as against one column in the Portrait view. This is because in this example we have set the column for screen sizes between 640 to 768 as 2 columns.
You can now check the sheet for the records stored
Once you have finalized the overall form and are satisfied with its look and feel, you can Publish it so that it is accessible for organizational or public access as per your need.