Smart Data Flow Development

We will start by developing a Smart Data Flow to fetch Inventory information from the Inventory Master Data that you created as part of the assignment. For this tutorial we will be using the Computer Inspection form that we enhanced earlier

Prerequisite

Equipment Inventory Master Data

Recall that the Master Data Form design had a couple of assignments. We will be using the Equipment Inventory Master data from that assignment.

If you have not yet completed that assignment, do so now so that you can continue with this tutorial.

Getting intermediate results

Whenever you need to get intermediate results from the integration or other steps added, connect the last node to Success and Run the Flow. You can now copy the results for further steps. You can also Save the Run if you want to permanently save the flow results.

Lets say for e.g you need to extract results from an HTTP call. Add the HTTP node and configure it. Connect the HTTP node to Success and Run the flow. The results are now displayed and you can copy the results of the HTTP call. Now add the JSON Parser node and use the copied results as an example input to extract data from.

Smart Data Component Form Design

You should have also completed the Smart Data Component Form Design tutorial.

If you have not yet completed that tutorial, do so now so that you can continue with this tutorial.

Flow Development

1. In the Forms list, click on the Flows icon on the Computer Inspection row
2. A list of Flows will be displayed. Now click on the Query Inventory Smart Data Flow that we created earlier
3. You will now be navigated to the Flow Builder

Understanding the steps

Before we develop the flow, let us draw a flow chart of the different steps we need to perform to check for inventory.

flowchart TD
    A([Start]) -->|From SDC Action| B[Extract Equipment ID]
    B --> C{Error}
    C --> |No| D[(Search Master Data for ID)]
    C --> |Yes| E([ReturnError])
    D --> F{Error}
    F --> |No| G([Format Return Value])
    G --> |No| H([Return Inventory Count])
    F --> |Yes| E

Note

1. When the SDC action is triggered we receive the form data in the flow
2. From the form data, let us extract the Equipment ID. For this we will be using the JSON Parser node
3. Search for the inventory based on Equipment ID in the Equipment Inventory Master Data
4. Format the inventory as a JSON with the API Property Name so form can be automatically updated. For this we will be using the JSON Parser node
5. Return success or error

Developing the Flow

1. In the Flow Builder, the Add Node dialog should already be open. If not, click on the Smart Data Flow start node and then click on the :fontawesome-solid-circle-plus: icon that is displayed below the node
2. Search for the JSON Parser node by typing in json and clicking on it
3. The JSON Parser node is now opened and you can configure it.
   1. Change the title to Extract ID and remember to connect the Smart Data Flow start node Success connector to this node
   2. Since we want to work with the Form Data, click on the Form Fields section
   3. For Map Field Name select Form Data
   4. Under Expression click on the :fontawesome-solid-wrench: icon to open the Expression Builder
   5. To extract the Equipment ID we need to know what format the data is going to be submitted. In the Expression Builder windows, click on the :fontawesome-solid-rectangle-list: icon to open the data format screen.
   6. Now the previously saved Form (test) data format is displayed in the JSON editor. If the Form (test) data is not yet configured please do so first. Click on the editor, select the entire JSON and copy it.

      {
        "inspectDateTime": "2024-03-07T03:45:09.000Z",
        "equipment": "cpu",
        "inventory": "",
        "condition": "warning",
        "equipmentImage": [],
        "inspectedBy": 1,
        "comment":"Warning comment",
        "signature": "data:image/png;base64,iVBORw0K ......... AAEl==",
        "branding": {
          "data": {},
          "metadata": {}
        }
      }

   7. Paste the data into the JSON window on the left
   8. The expression builder we use for JSON parsing is a tool called Jsonata
   9. We now need to extract only the equipment field to search for and the expression for that is:

      $.equipment

   10. Paste the expression from the step above into the Mapping Expression window on the right. The extracted data is now displayed at the bottom. Confirm that what is displayed is correct.
   11. Now click on Save and close the builder,
   12. Now click on the :fontawesome-solid-floppy-disk: icon and save the node
