How to test data as you build
Uiflow apps work by passing data from one component to the next during their lifecycles (e.g. a REST API component requests data from an endpoint and passes that data to a Design component for display). However, data does not populate in components during development, so you must take extra steps to ensure your data flows as intended.
To test and view data as you build your app, use the following methods:
To see data values and how they flow in your application, use one of the following preview methods:
- Studio Preview: Use the application preview to the right of the Logic Flow panel to view your data.
- Live Preview Open a live preview in a new browser window to test your application.
The following Uiflow app example demonstrates how data might flow. Here, the Home Page component's onPageLoad action invokes a REST API component's call action. The onSuccess action triggers a Text component to set its label, and passes the response through a Get Value at Path component to retrieve the
sold field's value.
Note: During testing, you may need to re-run your app as you implement changes and fixes. You can speed up the process by using your Home page’s onPageLoad action to invoke your flow, as shown in the example app above. This invokes your app flow when the home page loads, so you can re-test your app by simply reloading your preview.
When you preview the app, Uiflow displays the data in components as follows:
- Scalar data: Values for scalar data types (e.g., numbers, strings etc.) appear beside their corresponding nodes (e.g. the value node's value
10is displayed beside it).
- Object data: Object values are denoted with an expandable
{...}link. You can click the link to open the Data Explorer window and view the whole object.
Note: When you test your app, all invoked actions and wires appear in yellow. This enables you to quickly locate and review specific functionalities within your flow.
To quickly view data or identify data flow issues, use the Console component to log data to the Logs panel.
The Logs panel, contains all messages (e.g. data), warnings, and errors logged during your app's flow, in the order they occurred. During testing, you can place multiple Console components throughout your flow to identify where and why data stops flowing.
The following example demonstrates how a Console component can help identify whether your data flows as needed. Here, the REST API component detects a successful request and triggers the Console component's log action. It then passes the response value to the Console component's val node, which displays it in the Logs panel.
Since the data was successfully logged, it means the REST API component retrieves and sends data as intended.
When you preview or test a deployment, it's sometimes useful to display data directly in the app. The Alert component renders a modal pop-up as your app runs, so you can display debug messages such as data values from within the app. This enables you to:
- Verify that data flows correctly in a deployed app, from a user perspective.
- View complete objects directly in the app without having to navigate your application logic.
- Display and verify transformations (e.g. concatenated strings).
In this example, a successful REST API response sends data to an Alert component for display. The data passes through a Get Value at Path component, which extracts the
sold field value.
A modal pop-up that displays a value in your app may look similar to the following screenshot.
Note: The values displayed in Uiflow's logic flow components won't update until the modal pop-up is closed in your app.
