How to… create & call Dataflows

Dataflows provide a selection of steps which can be used to transform, search and manipulate data within an app. These steps are placed in a flow and are carried out one after another in the order they are listed.

In a similar manner to Actionflows, all Dataflows are managed via the ‘App Content‘ screen. This allows the flow to be edited in a central location and called from multiple locations in the same app.

Dataflows are very versatile and can be used in a wide variety of scenarios within an app. A few examples include:

  • Mapping data received from an API call to the format required by a chart.
  • Converting JSON data from one format into another using a template.
  • Filtering a large amount of data (e.g. list of cars) such that it only displays items which meet a criteria. (e.g. red in colour, price less than £2000)
  • Calculating the min, max, average, sum or average of a list of values. (e.g. product prices)
  • Counting the number of items which meet a set criteria.

Topics covered in this article

1. Creating Dataflows
2. Configuring Dataflows
3. Call Dataflows

1. Creating Dataflows

As Dataflows can be used across multiple pages, they are treated as a separate type of app content (along with PagesActionflows and Components). They can be accessed by selecting the ‘Dataflows’ tab near the top of the App Content screen.

While viewing the list of Dataflows, you can either select a Dataflow’s name to enter an existing flow, or press the ‘Create Dataflow’ button to create a new one.

To assist with the management of Dataflows, the standard controls are available at the top of the App Content screen. This allows you to to carry out a range of tasks, including enabling Edit Mode (to delete, duplicate or edit a flow), launching Preview Live Preview mode or accessing the Config screens.

 

2. Configuring Dataflows

The editor displays a list of steps which will be executed when the Dataflow is called. These are listed in the order that they will be carried out, with the resulting data from one step being passed to the next in the flow.

To add a new action to the flow simply locate it within the Toolbox and drag it to the desired point in the Dataflow. Pressing on the step will expand its details, allowing you to configure any settings. In some cases, a step will provide multiple methods which can be used to configure it (e.g. Expression or JavaScript). Where this is implemented, a message will be displayed to notify you of which collection of settings will overwrite the other.

Where the ‘Advanced’ tab is provided, the step can be configured using JavaScript. The information box at the top of the tab will provide details of the data which can be accessed within the step. Unlike Functions, it is not necessary to call $success() in order to pass data further down the flow.

To help you understand the purpose of each step, a small information symbol is included next to each item in the Toolbox and as a tab within the step. Selecting either of the symbols will reveal a short overview of what the step will do. If you require more detailed information on how the step processes the data, please refer to the RxJS documentation.

You can also add your own notes to each step using the ‘Notes’ tab. This is ideal where you wish to describe how the step has been configured either for future reference or when passing the app to other developers.

 

 

3. Call Dataflows

Once the Dataflow has been configured, it can be called within the application. This is achieved using the ‘Call Dataflow’ action which can be added to the ‘Actions’ tab of an item, an On-load style event or within an Actionflow.

The Dataflow will apply its steps to the contents of the $data object. This is used within a flow of actions to pass data from one action to another, and must be set prior to the ‘Call Dataflow’ action.

If there are no actions prior to ‘Call Dataflow’ or the data you wish to use resides elsewhere in the Data Model (e.g. within a variable), an inline function can be used to pass it into the flow:

  1. Drag a ‘Inline Function’ from the Actions Toolbox.
  2. Drop it into your flow of actions, ensuring it is above the ‘Call Dataflow’ action.
  3. Add a $success() call to the function, passing in the location of the data to use in the Dataflow. For example:

$success($store.variables.CarList)