Expand Table Records

  

Hello, 

I'm tasked with populating a table with the results of an advanced SQL query. So far so good. 

Now, we need to add a little arrow next to one of the fields, and clicking that should expand something like a container or a table cell below the row which spans the whole row, showing the details of the material. 

My problem is that a Table Records widget has the header row, and each one of the individual rows generated dynamically as many as needed depending on the results of the query, I can't add another "hidden" row below it. 

Also, I can't use javascript or jquery to do this, and I don't have access to the newer widgets such as accordion, working on OutSystems 8. They keep hinting about "list append"ing new rows below the one being expanded but this just doesn't sound right to me.


Any ideas?

Solution

Mariano Picco wrote:

Hello, 

I'm tasked with populating a table with the results of an advanced SQL query. So far so good. 

Now, we need to add a little arrow next to one of the fields, and clicking that should expand something like a container or a table cell below the row which spans the whole row, showing the details of the material. 

My problem is that a Table Records widget has the header row, and each one of the individual rows generated dynamically as many as needed depending on the results of the query, I can't add another "hidden" row below it. 

Also, I can't use javascript or jquery to do this, and I don't have access to the newer widgets such as accordion, working on OutSystems 8. They keep hinting about "list append"ing new rows below the one being expanded but this just doesn't sound right to me.


Any ideas?


Hi Mariano,

I developed a small example using ListRecord and HTML Colspan.

Main TableRecord with Child Webblock


Childs ListRecord with expressions (escape content: No) containing html colspan (change 3 by the number of columns in your main table)

Solution

Hi Mariano,

You also can check this post https://www.outsystems.com/forums/discussion/29336/table-rows-expand-collapse-for-web-app/ with a couple of solutions. For me Eduardo's solution is the best one.

Regards,

Marcelo