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.