Creating repeatable forms using Form Repeat control

Build forms to capture repeatable data using Form Repeat control

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 that all forms need to work on all devices: mobiles - portrait and landscape view, tablets, and desktop view.

For such repeatable forms, the platform offers the Form Repeat 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. On submitting the form, the multiple records for the same base column are stored in a JSON column in a sheet.

Moreover, we can customize it for the different types of screens. The 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 as a JSON column as done for the Form Repeat control.

Let us first have a look at this video to understand how to use a Form repeat control.

Using the Form Repeat 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 Repeat control for the Experience details and a Submit button. To the ExperienceDetails add the Text control for the Company name, Numeric control for the Number of years, and a Text control for the Reason . Let us also create a sheet named Candidate_experience_doc to store these details. Add columns for Candidate_name ( text type ) and a JSON type column for Experience. When you submit the data it will be stored to this sheet as a JSON object.

Adding properties to control

Now let us see the properties for the Form Repeat 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 section box settings for the different screen sizes. For screen sizes between 640 to 768 we have set it to 2 columns and others as one. The child as columns is set to 1.

Adding workflow to the form

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. Name it as experience_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_experience_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 Experience column, you can get them as the name of the Form Repeat control namely workexperience1 . Optionally you can select the F option > Tasks > Initiated. Under Initiated you can select the Form Repeat control with its name.

Linking the workflow to Submit button

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.

Preview

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 1 column but there are rows in two columns. This is because in this example we have set the column for screen sizes between 640 to 768 as 2 columns.

Multiple rows in mobile portrait and landscape view

Mobile Lanscape view and Tablet view

The data will be stored to the sheet. Note that the Experience column which was of JSON type contains all the records added for the candidate.

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.