List to Another Page

Valtenci · July 23, 2023, 2:44am

hello, I have a list with two fields: id, name and a detail button,

How do I make it so that when I click on the button, I take the selected data to another page with a form and with the name fields, as if I were a change form?

I looked in the tutorials here, but I didn’t find anything similar, just a few passing url parameters, but not to another page, I would like to know how to do this in wappler.

thanks.

ben · July 23, 2023, 3:32am

Use an on-click event to go to another page using the Browser component. Add the id of the record as a URL parameter.
On the other page, use the URL parameter to filter the database on the record id.

see:
Wappler Documentation - Filtering Database Query with an URL Parameter
and:
Define URL Parameters · Wappler/docs Wiki (github.com)

Valtenci · July 23, 2023, 3:39am

do you have any example of this process?, because it does not seem to be that simple, because in the inputs of the other form I will have to show the records of the id of the selected list.

thanks Ben.

ben · July 23, 2023, 3:51am

Working on an example now.

Valtenci · July 23, 2023, 3:53am

It’s people like you that motivate me to use Wappler every day.

no words to thank

ben · July 23, 2023, 5:20am

I always start with the heart of the project, called database. This is what the database looks like where I have chosen the Employees table.

Then I create the server actions so that I can use these for the front end. This is the read action.

and the filtered (single) read action.

This has a condition that the employee id is the same as the URL parameter ($_GET variable)

The update action is a dummy. I presume that you know how to create this.

The layout page gets a Query Params assigned to it. If your project is not NodeJS based, then assign the parameter to the details page.

Add the two pages, one for the list and one for the detail.

Adjust the routing to show the parameter for the details page.

A browser component and a data source is added to the employees page. A table showing the employees is added using generators. The row containing the employee gets an on-click event, the action is to go to the details page with the emplyee id as the parameter.