Skip to content
TurboApps TurboApps Guide

Smart Data Component Form Design

This will be the last of our form design tutorials. We are going to add an online Inventory check for the equipment chosen. We will modify the Computer Inspection form and add a Smart Data Component to it. We will add an online check to the form so that when a button is clicked, we will fetch the inventory for the selected equipment and display it.

Form Design

Section titled “Form Design”
  1. Login to Turbo Apps and click on Forms in the sidebar
  2. From the Forms list, click on the Inspection Form to display the form designer. Alternatively you can copy the Inspection Form and also make the changes below.
  3. From Turbo Premium, drag and drop Smart Data to the form. Note that the position in the form does not matter as it will never be displayed to user.
    1. Change the Label to Inventory Checker and click on the :fontawesome-solid-key: icon to update the API key
    2. Click on teh API tab and confirm the API Property is set to inspectionChecker
    3. Now we need to create a new workflow to handle this Inventory check requirement. Click on the + button next to the workflow dropdown.
    4. Choose the Smart Data Flow option
    5. Set the Title to Query Inventory and Description as Queries the equipment inventory
    6. Click on Save to create the flow
    7. From the dropdown select the Query Inventory workflow
    8. Click on Save
  4. From Layout, drag and drop Columns below the Equipment component
    1. In Column Properties, confirm Width is 8 for each of the columns
  5. From Basic, drag and drop Textfield component into the first column below the Equipment component
    1. Change Label to Inventory and click the :fontawesome-solid-key: icon to set the API key
    2. Scroll down and select the Disabled field as we do not want to allow the user to enter any data here
    3. Click on API and confirm API name is inventory
    4. Click on Save
  6. From Basic, drag and drop Button component into the second column below the Equipment component (next to the Inventory component)
    1. Change Label to Check Inventory and click the :fontawesome-solid-key: icon to set the API key
    2. Change Action to Smart Data Component
    3. Under the Smart Data Component select the Inventory Checker that we just created above. We are instructing the form to invoke the Inventory CHecker SDC when the button is clicked.
    4. You can also select the Block Button option if you want the button to span the width of the column
    5. Click on Save

That’s it. We are now done with the Smart Data Form design.

Publish it

Section titled “Publish it”

Click on Publish and enter a comment to identify the change and Publish it. We will connect this Smart Data to the Smart Data Flow to check Inventory when we develop the flow later.

Topics Covered

Section titled “Topics Covered”
  1. Updating a form with a Smart Data Component
  2. Creating a Flow and attaching it to the Smart Data Component
  3. Adding a button to invoke the Smart Data Component on click