I want to create a collapsible menu, in which the menu items are the items of a list displayed in the cells of a repeating group.
When one of these options is clicked, ideally a second element will show up inside that same cell (ONLY the selected cell) and push down the other cells below. Is there a way to do this?
Alternatively, I could settle for displaying a repeating group underneath the selected cell (possibly by pressing a button or a shape inside the cell), which would consequently hide the other cells below, if there is no better way to do it. I havenât been able to do that either though.
Yes, thank you so much, this is exactly what I was looking for!
Now I just need to wrap my head around custom states⌠unfortunately, there are no lessons/tutorials on the subject
Awesome! No problem And youâre right, the minimized set state doesnât do anything (I forgot to delete it). I originally included it because I was trying to see if there was a way to have all of the repeating groups âloadâ and then have them become minimized once the entire page is loaded. That didnât load them and then hide them, so that custom state is unnecessary.
Custom states took me a long time to understand. They can be used for a variety of things. One being, showing and hiding different elements depending upon the state. For example, you could have a custom state on a group called âCurrent Viewâ. Inside the group you could have a map element, a shape element, and a button element (each only visible depending upon the custom state of the group). The âvalueâ in the custom state is like a label. So if my custom state on Group A was âCurrent Viewâ (type: text, list: no), then I could assign values such as âMapâ, âShapeâ and âButtonâ. Then in the conditional formatting of the map, I would say 'This element is visible when Group Aâs Current View is Map" (you manually type in the word Map there). Then in the Shapeâs conditional formatting I would say âThis element is visible when Group Aâs Current View is Shapeâ". The same process would happen for the Button element. Itâs totally up to you what âvaluesâ you decide on; itâs just a way for you to remember what is being shown and what isnât.
Thank you @fayewatson! Iâm still not perfectly clear on everything though, especially on how the first example you posted can work without any conditional formatting whatsoever.
For now I have found a workaround, I would really like to master custom states though, I hope the founders or the community will make a tutorial at some point.
Anyway, thanks a lot for the explanation!
Ohhh I see So those elements were hidden on page load (minimized) because in the property editor, this box was left unchecked to hide each of them on page load.
They become visible depending upon what is clicked (using the Element Action â âShowâ or âHideâ) in the workflow.
**That forum example was created before the new Element Action âToggleâ existed (which âshowsâ and âhidesâ; that would probably be best to use instead of a âplusâ icon that shows and a âminusâ icon that hides).
As an extension to this, I was wondering whether there is a way to auto close an âopenâ item when another item is clicked?
In my example, I have a repeating group of youtube vids and when you click on the video, a collapsing group opens to show the description and some other information. What I want to be able to do is auto-close this open group when I click on another video so I am only ever just showing the details of the video I clicked on.
I have done this in the past using a custom state on each object, you have a common workflow that sets all the custom states to not visible (however you want to name them is up to you) then set the one you want to visible. On top of this use a conditional on each option to look at its on state to determine if it then need to be visible or not.
Just trying to wrap my head around this. I understand the concept where there are multiple objects that I want to set a custom state, however, as there is essentially only one object (one collapsible group in a repeating group cell), Iâm not sure how I go about closing an open group in a different cell to the new one I am opening. Sorry. I wasnât very clear in my last message.
One way you could do this is have the collapsible group set to only be visible when another groupâs Custom State (Number) equals Current Groupâs Cellâs Index #
To Do this:
Make a workflow for when the video is clicked. The workflow will be
Set State of Repeating Group (or any element OUTSIDE a repeating group cell) - call the State âSelected Cellâ and make its type Number
â> set state of this repeating group to âCurrent Cellâs Indexâ
This assigns a number to the custom state that will equal the repeating groupâs cell #
Make the collapsible group Not visible on page load.
Then put a Conditional on the collapsible group within the cell --> When Repeating Groupâs Custom State is Current Cellâs Index (or parent groupâs current cellâs index, etc) -> Then this element is visible
Or depending on how you have the repeating group data set up you may want to use something other than a Number, or want to to âResetâ the Custom State
Example - if you have a âNextâ button to view more videos on the list, then you will need to reset the Repeating Groupâs Custom State when the Next button is clicked. If not, then the next group of videos showing will have one of the collapsible groups expanded
Thanks very much! This is a really nice solution. The first approach works with one little sticking point Iâm trying to work out.
When I click a video, then click another, Iâm unable to open the first one I clicked. I think itâs something to do with refreshing the cell reference in the custom state perhaps?
You can also set the type of the custom state to be the repeating groupâs type of content. For example, if youâre doing a search for âUserVideosâ, then you can have a custom state, set on the page (ex: videopage), called âCurrent UserVideoâ (Type: UserVideo, List: No).
The workflow could be --> âWhen Description Group is clickedâ --> Element Actions --> Set State --> Element: videopage, Custom State: Current UserVideo, Value: Current cellâs UserVideo.
Then create a conditional statement on the expanded description group which is âWhen Current cellâs UserVideo is videopageâs Current UserVideoâ --> This element is visible. This would make sure that only one description is open at a time.
Then you can create an additional workflow which is âWhen Description Group is clicked and when Current cellâs UserVideo is videopageâs Current UserVideoâ --> set the value of the Current UserVideo custom state to be empty. This would have the Description Group collapse if the User clicks on the Description when that group is visible.
Thanks Faye.
Thatâs a nice clean approach too. I like it. I did just find that the flow needed the collapse action as well if the user clicked on the open vid. I created a similar function to achieve that but think this will help clean it up more.
Hi @gf_wolfer/ @fayewatson,
I have been trying to set the above mentioned workflow but somehow I am not able to do with either of the ways.
I have a RG with a group in it, this group further contains a broad image which covers the entire cell. On clicking this image there is further a setup of several thumbnail images with some text under it. Right now when the broad image is clicked it shows the thumbnails under it, but on clicking the other broad image it doesnât collapse.
And youâre right, the minimized set state doesnât do anything (I forgot to delete it). I originally included it because I was trying to see if there was a way to have all of the repeating groups âloadâ and then have them become minimized once the entire page is loaded. That didnât load them and then hide them, so that custom state is unnecessary.
So those elements were hidden on page load (minimized) because in the property editor, this box was left unchecked to hide each of them on page load.
