Now, most applications design have multiple forms with a simple design. Most applications are designed such that you would navigate from one form to another while having to share data between forms. Often you have to make sure that these forms would have to be reset on submission of the group of forms. The no-code platform has several form features that enable you to design such multi-screen forms.
Let us have a quick look at this video to understand how you can create multi-screen forms.
Let us take an example to create a form to add basic Candidate information like the name and address of a candidate. Here we would also need a form to store the Work experience details. You will navigate from the basic form to the next form to add experience details for the same candidate. The name that the user enters on the Candidate form will be sent to the Work experience form. Let us now see the process to create multi-screen forms for candidate details.
Add a form CandidateDetails with the Text control for the Candidate name and Candidate City , and an Action button . Label this Action button as Add experience details . For the sake of this example, we will be using a form that we had created in another example, for CandidateExperience . This form will get the Candidate Name that we have entered in the Candidate Details form.
Let us understand some of the important features that you need to keep in mind to enable ease of use of the multi-screen forms.
Let us now understand how you can create multi-screen forms with the following capabilities:
- Navigating between screens
- Accessing control data between screens
- Validating data when navigating and submitting forms
- Submitting data in the workflow
Navigating between screens
The most important feature of any multi-screen application is the ability to navigate from one form to another. Now let us take an example to navigate from the CandidateBasic form to the CandidateExperience form and back to CandidateBasic form as well. Select the Action button. We want to set the navigation to move to the next form.
Select the Action button and Click A to get a list of actions. Being a button you would have one action as button_click.
Now select the actions by selecting Step-1 which includes the list of actions like Exit App, Navigate to, Call, and so on.
Select Navigate to , a list of forms appears.
Select the necessary form, “ CandidateExperience ” for this example.
Once the first form has been created, move to the form for CandidateExperience . This form has the Candidate Name - Text control and Experience - Form MultiRow control and the Submit button .
From this form, we want to enable navigation to the previous CandidateDetails form. Under the Header properties, set the Left Icon > Action: Navigate to (with validation) > CandidateBasic. The left icon, the right icon, the secondary left, and the right icons are normally used to add navigation between forms, popups, menus, and trays. You can define the navigation to internal pages as well as external URLs.
Accessing control data between screens
Along with the features to navigate between screens, you also need features to enable accessing of control data between screens. In other words, you want to get the control data of one form to another when you navigate to it. Say, for example, if we are inserting records for a candidate with a feature that experience details are added using a different screen, in that case, you do not want to enter the name of the candidate again. You would like to get it from the Candidate basic screen itself. In such cases, you simply need to make sure that you set the properties that enable you to fetch or access the control data between screens.
Now make a few changes to the control properties as we want to add the candidate name from the first form to the next form. So on the CandidateExperience form, set the property for text control for Candidate name as Read only .
Now select F to set the Formula .
Here, add the Uniquename of the CandidateBasic form’s text control which is candidatename2.
Click to Save and Validate .
With this, you are setting the source for this control as the previous form’s data from a specific control. You can thus access the control data from one form to another. If you make any changes to the value in the original form then it will be reflected in the control where it has been linked.
Make sure that you add the workflow to insert data on form submission. Attach the workflow to the Submit button which will thus bind the controls to the sheet you have created for this form.
Now that we have added multiple forms and enabled the navigation between them, you would also need to make sure that your data is validated when it is accessed between forms. There are two scenarios when the data is validated; while navigating forms and while submitting forms . Let us consider the above forms to understand each scenario.
We can set validations to different controls on the form controls. Now when we navigate from one form to another these validation can either enable or restrict navigation. Let us see the form CandidateBasic and CandidateExperience. On the CandidateExperience form let us assign a simple validation to make the Company name column mandatory.
Now let us set the properties of the Left icon. We are going to use it to navigate to the CandidateBasic form. Hence set the Action as Navigate (With Validation) and Navigate to as CandidateBasic.
Now let us take a preview of this form and not enter any values for the Company Name control but add values for Number of years and Reason. Now click the left icon to navigate to the Experience Basic form. The navigation to the CandidateBasic form will be restricted until the time you do not enter some value for the CompanyName. Here we are validating data at the time of navigation.
We have now seen how we can validate data when navigating from one form to another. Now you can also have scenarios where you are submitting forms after navigation from one form to another. You can also define the validation checks during the process of submission of data. By default, the current screen is validated when you click the Submit button .
Now let us take the example of the same form CandidateBasic and CandidateExperience. We have Submit button control on the Candidate Experience form. A workflow has been linked to the Submit button to insert the data to the sheet. Now let us see how we can validate pages on Submit. To understand this go to the Advance properties of the Submit button control. Add the CandidateBasic form to the list of pages to be validated on the click of the submit button with Advance properties > Validate pages. This ensures that all the forms listed here will be validated before submitting data. Also, note that in the illustration below we have defined the pages that would be reset on form submit. Whenever you click the Submit button, the current form is reset. By specifying the name of the other forms you are ensuring that those forms are also reset on successful submission.
We have already assigned a Validation to the CandidateBasic form control for Candidate Name that the name should not be Ben.
Now let us take an example to add valid data to the CandidateExperience form but invalid data to the CandidateBasic form . When you navigate from CandidateBasic to the CandidateExperience you can navigate even if the data is invalid. However, now let us see what happens when we submit the CandidateExperience form. As we had entered invalid data on the CandidateBasic form an error message is shown on Submitting the ExperienceDetails. Only when you rectify that page then only you can submit the form.
Now if you take a preview of the CandidateBasic form with valid data and click the Action button “Add experience button”, you will be taken to the next form (CandidateExperience form). The Candidate name that you entered in CandidateBasic form can be seen in the Candidate name control of the CandidateExperience form. As it has been set to Read Only, you cannot change it. Add the experience details and Submit the form. The data will be inserted to your linked sheet.
When you Submit the CandidateExperience form, it is Reset by Default . In this example, we have set the properties to reset the previous form as well when we submit the current form. We have already set the Left Icon > Navigate to to the previous form.
Thus you can now understand how to manage the multiscreen forms, navigation settings, and submission of data with validation.
Submitting data in Workflow
Once you have all the data from all the screens in the application validated and as per your requirement, you can submit the data using an Update sheet task of the workflow. We can have the controls bound to the columns to insert data. There can be situations where we would need to bind the control data coming from another form to the current form as input. Let us take an example to understand the submission of data in such scenarios using the Workflow.
Now let us consider another scenario here. Let us consider that you are adding the Candidate name on the CandidateBasic form and then move onto the CandidateExperience form. You do not want to show the Candidate name again on this form and only capture the Experience details for the candidate. However, you want this Candidate name from the CandidateBasic form to be captured and stored to the column in the sheet while the Experience details will be entered by the user and stored to the columns in the sheet.
In earlier examples, you had only made the control as Read Only but are displaying it. Now as you do not want to display it to the user, so you will have to assign it as Hidden. Now make sure that you bind it to the column in the Update sheet task of the workflow. With this, you can thus make sure that the data is captured and stored to the sheet but not displayed.
Now let us take a preview of the CandidateBasic form to see how the data is captured from one form to another. In this case let us add a name Jack to the Candidate Name and city as NY.
Click the Add experience details button to navigate to the Candidate Experience form. Note that the Candidate name is not visible . Enter the Experience details and Submit the form.
Now if you check the Sheet for Experience details you can see the Candidate name stored along with the experience details that we submitted in the form above.
The multiscreen forms are very effective in providing users easy to use applications yet ensuring all features to capture all the necessary data.