Work with objects
Uiflow enables you to create and populate objects that 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:
Note: This guide assumes you're familiar with JSON.
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.
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.
- 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.
The following are common operations to perform with JSON objects:
The steps above described how to create and populate JSON objects at design time (i.e. hard-coding values within the Design view).
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:
- Request: Configured to use an online API called dummyJSON. This retrieves a list of products by invoking the API's
/productsendpoint. - Data Table: Formats data from the dummyJSON API response into a table.
- Text Input: Enables the user to enter a filter value. This value is then propagated to an Object component (described next) when the
onChangeevent occurs (i.e. when the user changes the Text Input's value). - Object: Stores the value entered by the user. This component is configured as follows:The Object's value defines an object named title:
The SetValueAtPath action is set to title.filter. This propagates the value entered by the user to the filter field of the title object:
When the application runs, the Object outputs the final JSON to the Data Table. In this example, the user enterediPhonewhich 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 component'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 displayed table rows:
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.
The Get Values component enables you to extract multiple values from a single object:
- 1.Connect the Create Object component's object node to the Get Values component's object node.
- 2.Select the Get Values component's State menu to add the values you want to extract from the object.
In this example, the Console component's data preview shows the values retrieved from the Get Values component.
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 dummyJSON to get information on a range of products may only require the name of each product on a specific screen.
However, when you use this API to request information, it returns more information than required:
[
{
"id": 1,
"title": "iPhone 9",
"description": "An apple mobile which is nothing like apple",
"price": 549,
"discountPercentage": 12.96,
"rating": 4.69,
"stock": 94,
"brand": "Apple",
"category": "smartphones",
"thumbnail": "https://i.dummyjson.com/data/products/1/thumbnail.jpg",
"images": [
"https://i.dummyjson.com/data/products/1/1.jpg",
"https://i.dummyjson.com/data/products/1/2.jpg",
"https://i.dummyjson.com/data/products/1/3.jpg",
"https://i.dummyjson.com/data/products/1/4.jpg",
"https://i.dummyjson.com/data/products/1/thumbnail.jpg"
]
},
{
"id": 2,
"title": "iPhone X",
"description": "SIM-Free, Model A19211 6.5-inch Super Retina HD display with OLED technology A12 Bionic chip with ...",
"price": 899,
"discountPercentage": 17.94,
"rating": 4.44,
"stock": 34,
"brand": "Apple",
"category": "smartphones",
"thumbnail": "https://i.dummyjson.com/data/products/2/thumbnail.jpg",
"images": [
"https://i.dummyjson.com/data/products/2/1.jpg",
"https://i.dummyjson.com/data/products/2/2.jpg",
"https://i.dummyjson.com/data/products/2/3.jpg",
"https://i.dummyjson.com/data/products/2/thumbnail.jpg"
]
},
{
"id": 3,
"title": "Samsung Universe 9",
"description": "Samsung's new variant which goes beyond Galaxy to the Universe",
"price": 1249,
"discountPercentage": 15.46,
"rating": 4.09,
"stock": 36,
"brand": "Samsung",
"category": "smartphones",
"thumbnail": "https://i.dummyjson.com/data/products/3/thumbnail.jpg",
"images": [
"https://i.dummyjson.com/data/products/3/1.jpg"
]
},
...
]
In order to extract only the data needed by your application, you need to:
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
titlefor each product.
The following steps are required to build an app that lists products by brand 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.
The example below shows how to extract product names from rich product information returned by the freely-accessible dummyJSON:
- 1.When the app's Home page loads, the control of flow invokes a REST API component (named request in this example) that has been configured with a
GETrequest tohttps://dummyjson.com/products. The response from the dummyJSON API contains an array of objects with information about various products. - 2.A For Each component iterates through each object and passes its data to the next components.
- 3.The Get Value component's output (title) node selects the title property and passes it to a Text component. The Text component is embedded in a Constructor component, where its setLabel action and label property are 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 product names:
