API binding types

Some UI elements, like form input fields, contain several properties that can be bound in the Data Binding section. In this example, we'll show how you can do this to add more dynamic data to the apps.

💡 We are using this design file for the tutorial. In this example, we're showing how to bind a placeholder for text input fields to API data, together with a POST request to send the data the user introduces in the form fields.

Binding input field properties to API data

• Value is the property related to the placeholder text a user will see in the input field before typing. It can be set statically in the design file, but it can later be bound to API data, so the placeholder text is stored in the backend. This allows using dynamic values as placeholders, for instance, displaying a different placeholder text for different users.

• Input Destination is the property related to the input the user provides in the form. After submitting a form, this value will be used in an API request (POST or PATCH) to send to the backend the information the user provided.

To bind the Value property for an input field, we should select an individual data item received from an API request, as shown below.

The Input Destination property should be bound to a variable specified in the JSON body of a POST or PATCH request, which will be used to send the user data to a backend. More information on setting up API request for form submission here.

Once the JSON body with the variables is created in the API request, the variables will appear in the dropdown selector for the Input Destination property, as shown below.

Once you have bound the value and input destination, you can test the functionality of this app screen in Bravo Vision.