Table rows Expand Collapse For Web App

Table rows Expand Collapse For Web App

  

Hi,

I have an requirement for expand collapse for table rows?

Is there any component available in outsystems?

Sample Screen Print





Hi Sekar,

I don't know any component for that but you can do it with some javascript on the page.

Here is an example of that: http://jsfiddle.net/nc8bt9ss/

Hope it helps.

Ana

Hi Sekar,

If your table has not too much column you can do this just by hiding the header of table and put your table inside section expandable widget of silk UI and pass your header value in section expandable's title section and need some css stuff to make alignment better.

Let me know if it works

Regards


Pankaj

 

Hi Sekar, 

You can check this sample oml(attached). It may help you.

Sachin


Ana Reis wrote:

Hi Sekar,

I don't know any component for that but you can do it with some javascript on the page.

Here is an example of that: http://jsfiddle.net/nc8bt9ss/

Hope it helps.

Ana

Hi Ana,

Thanks for the reply. I will try with java script.


That's a good Example Sachin. Thanks for sharing the OML to have transparency for solution.

Sachin Mahawar wrote:

Hi Sekar, 

You can check this sample oml(attached). It may help you.

Sachin


Hi Sachin,

Thanks for the reply.

I am looking for expand collapse on row level. 




Sekar wrote:

Sachin Mahawar wrote:

Hi Sekar, 

You can check this sample oml(attached). It may help you.

Sachin


Hi Sachin,

Thanks for the reply.

I am looking for expand collapse on row level. 





Hi Sekar,

I understand your requirement, It's just an example which can give you Idea of expend collapse. You can can apply it at row level as well, Only require little bit modification. Try It, Meanwhile I will also try to modify the changes according to your requirement.

Thanks

Sachin

Hi, 


After all this time I know this isn't going to be useful for you specific problem, but for future reference I think I have a solution that does exactly what is required without using any custom js (only richwidgets components).


Regards

Can I ask you don't you use a LIST RECORDS with Accordions or Expandable Sections on it? :)



https://eduardojauch.outsystemscloud.com/FakeTableRecordsWithSortAndAccordio/Home.aspx?_ts=636471387253341426

No javascript, no tricks. Just a plain old accordion list. :)
The only "extra" is the List Records Sort component from forge, that allows to sort the List Records.

Cheers,
Eduardo Jauch

In my case I wanted to keep the functionality and style of tablerecords, so it was just easier to do it the way I put it... Sure there are many diferente ways of doing it. 

Hi Andre,

The style can be set in the list record as well (just is not ready as in the Table Records).
But what functionality you wanted to preserve, from the Table Records?

Cheers,
Eduardo Jauch

The order by (that you said you used a different component) and the out of the box pagination for example. Also the the style was ready and I could costumize the expand collapse icon. Like I said, I just wanted to share the way I did it since I thought it was easier then the previous answers, but the same can be achieved in many ways :)

Hi André,

The sort, previously existed out of the box only for Table Records. With the component from forge is possible know to do it.
The style (including the expand and colapse icon), well, it is just really some CSS, but in fact you have to do it.
Regarding the pagination, I thought you can do it with List Records the same way you do with Table Records... Am I wrong? (I'll give it a try and see if it works)

But don't get me wrong, I'm not saying you did bad. I just like List Records (they are much more versatile than the Table Records) :)

And in the end, is just a matter of work vs benefit. What works and is easy (to create and maintain), is usually better.

Cheers,
Eduardo Jauch

Yes, the pagination works the same way, I was just saying that the order and pagination are already there when the table records is automatically created :) 

Yes, scaffolding is a wonder :)

Hello guys, I'm asking here because my question is quite similar with Sekar's question.

I can use accordion or section expandable inside table record directly, but do you have any idea how to make it possible to be iterated dynamically?

I need something like this:


A parent has children, and if the child is also a parent of children, it will be iterated on the same row.

I tries to use web block, but iterating web block inside itself is not possible.

Do you guys have any idea?

I appreciate any kind of help.

hi, 

for new SIlKUI, there is already that component:

regards,

indra

You Can do that with a simple ajax refresh on a container

Eduardo Jauch wrote:

https://eduardojauch.outsystemscloud.com/FakeTableRecordsWithSortAndAccordio/Home.aspx?_ts=636471387253341426

No javascript, no tricks. Just a plain old accordion list. :)
The only "extra" is the List Records Sort component from forge, that allows to sort the List Records.

Cheers,
Eduardo Jauch


Hi Eduardo,


For some reason, everything gets broken and loses its functionality once the background theme is changed. Why is this happening ? I've only switched to another layout instead of the Lisbon_Theme\Layout_Lisbon.


Jordi.

Hi Jordi,

As your question is not related at all with the original post, the better is to open a new thread.

In any case, unless your new layout is also a SilkUi layout, everything will break.

This happens because the SilkUi layouts have JavaScript in them to make the patterns work.

You can open a SilkUi layout and copy the JavaScript to your layout.

Cheers

Eduardo Jauch wrote:

Hi Jordi,

As your question is not related at all with the original post, the better is to open a new thread.

In any case, unless your new layout is also a SilkUi layout, everything will break.

This happens because the SilkUi layouts have JavaScript in them to make the patterns work.

You can open a SilkUi layout and copy the JavaScript to your layout.

Cheers

Sorry about that, I just thought I could ask it here.


As you said, I've just opened my own thread for my particular case.


Thank you, Jordi.


Eduardo Jauch wrote:

https://eduardojauch.outsystemscloud.com/FakeTableRecordsWithSortAndAccordio/Home.aspx?_ts=636471387253341426

No javascript, no tricks. Just a plain old accordion list. :)
The only "extra" is the List Records Sort component from forge, that allows to sort the List Records.

Cheers,
Eduardo Jauch


In your example, I see the same issue as I am trying to get rid of...spacing at the top of the list records.

How do we get rid of that space?  I have done some CSS wizardry, but still have this annoying space

How can I get rid of it?  I am searching in Dev tools, but the setting of the space eludes me.

In my example case, you just have to remove the TableRecords Style class from the list.

Cheers.