Inspection Form Design

We will start by designing a simple form to perform Equipment Inspections. For this tutorial we will collect the following information:

• Date / Time of the inspection
• Equipment being inspected
• Condition of the equipment - Select from Good, Warning, Repair, Replace
• Comment - For Warning, Repair and Replace an additional comment will be accepted
• Picture - A picture is required to be added for Repair and Replace
• Name - Inspector’s Name to be selected from a list
• Signature - Signature of the Inspector

Form Design

1. Login to Turbo Apps and click on Forms in the sidebar
2. Click on the Create button and choose Form to display the Form Designer
3. From Layout, drag and drop Columns
   1. In Column Properties, confirm Width is 8 for each of the columns
4. From Advanced, drag and drop Date / Time component into the first column
   1. Check Use Locale Settings so that browser locale will be used for display
   2. Click on Data and set Default Date to moment() to initialize it to current date and time
   3. Click on Validation and select the Required field
   4. Click on API and change API name to inspectDateTime
   5. Click on Save
5. From Basic, drag and drop Select component into the second column
   1. Change Label to Equipment
   2. Click on Data and add multiple equipments to the list. Under Data Source Values enter Computer in label and tab, the value computer will be set automatically. Now click on Add Another and similarly add the labels CPU, Mouse, Monitor, Keyboard and Headphones
   3. Click on Validation and select the Required field
   4. Click on API and confirm API name is equipment
   5. Click on Save
6. From Basic, drag and drop Radio component into the second column below Equipment
   1. Change Label to Condition
   2. Check Inline View so the radio buttons display horizontally
   3. Click on Data and add multiple conditions to the list. Under Values enter Good in label and tab, the value good will be set automatically. Now click on Add Another and similarly add the labels Warning, Repair and Replace
   4. Once all the values are added, remember to choose *Good as the Default Value
   5. Click on Validation and select the Required field
   6. Click on API and confirm API name is comment
   7. Click on Save
7. From Basic, drag and drop Text Area component below the columns so it takes up the full width
   1. Change Label to Comment
   2. Click on Validation and select the Required field
   3. Click on API and confirm API name is condition
   4. Click on Conditional and under Simple, set the Component Should Display to False, choose the Form Component as Condition (condition) and lastly set value to Good. This is done as we do not want the Inspector to enter a comment if the equipment condition is Good
   5. Click on Save
8. From Layout, drag and drop Columns below the Comment field
   1. In Column Properties, click on Add Column to add a 3rd column
   2. Change Width of the 2nd and 3rd column to 5 to make a total of width 16
9. From Turbo Premium, drag and drop File component into the first column
   1. Change Label to Equipment Image
   2. Click on **File** and set Storage to Base64. Also check Display as Image, Upload Only, Enable Web Camera, Change Default Compression and set Compression Size to 1 MB
   3. Click on Validation and select the Required field
   4. Click on API and confirm API name is equipmentImage
   5. Click on Logic as we are going to add logic to ensure that an image is required only if the condition is Repair or Replace. Set Logic Name to repair, Trigger type to Simple, Form Component to Condition (condition), and set the Has The Value to repair. Now Add an Action. Set Action Name to repair-mandatory, Type to Property, Component Property to Required and Value to True. What we have achieved is to set the Mandatory property for this file component to true if the condition is Repair. Now remember to Save Action and Save Logic.
   6. Similarly add another Logic and Action to check for condition value Replace.
   7. Click on Save
10. From Basic, drag and drop Select component into the second column
    1. Change Label to Inspected By
    2. Click on Data and add multiple equipments to the list. Under Data Source Values enter Alex Johnson in label and enter the value 1 for value. Now click on Add Another and similarly add the labels/values Brandon Clark as 2, Justin Taylor as 3, Kevin Anderson as 4 and Ryan Miller as 5
    3. Click on Validation and select the Required field
    4. Click on API and confirm API name is inspectedBy
    5. Click on Save
11. Finally from Advanced, drag and drop Signature into the third column
    1. Change Label to Sign
    2. Uncheck Click To Sign as we want users to digitally sign their signatures and not just affix name
    3. Click on Validation and select the Required field
    4. Click on API and confirm API name is signature
    5. Click on Save

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

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

The newly minted 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. The DateTime field is prefilled with current date and time and the user can change if required. Notice that when the condition is good, the comment field is not visible. Also image is not required. When you choose Warning, Repair or Replace, the comment field now appears. And finally for Repair or Replace the Image is a mandatory field.

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 filled in by Inspectors.

Assign and use the form

Once the form is published, navigate back to the Forms list. In the Computer Inspection row, click on the Assignments icon. choose a team or teams that you belong to and assign the form.

Login to Turbo Forms App

Now login to the Turbo Forms App on web or mobile as the same user and click on the + button to create a new form to fill and choose the Computer Inspection form. You should now be able to fill in data, choose the user, take a picture and submit it.

Assignments

For working with the SAP Flow Development tutorial later, you will need to design a Notification Create Form. Here are the details for you to create:

Create Notification Form

Add another form called Notification Create and add the following fields:

Field Label	API Property Name	Type	Mandatory
Notification Type	notifType	Dropdown	Yes
Equipment Id	equipmentId	Textfield	Yes
Functional Location Id	funcLocaId	Textfield	Yes
Short Text	shortText	Textfield	Yes

Topics Covered

Note

The following concepts have been covered:

1. Designing a form with various components
2. Adding columns layout to align the form as required
3. Collecting signatures and pictures as part of the form
4. Show or hide components based on values of other components
5. Make a component mandatory if another component has specified values