65
Views
12
Comments
Solved
Container of block visibility inside a list
Question
Application Type
Reactive

Hi people,

I have a list os section and inside of It I have a block with Tasks.

I need to configure a link (ico) that when I click into section row, I show or hide the block container of Tasks o THAT section id. I only got to put ALL blocos visible or not together. How can I put my correct container(id).visible true/falar in a cliente action?


How do you handle this?


Thank you

2021-09-06 15-09-53
Dorine Boudry
 
MVP
Solution

that is done by the little ForEach in your action.

if you don't want it to automatically close another when opening a new one, you can leave that whole ForEach out, and instead, just switch the one just clicked (I'm assuming you'll click on the same icon to close one again ??)

So I think the entire action is just a single assign:

ASSIGN GetSectionsByProjectId.List[RowNumber].isSelected

TO not GetSectionsByProjectId.List[RowNumber].isSelected

2021-09-06 15-09-53
Dorine Boudry
 
MVP

Hi Elaine,

first off, not an answer to your question, but as an alternative, maybe you want to use an accordeon pattern ?

For the answer : if you want to be able to switch visibility on a per row basis, you will need some variable on a per row basis to hold for each row whether it is visible or not.

So dependent on where your list comes from, you have to make sure that an extra attribute is in the list of type boolean.  For aggregates (common use case) you can do that by adding an extra calculated attribute to you aggregate, and set it's value to the default (either false for default not showing or true for the default showing)

Now, whatever mechanism you use to show/hide (a button per row ? an icon per row ??), will involve some OnChange action, in that action, switch the variable of that particular row on/off)  

For the container holding the tasks, the visible property will be the boolean of that particular row.

Dorine

2023-06-17 23-16-53
Elaine Guimaraes

Hi Dorine, 

Thank you for return.

I need a button to swich in ALL row off tablet father (like imagem off Asana). Expanding or not short/hide the section Tasks.

I thought about accordeon, but I have a drag and drop tablet, so, I have a block whith a list inside Section list.

I created a user action to show or hide, but its not working with a specific section, because I don't know how can I give and read the container id of that especific row of section list id.

I really love if I could to put RowId on Container name. IS It possible?

(I'm beginner on Outsystems)


Thanks!

2021-09-06 15-09-53
Dorine Boudry
 
MVP

give the action an input named RowNumber, then set the GetResult.List[RowNumber].IsVisible boolean on or off.

From your list, match GetResult.List.CurrentRowNumber

2021-09-06 15-09-53
Dorine Boudry
 
MVP

i made an oml for another post, but it has the same mechanism : 

see attached oml


QDR_FloatingDetail.oml
2023-06-17 23-16-53
Elaine Guimaraes

I will try It now.

I don't need to read anything on Container.Visible?

2021-09-06 15-09-53
Dorine Boudry
 
MVP

well, as said before, you will need a boolean in your list, and of course the container visible property will be linked to that boolean

2023-06-17 23-16-53
Elaine Guimaraes

Sure, Sorry 😁👍

I will try on this way. Thank you!! I din't see that you attached a oml!


Thank you so much!

2023-06-17 23-16-53
Elaine Guimaraes

Dorine,

Could you help me?

I think that I do everything that I need, but is not working yet. I could't find where I'm going wrong, some images attached with my implementation. What I made:

- I dont use anything about top position, so I've been deleted javascript on ClientAction that you send and implement only thinks relative of visible/hide on my container.

- I didnt understand what attribute "servicestudio-showRecord" do and where use it, but implemented this attribute too.

Please could you help me to find where I'm going wrong?

Thank you

ContainerVisibleorHide.PNG
ClientAction.png
IconStart.PNG
2021-09-06 15-09-53
Dorine Boudry
 
MVP

sure,

I didn't mean that you have to copy exactly what is happening in my oml, that's for a completely different example.  I just wanted to show you the technique of adding an extra boolean to the aggregate result.  In your case, that boolean would be something like "IsVisible", maybe.

I think the best is that you just share your oml, but what I can already say about your images :

  • your icon onclick event looks right to me, you are passing in the CurrentRowNumber of the clicked section
  • I would maybe call it IsVisible instead of IsSelected in your case, but that is trivial
  • servicestudio-showRecord is irrelevant, i didn't add it, it's probably because i copied the container from somewhere else
  • The Visible property of the taskContainer should be that boolean you added to your aggregate : so GetSectionsByProjectId.List.Current.isSelected : I think that is the major thing still wrong in what you are doing
  • You added the RowNumber to the OnClick : that's good
  • In your case, you don't need another variable selectedSection, and you don't need to set it in your action, that was only for that other example, where the details are shown in another part of the screen, you are showing them inside your list, so no need
  • that ForEach with setting the isSelected based on CurrentRowNumber = RowNumber is ok

So, as far is i can tell, only the visible property is still really wrong

What I can't see from your images, is what exactly you are passing to the blockTaskList inside your TaskContainerVisible, I would expect that to probably be GetSectionsByProjectId.List.Current.SectionId or something, and then you have an aggregate inside that block that retrieves the tasks for that section id ? But first fix the visible property and we'll see from there.

Dorine

2023-06-17 23-16-53
Elaine Guimaraes

Wonderful, it works!! Thhaanks


But.. I woulçd like to do a customization. Now is working like Accordeon, but I would like to can open/close individually. 

Now when I click on first section, it open it but closes the second onde if it is oppened.

What is the way to set individual?

2021-09-06 15-09-53
Dorine Boudry
 
MVP
Solution

that is done by the little ForEach in your action.

if you don't want it to automatically close another when opening a new one, you can leave that whole ForEach out, and instead, just switch the one just clicked (I'm assuming you'll click on the same icon to close one again ??)

So I think the entire action is just a single assign:

ASSIGN GetSectionsByProjectId.List[RowNumber].isSelected

TO not GetSectionsByProjectId.List[RowNumber].isSelected

2023-06-17 23-16-53
Elaine Guimaraes

Thank you so much!!

"(I'm assuming you'll click on the same icon to close one again ??) "

Yes, exactly!

Regards!!

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.