Updated on 9/16/2019
Tutorial: Integrate your App with APIs
Create a Flow in UI Services
Direct link to topic in this publication:

The UI services Designer is used to create client-side services. In this app, you will be creating a UI service to call the Modeler flow that you created in the previous step. The Modeler will get the data from the weather API provider and sends it back to the UI Service flow.

Perform the following steps:

  1. Navigate back to Neutrinos Studio. Click Services in the menu options and select UI Services.
    The Modelr option
  2. The UI Services designer opens up.  Click the  icon to add a UI service. Enter weatherservice in the popup window and click Add

    Create a UI service

  3. The new service gets added. Drag and drop a Start node to the flow. The Start node is the entry point for a flow. When you create a Start node and call the flow, a system-defined object called bh is created. When you create input and local properties in the Start node, they are added to the bh object. See Start Node to learn more.

    Click the node to open its Attributes window. Add the following details:

    Property Value Action
    Name get weather modelr
    Input Properties -> Key cityName
    Local Properties -> Key currentWeather Toggle Output to true
    Local properties -> Key modelrApiUrl

    The currentWeather property is used to capture the result returned by the Modeler flow. It is set as an output property and can be accessed outside the flow. 

    The HTTP node configuration
  4. Drag and drop a Switch node to the flow. This node allows a flow to take different paths based on the conditions that you define. Click the node to open its Attributes window. Add the following details:
    Property Value
    Name cityNameNullCheck
    Property -> bh.input cityName

    Set the following conditions:
    Condition Value
    is of type undefined
    is null
    is empty
    is of type string

    Select stopping after first match from the drop-down list at the end of the attributes window.
    The switch node configuration
  5. Drag and drop a Log node to the flow. This node is used to log the bh object to reveal message flow issues and application problems (if any). In the Log properties window, add the following details:
    Property Value
    Name log bh
    Log
    bh.

    The log node configuration
  6. Drag and drop a Script node to the flow to construct the API URL. This is the API endpoint that we defined using Neutrinos Modeler. In the Script properties window, add the following details:
    Property Value
    Name construct api url
    Code Editor
    bh.local.modelrApiUrl = `http://localhost:24483/api/weather?cityName=${bh.input.cityName}`;

    The Script node
  7. Drag and drop a HTTP Request node to the flow. This node makes HTTP request to Neutrinos Modeler using the URL constructed in the previous node. In the HTTP Request properties window, add the following details:
    Property Value
    Name call modelr flow
    Method
    Get
    URLSelect the bh.local property, and enter modelrApiUrl as the value. 
    Return TypeJSON
    Bodybh.input.
    Result Mappingbh.local.currentWeather

    The HTTP node configuration
  8. Connect the nodes to create the following service flow:

  The HTTP node configuration