Passing record id to a modal and updating record

I have a ‘contacts’ table in MySql and have created a hyperlink on full name to open a modal with a BS form. However despite going through the existing tutorials I’m struggling to understand how I can retrieve the specific record when clicking the hyperlink and populating the form in the modal to edit the record. Can anyone advise please?

Hi @noelfraser,

Waht I did was creating an variable or Array in the app structure, and fill it via the on click event on a button/hyperlink. Then use this in your modal.

so for passing a record ID, you could do the following;
1 create variable in app structure
2 add value of id needed to button/hyperlink
3 add on click event on button/hyperlink which fills the variable with the value of the button/hyperlink
4 on the same on click event also show modal.
5 use variable in your modal
6 on save changes, clear variable to keep things clean.

hope it helps!

Regards,

Nick

@noelfraser
You can use the data detail region in your modal. On click of the button add two dynamic events - set detail region ID and open modal.
Bind the values in your form inputs, using data detail as a data source.

2 Likes

Thanks Nick

How do I add the variable value to the hyperlink?

I’ve added an on click event to open the modal and the form in the modal is accessing the query but it’s the passing of the record ID that’s puzzling me a the moment.

Cheers

so made a quick example how i do it when passing a value from an input to an modal. but this can also be a row from a table, it’s just the reference that need to be changed in the hyperlink properties under dynamic events.

testproject.zip (286.5 KB)

I am assuming you are using server connect and dynamic binding on the table to generate the list. Or a bootstrap generator.
For each row, you must have an ID field for the data detail region to work.
If its called, say contactID, just set that as the value for data detail region ID on the dynamic on-click event. The ID of current row will get passed to the region automatically.

1 Like

Thanks Nick - I’m away for a couple of days - will try over the weekend.

Try taking a look at this video. It is for the Dreamweaver Extension but it works basically the same.

Thanks Brad

So I’ve been trying to get this to work for me since Saturday morning with no success. I’m new to development and although Wappler is an incredible tool I think I’m struggling with the concepts.
There seem to be a few ways to handle and thanks to everyone who has replied so far, but none have worked for me although I’m sure I’m missing something important. Without a detailed tutorial covering exactly what I want to do I’m struggling.
I’ve watched the DMXzone video on data detail and I’ve tried using variables but with no success.
I’ve also watched the Wappler Unwrapped video on creating an update form but this uses a page link for the update whereas I want to use a modal.bandsuite.zip (5.0 MB)

I think part of the problem I’m having is the various methods have got me confused.

If anyone can talk me through the process using the data detail function I’ll be forever in their debt and be able to move forward with my project.

Here’s where I’m up to so far.

I’ve created my database connection and have listed my contacts using a BS4 Table Generator.
I’ve converted the “full name” field to a dynamic field and have been able to add dynamic events to show the modal and set the data detail value.
I’m struggling with the following:
How do I populate the modal with a record update form that shows the record I’ve selected and allows me to modify the record and then save it.

Where do I insert the data detail

Do I need to create a server connection and query to retrieve the selected record?

I think I’ve been trying to solve the problem so long that I’m just getting more and more so any help would be greatly appreciated.

Yes, it seems that is the one part you are missing. Just going by the info you just posted you should then be able to bind the data once you have a recordset to bind from.

You can use data detail, but you can do this:
If you have your table populated from the BS table generator, then create a button in your table.

Create a Server Connect file for the selected record. Filter the ID by a get variable.

Then create an onclick event for your edit button in the table row. For the action, click your selected record server connect action.

For the input parameter, select your ID from the table.

Also on the onclick even, add your show modal window that has your edit form.
On your BS form generator, populate it with your selected record action.

1 Like

In the modal body, then you place your form inside the data detail. Use the data detail as a source for your form values.

No, you have already done this - use the same connection/query which you are already using on the page in the table.

Everything is pretty detailed explained in the video Brad posted, it just doesn’t use a modal but the logic is 100% the same.

The issue is that it’s not possible to cover every use case. Try not to remember every single step to achieve something. Try getting the logic and adjust it for your use case.
In your case you just need to adjust the dmxzone video logic to use the modal i.e. just use your data detail inside the modal, as you need it.

Well after a very frustrating few days I’ve finally managed to get this working, selecting a record, opening a filtered update query in a modal and writing back to the database.

Thank you to everyone who took the time to help.

1 Like