Work with objects

Uiflow enables you to create and populate objects which store JSON data, extract specific fields, and forward them to other components in your app.
This guide describes how to work with these objects in Uiflow:
​Create a JSON object in Uiflow​
​Test your JSON object in Uiflow​
​Common ways to work with your JSON object​
​Work with API responses in Uiflow​
Note: This guide assumes you're familiar with JSON.
Create a JSON object in Uiflow
Uiflow's Create Object component enables you to format and store data as a JSON object. The JSON object's fields can be populated by either hard-coding values directly within the component, or by inputting component values via interface node connections.
Note: Before continuing, ensure you've dragged a Home component from your application's hierarchy onto the Design view.
To add the Create Object component to your app in Uiflow:
1.Click Logic to display the Logic panel.
2.Locate the Create Object component in the Libraries panel.
3.Drag-and-drop the Create Object component into your application.
4.Define the object's fields by adding nodes in the States tab of the quick selection menu, naming them, and setting their types.
5.Hard-code values for the fields defined in the previous step on the Actions tab of the quick selection menu.
Test your JSON object in Uiflow
After creating and defining a JSON object using the Create Object component, it's best to test it by verifying that it's generating the correct output.
The steps below show how to connect a Create Object component to a Console component to view the output in Uiflow's Log Details panel:
1.Add the Console component to your application.
2.Connect the Create Object component's Object node to the Console component's val node.
3.Connect the onPageLoad application node to the Console component's log node.
4.Click View Logs to open Uiflow's Log Details panel.
Could not load image
5.Preview your app (which opens it in a new browser tab) and then return to the Log Details panel to see if your component logs its output correctly.
Common ways to work with your JSON object
The following are common operations to perform with JSON objects:
​Configure an object to store values dynamically​
​Retrieve a nested value in an object​
​Retrieve multiple values from an object​
Configure an object to store values dynamically
The steps above described how to create and populate JSON objects at design time (i.e. hard-coding values within the Design panel).
UIflow also enables you to populate objects dynamically at runtime by incorporating the Object component. Once populated, the component can propagate its value to other components.
The example below shows how an Object component can be used to store a value entered from a text field and propagate it as part of a filter for filtering rows in a Data Table component.
This example has the following components:
Connection: Configured to use an online API called Petstore. This retrieves a list of pets by invoking the API's /store/inventory endpoint. This is connected directly to a Data Table component to display the rows returned from the API.
Text: Displays the app's title (Dog Table) at the top of the app's UI.
Text Input: Enables the user to enter a filter value. This value is then propagated to an Object component (described next) when the onChange event occurs (i.e. when the user changes the value).
Object: Stores the value entered by the user. This component is configured as follows:
The value State defines an object named id via the following JSON:
The SetValueAtPath action is set to id.filter. This propagates the value entered by the user to the filter field of the id object:
When the application runs, the Object outputs the final JSON to the Data Table. In this example, the user entered 80 which was propagated to the filter field:
The logic to filter the table based on the user's text entry works as follows:
The Text Input field's onChange event invokes the object's setValueAtPath action which in turn, invokes the Text Input component's getValue action to pull the value.
The Object component's onChange event is connected to the Data Table component's setFilters action which uses the JSON from the Object component's value output to filter the table rows displayed:
Retrieve a nested value in an object
At times, you may need to collect the value of a nested field or object and move it to another component. The Get Value at Path component provides access to a value from within a nested object using the dot operator.
In this example, the Get Value at Path component uses the dot operator to retrieve the first_name value from the object via the name.first_name path.
Note: Create Object components must be chained together in order to create objects with nested fields.
Retrieve multiple values from an object
The Get Values component enables you to pick multiple values:
1.Connect the Create Object component's object node to the Get Values component's object node in the Get Values component.
2.Open the state tab of the Get Values component to list the values you want to extract.
The Console component's data preview shows the values retrieved from the Get Values component.
Work with API responses in Uiflow
Responses from APIs (e.g. REST requests) often contain more information than required by your application and are therefore not always immediately useful to your application.
For example, an application which uses The Dog API to get information about dogs, may only require the name of each dog breed on a specific screen.
However, when you use this API to request information, it returns more information than required:
[
  {
    "weight": {
      "imperial": "6 - 13",
      "metric": "3 - 6"
    },
    "height": {
      "imperial": "9 - 11.5",
      "metric": "23 - 29"
    },
    "id": 1,
    "name": "Affenpinscher",
    "bred_for": "Small rodent hunting, lapdog",
    "breed_group": "Toy",
    "life_span": "10 - 12 years",
    "temperament": "Stubborn, Curious, Playful, Adventurous, Active, Fun-loving",
    "origin": "Germany, France",
    "reference_image_id": "BJa4kxc4X",
    "image": {
      "id": "BJa4kxc4X",
      "width": 1600,
      "height": 1199,
      "url": "https://cdn2.thedogapi.com/images/BJa4kxc4X.jpg"
    }
  },
  {
    "weight": {
      "imperial": "50 - 60",
      "metric": "23 - 27"
    },
    "height": {
      "imperial": "25 - 27",
      "metric": "64 - 69"
    },
    "id": 2,
    "name": "Afghan Hound",
    "country_code": "AG",
    "bred_for": "Coursing and hunting",
    "breed_group": "Hound",
    "life_span": "10 - 13 years",
    "temperament": "Aloof, Clownish, Dignified, Independent, Happy",
    "origin": "Afghanistan, Iran, Pakistan",
    "reference_image_id": "hMyT4CDXR",
    "image": {
      "id": "hMyT4CDXR",
      "width": 606,
      "height": 380,
      "url": "https://cdn2.thedogapi.com/images/hMyT4CDXR.jpg"
    }
  },
  ...
]
In order to extract only the data needed by your application, you need to:
​Understand the data​
​Extract the required field​
Understand the data
Before you can work with the data, it's important to analyze its content. The following are notable observations for the example response above:
The response is an array of objects.
Some fields have key-value pairs with sub objects as values.
You only need the name for each breed.
The following steps are required to build an app that lists dog breeds by origin using the above API response:
1.Iterate through each object in the response.
2.Retrieve the properties you want from each object.
3.Render the information in your UI.
The next section outlines the flow to shape the API response.
Extract the required field
The example below shows how to extract dog breed names from rich dog breed information returned by the freely-accessible Dog API:
1.When the app's Home page loads, the control of flow invokes a REST Connection component (named Get Dogs in this example) that has been configured with a GET request to https://api.thedogapi.com/v1/breeds. The response from the Dogs API contains an array of objects with information about various dog breeds.
2.A For Each component iterates through each object and passes its data to the next components.
3.The Get Value component's output (name) node selects the name property and passes it to a Text component. That component has been embedded in a Constructor component where its setLabel action and label property have been exposed:
4.A Sequence component makes two calls:
call 1 instantiates a Text component in the UI by invoking the Constructor component's construct action.
call 2 invokes the Text component's setLabel function which retrieves the value from the Get Values component and passes it to the Text component.
The application displays a series of Text components with the breed names:
Last modified 13d ago