Nested Form Design

Nested Forms are smaller portions of forms that can be included in other forms. They are useful when designing branding that you want to include in every form, or some sections of forms that repeat like maybe User information etc. The benefit of using Nested Forms rather than including these in each form is that changes are made to Nested Forms once updated in every form that includes it.

We will now design a simple “branding” Nested Form with:

• Logo
• Title
• Form Number

Form Design

1. Login to Turbo Apps and click on Forms in the sidebar
2. Click on the Create button and choose Nested Form to display the Form Designer
3. From Layout, drag and drop Columns
   1. In Column Properties, click on Add Column and add a 3rd column
   2. Change Width to 4 for all 3 columns
4. From Layout, drag and drop Content into the 1st column
   1. Click the :fontawesome-regular-image: Insert Image icon and select a logo from your saved images and insert.
5. Add another Content component into the 2nd column.
   1. Type in the name of your company for e.g Unvired Inc. Change the type to Heading 1. Hit enter and add a 2nd line Maintenance Record and select and change type to Heading 2. Select the entire text and click on the Center icon to align the text
6. Add another Content component into the 3rd column.
   1. Type in a form number for e.g. *INSP-001, change the type to Heading 1 and center align and save it.

That’s it. We are now done with the Nested Form design. Click on Save and enter the details:

• Icon - Click on the icon and select a suitable icon of choice (optional)
• Title - Branding
• Description - Branding nested form
• Category - Choose Default for now

The newly created Nested Form is now saved.

Preview the form and Publish it

Click on Preview to view how the form will look like on Desktop or Mobile.

Once satisfied with the Preview, remember to go back to Form Design screen and click on the Publish button, enter a comment and publish it. else this form cannot be used in other forms.

Include the Nested Form in the Inspection Form

From the Forms list, click on the Inspection Form to display the Form Designer

1. From Turbo Premium, drag and drop Smart Nested Form to the top of the form i.e. above the first columns component. This will ensure it occupies the full width of the form.
   1. Change the Label to Branding
   2. Click on Form and click on the Form dropdown.
   3. A list of nested forms in the system are shown. Choose Branding nested form
   4. Click on Save to save the properties
2. Click on the Save icon on top to save the form now.

Preview the form and Publish it

Click on Preview to view how the form will look like on Desktop or Mobile. You can now see the previously designed nested form embedded at the top of the Computer Inspection form

Once satisfied with the Preview, remember to go back to Form Design screen and click on the Publish button, enter a comment and publish it, else this version of the form will not be available for Inspectors.

Now lets make another change and see how it reflects

From the Forms list, click on the Branding Nested Form.

1. In the Form Designer do the following
   1. From Layout, drag and drop HTML Element to the bottom of the nested form i.e. below the columns component. This will ensure it occupies the full width of the form.
      1. Change the Label to Line
      2. Set the HTML Tag value to *hr to draw a horizontal line

As always you can Preview the form. Remember to click on Publish and enter a comment to publish the new version of the nested form.

Preview the Computer Inspection form again

From the Forms list, click on the Computer Inspection Form.

1. Click on the properties of the Branding smart nested form component.
2. Click on *Form. Below the form selection, a new panel displays the current version and the New version available. Click on teh Update icon to update the nested form. This gives you control on which forms the updated nested form should be seen so that it does not affect all forms immediately.
3. Now click on Save

Click on Save to save the form and then click on Preview and notice the new horizontal line below the logo header. Navigate back and remember to click on Publish and enter a comment to publish the new version of the nested form.

Topics Covered

Note

The following concepts have been covered:

1. Designing a Nested form with content component for branding
2. Using the Nested Form in another form
3. Make changes to the nested form and publish it
4. Update the embedding form to include the updates from the nested form