Form Development Assignments - Solutions

Solution 1 - Create Notification Form

Similar to the Computer Inspection form, create a new form. For building the form you have to decide how you want to layout the form. If you just need a simple vertical layout you can drag and drop fields directly into the form. If you need a more detailed layout add the columns layout and then align the fields however you desire.

For all fields adjust the Label and API property key to the desired values. Under validation set the Required field to indicate mandatory. You need to drag and drop the following:

1. A Select for the Notification types. Change the data and add some values that will be displayed in the form.
2. A Textfield for Equipment Id.
3. Another Textfield to indicate Functional Location.
4. Finally a Textarea to accept the shorttext for the notification.

Click on Save and enter the title as Notification and set the description to a suitable one. You can now publish it and assign it to appropriate teams to use it.

If you want it to be more meaningful, think of all the data you would want to collect for your notification and add them like location, pictures etc.

Solution 2 - Inventory Master Data

Similar to the Equipment master data, click on Create and choose the Master Data option.

For all fields adjust the Label and API property key to the desired values. Under validation set the Required field to indicate mandatory. You need to drag and drop the following:

1. A Textfield for the Equipment Id. Remember to set the Unique property as this is the key field of the Inventory master data.
2. A Number for Inventory.

Click on Save and enter the title as Equipment Inventory and a suitable description. Finally save it.

Solution 3 - Personnel Master Data

Similar to the Inventory master data above, click on Create and choose the Master Data option.

For all fields adjust the Label and API property key to the desired values. Under validation set the Required field to indicate mandatory. You need to drag and drop the following:

1. A Textfield for the Personnel Number. Remember to set the Unique property as this is the key field of the Inventory master data.
2. Another Textfield for Name.
3. Add a Phone Number field for Phone. Adjust the phone number mask based on what you require, the default is US number.
4. Add a Textfield for Designation. You can also use a Select field and enter values to select.
5. Add a Textfield for Organization. You can also use a Select field and enter values to select.

Click on Save and enter the title as Personnel and a suitable description. Finally save it.

Solution 4 - Dependent Master Data for Equipment and Functional Location

Equipment Master Data changes

1. Click on the Equipment master data form and open the designer view.
2. Drag and drop a Textfield and change the label to Location. Click on the button to set the API Key also to location. To avoid data issues we will not mark this as a required field as we already have equipment entered without a location.
3. Save and Publish it.
4. Now click on the Data icon in the Equipments row. In the data view, add a few more Equipment and Location info. You can also edit the existing Equipment and update their location.

Inspection Form changes

1. We need to add some scripting to the Location component to achieve the location update.
2. Open the properties for Location by clicking on the :fontawesome-solid-gear: icon
3. Navigate to the Data tab and scroll down to the Calculated Value section and expand it.
4. This section can be used whenever a particular component needs to have a value that is not directly available but needs to be calculated. You also have access to all the properties of the component and in addition to all the data that the user has entered so far.
5. Here is what we are going to do:
   1. Any Select component that is associated with a Master Data will always have a JSON attribute called masterdaata.
   2. We first need to find the equipment component. Then we need to loop through the masterdata to identify the entry that has been selected
   3. Using the selected master data we will retrieve the location and update the form data’s location attribute to that value
   4. Finally we need to set a variable called value to the location desired.
   5. This nifty trick will be achieved with the below JavaScript code

       // Set to empty in case location is not set or not found
       value = "";
   
       // Find the equipment component so the underlying masterdata can be used
       utils.findComponent(form.components, "equipment", null, (comp) => {
   
           // Search through component.masterdata to find matching location
           md = comp.hasOwnProperty('masterdata') ? comp.masterdata : [];
   
           for (i = 0; i < md.length; i++) {
               if (md[i].equipmentId === data.equipment) {
               value = md[i].hasOwnProperty('location') ? md[i].location : "";
               break;
               }
           }
       });

   6. Copy / paste the above code into the Calculated Value JavaScript box and Save.
   7. Save the form and test it in the Preview or in the Turbo Forms App. Remember to publish the form before testing in the app.