This tutorial is a continuation after you have set up a POST request to create data to a database. If you haven't done that yet, check out:
👇 We're using this design file and this Airtable for the tutorial.
How to bind POST request to form input design
Connecting functionality to your app design is done in the Binding Setup of an app project.
Binding is the action of connecting an API request to an app element (i.e. text, rectangle, etc.)
- In your form design, add the Bravo Tags for input fields and submit button. The example design file already includes these tags.
- Import the design file into Bravo to create a project. 🚀
- In your app project page, click on the app screen with the form to enter Data Binding mode.
- Select the collection and POST request you previously created in the Data Library.
- In the Visual Elements list, select your input field layer.
- In the Element Binding side panel, you will see 2 selectable options for the input field: Content and Content Destination.
- Since the POST request is for creating (sending) data to the database, you only need to select the input for Content Destination.
- Repeat step #5-7 until all of your input fields are bound.
- Scroll down to Response Actions to configure the action that happens when the user presses the Submit button. By default, the app will show an alert message.
- Test out your native form page with Bravo Vision! 📱
Single-line text field:
(In this example, we're selecting the collection "POST demo" and the request "Add Scores".)
Content: The data that is replacing the placeholder content Content Destination: Where the input data is sent to
Notice the Content Destination choices come from the inputs in the Body of your POST request setup.
(No binding is needed for the submit button, just make sure you have the submit Tag on that element)
Show Alert: Display a pop-up message.
Go To Page: Redirects user to another page in the app.
Open URL: Opens the web browser on the phone with the specified URL.
That's it! 🎉