Using a Repeater for Multi-level Accordion Navigation?

repeater-widget
#23

Hi EdwardB,
As a base I used file that posted on this page, please scroll up to see: AccordionRepeater2.rp.
I really like the structure of this file.
Here my file for your reference.Nav_ref.rp (1.1 MB)

#24

Thank you Nathalie, that’s really nice of you !
Will try looking at your file ! will keep your posted

#25

@EdwardB,

I can think of more efficient ways to represent your repeater table, but what you have should work… The example @bermanatalie posted works well, but I’m not a fan of all the global variables, so I attempted to make a solution that didn’t require these.

zalandoLike-Nav-v2.rp (470.6 KB)

First off, you should name your widgets–otherwise the interaction code gets too confusing. For example, there is a Label rectangle in each of your dynamic panel states, so they might be named “L1Label”, “L2Label”, and “L3Label”… Secondly, your table is not in the correct order… Look at what is shown on the Home page in Axure editor–Some of your Level 3 items are above their Level 2 and Level 1 parents, so when shown they would appear above their parent items–opposite of what you show in your example GIF here. I resorted (in Excel) so the accordion structure displays correctly.

Third, you have a filter rule that does not make logical sense:
[[Item.stateLevel == 2]] == [[TargetItem.Level1]]
…So when you click on a Level 1 item, everything disappears.
I get what you are trying to specify here, though–“Show Level 2 items under this item, and all Level 1 items.”

Basically, you can have only one statement in a Filter rule, entirely wrapped in the double square-brackets (rather than two sets of the double square-brackets.) The way a filter works is it will display only the repeater items that exactly match the rule. So the filter logic for this rule should look something like,
[[ Item.stateLevel == 1 || (Item.stateLevel == 2 && Item.Level2 == LVAR1) ]]
where LVAR1 is a local variable pointing to the text on the item’s level 1 rectangle (e.g., “L1Label”). The translation of this rule is, “Show item rows that have value “1” in the stateLevel column (all Level 1 items) OR item rows that have both of these conditions: A) value “2” in the stateLevel column AND B) value in the Level2 column that matches the text in this item’s Level 1 label (meaning they belong to that Level 1 parent item).”

So, yes, the “query” syntax gets complicated… Welcome to repeaters!

I’m not sure why you are trying to set a Level 1 item to dynamic panel state 2 when clicked… This would make it appear as if it were a Level 2 item, which is not your stated intent. Likewise, when a Level 2 item is clicked, you don’t want to make it a Level 1 item, but rather have the same styling as a Level 1 item. So, I set up some styles to save time and set the background and text to be selected when clicked… the selected state matches that of Level 1.

I had to play around a bit with the filter rules for selecting/deselecting (opening and closing) items at each level. When the interaction code was all loaded to your dynamic panel (dp) within the repeater, successive clicks got unresponsive and unreliable. I think this was due to having to repeatedly test the current state of the dp and whether something was selected or not. I broke out the OnClick code to the widgets in each of the 3 states. To make this work better, I grouped everything in each state, so clicking anywhere on an item triggers the same OnClick code. It also made it easy to specify a selection group so only one item at each level can be selected at once. You can remove any of the selection groups if you’d rather have multiple items selectable.

I also had to change how the repeater gets loaded, so look at the OnItemLoad code as well. Finally, I added carets so I could keep track of which items/levels were actually selected (and it is consistent with your sample GIF.) Now that it works, you could remove those widgets if needed.

#26

Oh my god… This is insane ! I’am so grateful for your help !
You should write a medium post for that ! I’am so happy !
If you ever come in London UK I’ll buy you a beer :slight_smile:

closed #27

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.