📖

Send form input to a database

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.)

  1. In your form design, add the Bravo Tags for input fields and submit button. The example design file already includes these tags.
  2. Single-line text field: [component:input-text]

    Number field: [component:input-number]

    Submit button: [action:submit]

    image

  3. Import the design file into Bravo to create a project. 🚀
  4. In your app project page, click on the app screen with the form to enter Data Binding mode.
  5. Select the collection and POST request you previously created in the Data Library.
  6. (In this example, we're selecting the collection "POST demo" and the request "Add Scores".)

    image

  7. In the Visual Elements list, select your input field layer.
  8. image

  9. In the Element Binding side panel, you will see 2 selectable options for the input field: Content and Content Destination.
  10. 💡

    Content: The data that is replacing the placeholder content Content Destination: Where the input data is sent to

    image

  11. Since the POST request is for creating (sending) data to the database, you only need to select the input for Content Destination.
  12. image
    💡

    Notice the Content Destination choices come from the inputs in the Body of your POST request setup.

    image

  13. Repeat step #5-7 until all of your input fields are bound.
  14. (No binding is needed for the submit button, just make sure you have the submit Tag on that element)

    image

  15. 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.
  16. image

    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.

    image

  17. Test out your native form page with Bravo Vision! 📱
  18. image

That's it! 🎉