4. Now we need to search for Inventory Master Data. Select the Extract ID node and then click on the :fontawesome-solid-circle-plus: icon. Search for the Read Rows node by typing in master data and clicking on it
5. The Read Rows node is now opened and you can configure it.
   1. Change the title to Search Inventory and remember to connect the Extract ID node Success connector to this node
   2. First we need to select the Master Data we need to search. Click on the Master Data Entity dropdown and select Equipment Inventory
   3. We want to search for the equipment ID we extracted earlier. Under Master Data Filter click on the :fontawesome-solid-wrench: icon to open the Query Builder
   4. A condition builder is now displayed. Click on the :fontawesome-solid-plus: icon to add a condition
   5. Choose equipmentId as the Field, Equals as the Condition.
   6. In the custom text field, click on the :fontawesome-solid-wrench: icon to open the Expression Builder and select the Result under Extract ID and click on Save
   7. Now click on the :fontawesome-solid-floppy-disk: icon and save the node Connect the save-form-data node to Success
6. Now we need to send a properly formatted response to the SDC. Select the Search Inventory node and then click on the :fontawesome-solid-circle-plus: icon. Search for the JSON Parser node by typing in json and clicking on it
7. The JSON Parser node is now opened and you can configure it.
   1. Change the title to Prepare Count Data and remember to connect the Search Inventory node Success connector to this node
   2. Since we want to work with the retrieved Inventory, click on the Previous Steps section
   3. For Map Field Name select Result under Search Inventory
   4. Under Expression click on the :fontawesome-solid-wrench: icon to open the Expression Builder
   5. To extract the inventory we need to know what format the data is going to be submitted. The search inventory returns data in this format:

      {
        "data": [
          {
            "equipmentId": "computer",
            "submit": true,
            "inventory": 10
          }
        ]
      }

   6. Paste the data into the JSON window on the left
   7. The expression builder we use for JSON parsing is a tool called Jsonata
   8. We now need to extract the inventory and format the message using this expression. The SDC will update the form with the data that is returned by looking for form fields inside the data attribute in the JSON, hence the format below.

      $.{"data":{"inventory" : $exists(data.inventory) ? $string(data.inventory) : ""}}

   9. Paste the expression from the step above into the Mapping Expression window on the right. The extracted data is now displayed at the bottom. Confirm that what is displayed is correct.
   10. Now click on Save and close the builder,
   11. Now click on the :fontawesome-solid-floppy-disk: icon and save the node
8. Last step, we need to return data exactly how the SDC expects. The format of the data format is already configured in the Prepare Count Data step above. Now we will configure the response. For this click on the Prepare Count Data and click on the :fontawesome-solid-circle-plus: icon that is displayed below the node
9. Search for the Response node by typing in response and clicking on it
10. The Response node is now opened and you can configure it.
    1. Change the title to Send To Form and remember to connect the Prepare Count Data node Success connector above to this node (else the expression builder will not display all the possible fields and nodes)
    2. Select the Success option
    3. Set the HTTP Code to 200 to signify HTTP Success
    4. For Body click on the :fontawesome-solid-wrench: icon to open the Expression Builder
    5. Select Result below the Prepare Count Data entry
    6. Now Click on the :fontawesome-solid-floppy-disk: icon and save the node
11. Now click on Publish button to save and compile the flow. If the compilation is successful it will also be published and we can run it to test.

Testing the Flow

1. Now that we have published the flow we are ready to test it. The Flow Builder has an integrated Run and Debug tool to help us troubleshoot the flow in case of errors.
2. Now click on the Run Flow button. The Run dialog is now displayed. You can now enter Form (test) data now by clicking on the Form Data button. Select any equipment for which you will fetch the inventory.
3. Run the flow by clicking on the Run button. The flow should run successfully.
4. If there are errors it could be due to some mistakes while configuring the system or copy/pasting the expression or similar. Check each step carefully with the documentation above.
5. You should see the result with the required inventory count.
6. Go ahead and select a different equipment in the Form (test) data and Run the flow again. You will see a new inventory count now.

Testing the Flow in the Turbo Apps Builder

1. From the Forms list, click on the Inspection Form row to display the Form Designer
2. Click on Preview
3. Choose any Equipment and click on the Check Inventory button
4. The Inventory displayed should be updated now on each click

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. Choose any equipment and check its Inventory by tapping on the Check Inventory button

Follow Along Video

Watch Video (opens new window)

Topics Covered

Note

The following concepts have been covered:

1. Developing a Smart Data Flow to update inventory online
2. Extracting the equipment ID and searching in Master Data
3. Creating Form (test) data
4. Running the flow and testing it