Server update with a Button added to a bootstrap5 table

Hello community,
It seems that I'm stuck and cannot figure out, maybe any of you PROs could help.
I have a repeat bootstrap5 table that posts listings from a database, now I need to tage some listings to a user so for that I've manually added a button and modified this generated table as needed, but it seems that I cannot find a way to make this button to update the database fields, I have server action with database query that that gets me this single listing values also another server action that updates the database, I've tried to generate a new bootstra5 table form and only used those 2 needed values and it works, but I cannot update my modified table where I added a button manualy.
First form (that works it had generated "save" button is listed above), and my modified form that I need to make this marked button to work is at the bottom (I added this button manualy and cannot find a way to update a database up it's click):

what I need to achieve here is to add a user_id to "liked_by_user_id" listing DB table. Server actions is working:


do I need to create some flow on a button click or any other ways to do that.
Maybe anyone has any suggestions ?

If the button is inside the <form>. then the type should be set to submit.

If not inside the <form>, then you need to add an on-click event to submit the form.

@ben yes it's set to submit thank you, but how to define the logics that I wan't to achieve there, any suggestions?

Please paste the code of the 2nd form here so that we can see what is going on.

When "Įsiminti" submit button is clicked I need to post a "user_id" and a "listing_id" to a server update action, logged in "user_id" is tracked from a global whoiam action.

I am sorry, but I do not see a form that submits data to the backend.

Have a look at the documentation:

I've read your tutorial and I still cannot find a solution, I will try to explain more:
I have a bootstrap5 generated repeat table from DB table "z_listing"


after reading your tutorial I've inserted a server connect form to this tables last column (just to show what I want to achieve) it has 2 text input fields and 1 button. I want to achieve this with "Įsiminti" button, that's inserted to this bootstrap5 repeat table, generated from DB. I do not know how to do this, if it's possible, or I have to do this by inserting new form to this table (as I did), and it works, so how to do this with "Įsiminti" button, instead of creating a form inside a table ?

;

server action has imported Post values from this new "button" form:



I have more specific table, this one is just for testing, that I will integrade this to a "like" button:

Hey / Sveikas :wave:

If I understood you correctly and you're looking to sync your data live, right after you've updated it, you can always run the load of the server connect action again, right after you have updated the record, this will update the changed to the table. This can be done on the dynamic actions once the button is clicked. If you wish to stream those changes for everyone, you can also use sockets and use refresh action and select the api action that you wish to refresh within server connect and then make sure you select to refresh data within app connect.

Feel free to message me you need any help :wink:

Hi Evaldai,
those listings table comes from a database query and available so see without registration but only registered users can click on this "like" button to save those listings to their account for checking this later on, that's why I need to track user_ir and a listing_id needed. Any ideas?

Yea, it's defintiely easily acheivable! :slight_smile:

I'd load the server connect action form the button, you can either do this by directly loading server connect, using app or page flows (only app flow returns a response with data if I'm not mistaken or mixed them up)

I have recorded a short video of how its done. I have used identity from the global action, that won't require user ID input, the server will know what user is saving the listing. So all I need is the lsiting ID. I did not bother to create server connect action to retrieve data and produce it in the table, so I've used simple input field just for demostration, but in your case, you will have listing ID binding that you will be able to use in your server connect binding, therefore no input fields will be required at all.

This will save the information to the database, you can also use on sucess event to clean up the table, return toast or anything else on success of the action :slight_smile:

thank you @Evaldas, you saved me here!, I integrated this to my custom table with "like" fort awesome icon inside, any ideas how to make this "like" to change color after this "update" action?
image

Yea, this is easily achievable with the condition, you can change styling via attributes based on your condition, you can create a custom class within your stylesheet e.g. .liked_post_icon { color: red!important;}, and then apply them within dynamic attributes > styling > class toggle, insert liked_post_icon (without the dot) and select the condition, e.g. if post_liked = true, or any other condition is met, the class will be toggled :slightly_smiling_face:

Edit: this is only going to work if the data is refreshed, if it’s stale, the old false value to the liked_post will be present :slightly_smiling_face: also make sure that you’ve selected icon directly, as applying condition to the button, is going to change button’s appearance instead of icon’s alone :slightly_smiling_face:

as a condition is probably to do a DB query to check if this listing_id has this user_id ?

and for removing this like - DB remove server action, but how to do this on the same mouse click ? I mean one time click inserts DB value and another click removes and so on, this should be looped somehow ?

also maybe you know how to set a condition to check if this listing has this user_id value and skip DB update if yes?

I created an additional sub table in my listings table to capture those "like's":


but now I'm in a problem where I do not know how to make a condition to check if a listing_id has an user_id, probably somewhere here should be a condition to check that:

Now to use a condition within the server connect as shown in your last photo, is relitively easy, all you have to do is get a database query, looking for whether the database returns anything based on your condition. e.g. if there's a lioke listing with matched identity and listing_id, to check this, you can use condition componenet and simply select the database query. Then you can choose then/else steps, there you can define your steps as required.

Also, bare in mind that you can set your security identity in globals and uncheck output, this will always return identity within the server and not the client, this will eliminate the need of inserting security idenitity in each of the API's.

This also can be done using flows. Using pretty much the same logic, where if the condition is met, load server connect action, else, leave the steps empty :slight_smile:

thank you very much I will test this!
and about style class I was able to create it but cannot find a way to pull values from "likes" table:

any ideas?