Form Data passing

[BouzidBoub]

Hello everyone,
I have a small issue in my Budibase app. I’m using a form, and I’d like the user to be taken to a confirmation page after submitting the form — where they can review the data they just entered.
The key point is: I want to display the submitted data without creating a row in the database first or retrieving it from a saved table row.
Any suggestions on how to achieve this?
Thanks in advance!

[mikesealey]

Hey @BouzidBoub

In broad strokes you should

Use a "Submit" button to

• Save the form values to State (https://docs.budibase.com/docs/app-state)
• Navigate to the screen where you want to display the values to the user

On the screen in which you present them their data you can then use the values stored in State to populate a text component. You should then also have a "Yes, these values are correct, please submit/save" button which performs a "Create Row" action to save those values to your table.

[BouzidBoub]

hey @mikesealey
i know that my question might look silly, but i haven't found a good explanation to how we can store form data into app state
any help please 🙏

[mikesealey]

Okay - so there's a slightly neater way to tackle this which saves a bunch of steps, if you're happy to display the user's form inputs to them in a modal instead of on a new screen. I'll walk you through this approach instead.

In my example I'll use the Budibase Sample Data tables.

Starting with a Form Block, I've selected the fields that I want a user to complete and submit:

I then added a Modal component to the screen - when this component is selected in the component tree on the left it will display - if you wish to work on something else on your screen you should click on a different component in the component tree.

Inside the modal, I've added 2 child-components, Text and Button. Their contents or actions aren't important right now.

I've then gutted the "On click actions" of the Form Block's Save button, and added a few of my own. Firstly just to validate the form - this means some helpful text will be displayed under any required fields (or any with more complex validation rules)

The next action is to Open Modal - the modal I added in an earlier step is the one you want to target (It'll be the only one available in your list if there are no others on your screen.)

Next, In the modal component itself, I've done some work with the Text component. If you open the bindings drawer you'll see all available bindings - the ones I'm interested in are the New Form Block - Fields. These bindings look like the field name (ie First Name), but hold the value the user gives to the field. This means we can show the user their own answers back to them.

In the Button, I've set the text to Submit, and given it 3 On-Click actions - to Save the row (it was validated in an earlier step), clear the form (for the next user) and close the modal. You may want to use something like a Navigate To step to take your user somewhere.

In your builder, the text component will render with whatever is set as the default value for those fields - in my case this is nothing, so the markdown I've used just renders as 4 starts, but when the user fills in a field and opens this modal they will see their answer in Bold.

Screen recording demonstrating this functionality
https://jam.dev/c/857a5480-83c3-4056-bf41-4f9f30de4526

I've provided an App export where you can take a closer look at how I achieved this.
16099-export-1747059529310.tar.gz

For some information on how to import an app-export such as the one provided above see the documentation, here

[BouzidBoub]

Thank you @mikesealey 🙏