Creating a data component

To showcase the data component creation process, in this article we'll be creating a simple shopping list data component that will be capable of listing and adding grocery items.

Creating the UI

The first step to create a data component is to configure a 'Container' view component with the desired UI elements. These may include for example list items or text to display data, and input fields and buttons to create or update data based on user input.

See the image below for the canvas look and the layout tree of the Shopping list:

Every view component is placed in a single container, which is going to be transformed into a data component. In the layout tree, you may notice another container titled 'List'. The purpose of this container is to store repeated content, more specifically the shopping list that is going to be populated via the input fields.

A new data component can be created by first pressing 'Create new component' in the main Container's properties sidebar. From here, switch to the 'Properties' view via the toggle switch on the top right and navigate to the 'Data' tab. After converting the component to a data component via the dedicated button, you will be presented with two configurable properties: 'Data adapters' and 'Private data variables'.

Creating a data adapter

When creating a new data adapter, you are required to name it via a 'Data resource key' that is going to define the adapter in the component. Set a title and add a description for further clarity, especially if you intend to publish the component for external use.

To create a fixed data adapter, you need to set 'Schema type' to "Fixed". You can then add a certain number of properties with certain types that you expect the connected data resource to have.

For our shopping list example, let's create a data adapter called Groceries with the properties id, name and quantity.

Lastly, you need to configure the operations required from the data resource that will be connected to your data adapter, which will depend on your needs in the component. If you aim at retrieving and creating data like in the example, LIST and CREATE are your choices.

The arbitrary schema is more flexible and can be used in scenarios where the expected number of fields is not known beforehand, for example in tables. You can still set some limits for the expected field structure. These include allowed field types and a minimum and maximum number of properties. Under the 'Any of the following types' field, you can set allowed types with the 'Property value type'. You can allow multiple types by pressing 'Allow another type' at the bottom of the widget. The 'Operations' configuration is done similarly to the fixed adapter type.

Creating private data variables

To create a private data variable, enter a 'Data variable key' as a unique identifier. In the 'Data adapter' field, select your previously created data adapter and set the type appropriate to your requirements.

In the Shopping list example, we'll need two private data variables: one List of objects for all groceries and one Single object for adding the items.

You can create as many data adapters and private data variables as you need to match your needs, especially with more sophisticated data components that interact with multiple data resources.

Data variable bindings in the UI

Upon creating the data adapter(s) and variable(s), we need to the data component's UI needs to be bound to them. In other words, we need to attach the view component parts to the data, so that it will be displayed upon running the application.

The created private data variables are located under 'Component properties' -> 'Composite component data variable' in the binding editor. Since in the example we have created a list of entered groceries, we can repeat the list Container view component with the "List of groceries" variable. That way, any entry in the list will be displayed in the app.

After repeating the Container, bind the components inside of it with the repeated items by using the 'Data item in repeat' binding type:

In order to be able to add new entries to the list, we have to bind the input field's 'Value' to a specific property of the 'Single object' data variable. That way, we can use that variable to add new data.

Component logic

Now we have the view components and variable bindings in place, but the logic flows for interacting with the data resource and populating the variables still need to be implemented.

In our example, the data component will execute logic flows in two different scenarios:

1. Initializing the groceries list when the component is mounted
2. Creating a record and updating the list whenever a grocery item is added.

The logic for initializing the component with data will be attached to the 'Component mounted' event, so it will be executed as soon as the component becomes visible. The create and update logic is attached to a Button component on the view canvas.

Overall, the data adapter acts as a medium between a configured Data source and the private data variables that are responsible for storing the entered data. Refer to the diagram below for a clearer representation:

Initializing the component

While in the Component template editor, begin by configuring an initializing event on the logic canvas of the data component. You can do so by editing a default event or dragging the 'Receive event' flow function onto the canvas and setting it to trigger at "Component mounted".

Next, attach a 'Get record collection' flow function located in the DATA section to the event and set its 'Resource name' to the Data adapter created earlier. To populate the list that the grocery items get repeated from, use a 'Set private data variable' function from the VARIABLES section.

Set the chosen 'Private data variable' to the list variable created previously, and set its 'Assigned value' to 'Output value of another node' -> 'Get record collection' -> 'Get record collection Collection of records'.

This flow allows us to fetch the data via the adapter to perform operations on the data and upon retrieving, set it to a private data variable for displaying further in the component.

Finally, we need to attach one more event to the beginning of the flow to be able to account for live changes in the data. Drag a 'Receive event' flow function on the canvas and set its 'Event source' to Fired from "Trigger event". We are now able to execute the logic from elsewhere in the component by using a 'Trigger event' flow.

The component logic canvas should now look the following way:

Updating the data

The second step is to configure logic for the view component responsible for updating the data when a new grocery item is added. Following the example from earlier, a button would be an appropriate one for updating the shopping list with the entered data.

Without exiting the component template editor, attach a 'Create record' flow to the event. This flow function is responsible for pushing the data from private variables to the adapter. Thus, attach the data adapter as its 'Resource name' and bind your Single-object private data variable as its 'Record'. As the positive output, add a 'Set private data variable' flow function and assign its 'Private data variable' again as the Single-object variable (NOTE: Here you are required to set it using its 'Data variable key' configured earlier). Leave the 'Assigned value' to be an empty "Custom object". Lastly, drag a 'Trigger event' flow function onto the canvas and attach it to the end of the logic chain. The 'Triggered event' should be set to Fired from "Trigger event", which will allow us to execute the logic of the initializing function and update the data adapter.

The purpose of this logic chain is to connect the private data variables responsible for storing temporary input from the Input field and the data adapter. The entered data is passed to the data source and stored there using the adapter.

The component's logic is now configured and you can exit the Component template editor.

Final words

At last, after configuring everything, you can preview your app and interact with the data component! The shopping list component that was presented as an example is now capable of adding new items by entering the name and quantity in the right field and pressing the button.

As configured, the name will appear on the far left and the quantity on the far right. Upon closing and re-opening the app on the same device, the data will stay the same, as it is stored in the on-device storage resource that has been connected to the component.

We hope that after this tutorial you feel confident in building your own data components – feel free to use the example here as a basis for any customizations to match your desired design!