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.
