Database action query when clicking on table row

[cdjackson]

I’m trying to work out how to load a detailed database information view in one table, which is selected from another table on the same page.

I have a table which lists the rows from a database. I want to be able to click on one of those rows, and trigger a new query from a second action. Currently I have the list populating the table, and the second table is being populated with the detail of a record - but I want this record to be set when I click on the table.

I’ve tried adding a click dynamic event on the first table row to set the query (see below). In a separate location I’m populating an element with {{device_query.data.device_id}} which is being updated when I click the table, but the rest of the data is not changing.

I’d welcome any thoughts, and apologies if this is a noob question.

Thanks.

[ben]

Hi and welcome.

Have a look at the Dreamweaver version of the extensions: https://www.dmxzone.com/go/32899/master-detail-relationship-with-app-connect/

[cdjackson]

Thanks @ben. This looks exactly like what I’m trying to do, and I think I’ve followed all the same steps (as far as I can tell - the UI is a bit different in places).

One further thing I’ve noticed - if I look in the browser debug console, I don’t see any server side requests being made when I click on the table, so I guess as a minimum the issue is in this area. As shown in the image above, I do have an action configured to set the device_id variable which is linked to the GET request in my Database Single Query step. Is there anything else I need to do to trigger the server side request, or should it be sufficient to set the action shown above?

[ben]

Is there any way that you can show us the problem page? An online version would help a lot.

[cdjackson]

An online version would help a lot.

Sure - please see here -:

https://zwave.zsmartsystems.com/zwavedatabase/

[ben]

I see that all of the information is stored in the same table, in which case you will need just the one Server Action, namely device_list (or similar). The steps are to connect to the database and, in the Query Builder, select all of the fields. Add a sorting method. For an example, see https://www.youtube.com/watch?v=9AbxvcztYgw

On the client side, create Server Connect and use the Table Generator to create the list as per https://www.youtube.com/watch?v=wkgPXFloYio

Then add Data Detail and populate the detail area as per https://www.youtube.com/watch?v=FPufU2LstfM

I hope that this is clear enough. It may be an idea to go through the whole tutorial so that you can pick up some ideas. https://www.youtube.com/playlist?list=PLUjqTJN3byC9kK8YZkmGwjo9nrEipl2yb

[cdjackson]

Thanks Ben,

I see that all of the information is stored in the same tabl

There are actually two tables in the details query, but they are retrieved through a single query - I don’t think that is relevant, but thought I would mention it.

I’ll take a look through this new tutorial, but I believe this is what I’ve done. The queries both work - with one notable exception.

Add a sorting method.

I don’t add a sort method - I’m not really sure why this is needed since the query type is “Single Record” so there should not be anything to sort - right? I do have a filter method though. Without this filter, if I click in the “Open in Browser” button, then I get the first record in the table. When I add this filter, I get a null in the json - I think this is correct since there is no input into the query, but I thought I’d mention it anyway, just in case.

On the client side, create Server Connect and use the Table Generator

I manually created this table. For my understanding, is it important to use the generator?

I’ve now removed the filter in the above query and you can see that the table is updated with the initial query when the page loads, so I think that most of this is working. I think that either the filter in the query is the issue, or the sending of the action.

Wouldn’t you expect that I’d see the query in the debug console when I click the table? Given that I don’t see this, I’m assuming (maybe incorrectly) that the error is somewhere on that side rather than the query and the updating of the detail table?

Thanks again for your help.

[ben]

Please see the videos, it will help you to understand:

Serverside: One Server Action listing the info. Multiple Records, sorting if required

Clientside: One Server Connect and one Data Detail using the Server Connect as its source. The latter will be just the one record.

This is the problem that I used to have (and still have) with Wappler, it is too easy for my complicated mind.

[cdjackson]

Just to close this out, the problem ended up being with the query - I’d incorrectly joined two tables together.

If I can ask another noob question - what is the correct way in Wappler to link to another page using a click handler? eg on this page, I now show the detail using the mouseover event - I’d like the user to be able to then click on the row to move to a more detailed page.

Thanks.

[ben]

See

Filtering Database Query with an URL Parameter

[cdjackson]

Thanks Ben. I probably wasn’t clear… I’m fine with filtering - that works. What I want to be able to do is to link to a new page from a click event. So if the user clicks on a row, I open a new page with the details of the row that they clicked on.

I would expect to load a new page with (eg) /devicedetail?device_id=2, but I don’t seem to be able to select a link in the click event.

This feels like it should be a really simple thing, so it’s probably obvious - sorry.

[ben]

Ok, this is what you are looking for: https://www.pleijsiercaravans.nl/occasions.php

For this project I have used a Card to house the product. Clicking the card will take me to the details page. I have used the Browser component to do this as per

where the value of id is obtained from the repeat area - the id of the caravan.

[cdjackson]

Thanks again @ben. What I was missing was the browser component - I’ve not seen this mentioned so far in the docs…