NorthWind Customer Flow Development

We will now develop a Webhook Flow to reload Customer data from the Northwind OData Service. This data will then be the content of a Select (Dropdown) component so that the user can select the required customer. Note that the data will be fetched online when the form is loaded and hence is not suitable for an offline solution.

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.

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 Create button and choose the Webhook Flow option
   • Title - Enter Get Custoemrs
   • Description - Enter description as Gets Customers from Northwind or similar
   • Set the desired Expiry Date
   • Click on Save to create the flow
3. You will now be navigated to the Flow Builder

Understanding the steps

We need to configure and call the Northwind OData service to retrieve Customer records. Subsequently we need to return it as an array of JSON objects so that it can be used as the data for a Select (dropdown) component in the form.

Now let us draw a flow chart of the different steps we need to perform to retrieve the Customers:

flowchart TD
    A([Start]) -->|Webhook Flow| B[Call OData Get Customers]
    B --> C{Error}
    C --> |Yes| G([ReturnError])
    C --> |No| D[Extract Customers]
    D --> E[Return Customers]
    E --> F([Return Success])
	

Developing the Flow

1. In the Flow Builder, the Add Node dialog should already be open. If not, click on the Webhook Flow start node and then click on the :fontawesome-solid-circle-plus: icon that is displayed below the node
2. Search for the OData node by typing in odata and clicking on it
3. The OData node is now opened and you can configure it.
   1. Change the title to Get Customers and remember to connect the Webhook Flow start node Success connector to this node (else the expression builder will not display all the possible fields and nodes)
   2. Since we want to work with an OData system we need to first create it. Click on the :fontawesome-solid-plus: icon next to the SAP Server dropdown. Note that we will be using the Northwind OData system described (here)[https://www.odata.org/odata-services/] and more specifically the (Northwind OData v3 service)[https://services.odata.org/V3/Northwind/Northwind.svc]
   3. The Add System dialog is displayed. Enter the following data:
      • Description: Northwind (or anything else you desire)
      • Identifier: This is a unique identifier for the system, enter odata-nw
      • URL: Set it to https://services.odata.org/
      • Service Path: Set it to V3/Northwind/Northwind.svc/ As you probably noticed we just split the service URL from above into the URL and path
      • Type: Set to Others
      • Authentication: Set to None
      • Save the system
4. Now choose the newly added odata-nw system in the Server dropdown
5. Set the OData Operation to Select as we are going to select a list of customers
6. Click on the OData Entity dropdown and wait for it to populate. Now select Custoemrs
7. Leave the Expand Mapping as Default. Since we are only looking for Customers we will not be choosing any additional entities. If needed you can also click on the Expand dropdown and select any additional entities you want to expand for the Customer records.
8. Click on the Fields dropdown and choose CustomerID and CompanyName fields.
9. Click on Save.
10. Select the Get Customers node and click on + and search fro response and select the Response node.
11. The Response node is now opened and you can configure it.
    1. Change the title to Return List or similar and remember to connect the Get Customers 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 Get Customers entry
    6. Now Click on the :fontawesome-solid-floppy-disk: icon and save the node
12. 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. An error that there is no Form (test) data is displayed. You can enter Form (test) data now by clicking on the Form Data button. Enter the values for the different fields based on your system setup making sure that they are correct.
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 in entering test data, configuring the system or copy/pasting the expression or similar. Check each step carefully with the documentation above.
5. In the result after run you should see a list of Customers returned by the Northwind OData service.

Note that the Turbo Apps app will run the flow on the schedule and reload master data every Monday.

Add a Customer dropdown and testing the form

1. We will first need the webhook URL to the flow we just developed. From the Flows list click on the Update icon in the Get Customers row. Copy the webhook URL.
2. From the forms list click on the Computer Inspection form to open the form designer
3. From Basic, drag and drop Select component below the Date field
   1. Change Label to Customer and click on the :fontawesome-solid-key: icon to update the API property to customer
   2. Click on Data and under Data Source Type choose URL
   3. Paste the webhook URL as the value for Data Source URL
   4. Set the ID Path to CustomerID as we want the customer ID returned by Northwind to be saved as part of the data
   5. Set the Value Property to CompanyName as we want the Company name returned by Northwind to be displayed in the dropdown
   6. Set the Item Template to item.CompanyName as that is the required display field
   7. Click on Validation and select the Required field
   8. Click on API and confirm API name is customer
   9. Click on Save
4. Now Save the form and click on Preview
5. Click on the Customer dropdown. If the list is empty wait a second or two as the call to Northwind (demo service) may take a while. Once the call is successfully completed you will now see a list of customers displayed.
6. You can now Publish the form so we can test in the Turbo Forms App

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. Click on the Customer dropdown to display the list of Customers.

Follow Along Video

Watch Video (opens new window)

Topics Covered

Note

The following concepts have been covered:

1. Developing a Webhook Flow to retrieve Customers from the Northwind OData service
2. Connecting a Select/Dropdown component to the webhook to retrieve data online and display in the dropdown
3. Running the flow and testing it