Hi,
Is it (reasonably) possible to use a repeater for a multi-level, vertical accordion navigation? The nav I want to create is three levels deep.
Thoughts?
Thanks,
DC
Hi,
Is it (reasonably) possible to use a repeater for a multi-level, vertical accordion navigation? The nav I want to create is three levels deep.
Thoughts?
Thanks,
DC
Hmm⌠interesting challenge. Yes, it is ((maybe) reasonably)) possible, depending on what you need. If you post a file or example of what youâre trying to achieve it would help.
Ideally, youâd want to nest three repeater lists, but that is not supported in Axure. You could maybe nest multiple dynamic panels, each with its own repeater list, but by the time you handled when and where to move those panels around, youâd likely defeat any advantages of doing this in repeaters.
My first thought at how to achieve this would be to create a dynamic panel in your repeater cell, with three states, one for each of your nav levels. Youâd style each state with different indentation, font size, color, etc. and include slots for parent content: e.g., Level 2 would have a copy of Level 1 title/content, Level 3 would have copy of Level 1 and Level 2 content. In this way, as you open an item, it would expand by changing the dp state to âNextâ but not disappearâif that makes sense. With the âFit content in HTMLâ option the repeater cells would automatically size themselves and push/pull locations. Youâd be able to animate the accordion transitions, too. Or, you could stack the 3 dpâs, setting Level 2 and 3 to height of 0 initially, then sizing and moving them based on number of items as their parent gets selected.
In your repeater table, youâd have one column for each level, and the OnItemLoad would set text in the corresponding dp state. I guess youâd be limited to how many items you could have in Levels 2 and 3, but if you know a maximum count, like say, 20, then you could hide or move the empty item slots.
Shoots, Iâm going to have to try this and post an example for any of this to make sense!
Turns out my first thoughts were not good approaches⌠possibleâmaybe, but definitely not reasonable.
I was able to create an accordion menu with 3 levels, using filters. See this example:
AccordionRepeater2.rp (263.1 KB)
Thank you for your help. I gave your idea a try. Seems like a good approach but I canât figure out how to add multiple level 2âs and level 3âs.
Hereâs my attempt. https://sfr9gs.axshare.com/#c=2
leftNavRepeater.rp (108.1 KB)
Source file attached.
DRC
Itâs possible to do this using a system of nested item idâs.
If an item is on the second level, parentid = the id of the parent (top menu item).
If an item is on the third level, grandparentid = the id of the grandparent (top menu item).
The basic idea is:
When the user clicks on an item:
Then, add a filter to the repeater OnLoad event that shows:
This is necessary if you want the inner subfolders to STAY expanded (or closed) when you close and open the main menu item. If you donât need those inner folders to remember whether they were open or closed, you can probably simplify this.
Hereâs a sample file:
leftNavRepeater_modified.rp (82.6 KB)
DRC,
Your attempt uses a different approach from mine. Granted, mine is probably more complicated than it needs to be, as most menus like this do not need to be sorted and re-sorted. Now that Iâve figured out the basics, Iâll try to simplify this, if I have the time.
In the meantime, if you use my approach as a base and look at how the repeater table is laid out, you would just copy an item from the level you need and update with your details. For instance, here is a Level 1 item, âMineralâ:
Notice the âOrderâ column has a number and an exclamation point, â3!â so every Level 1 item must follow this syntax --Iâm using the number to allow sorting of the list (âMineralâ is the third item in Level 1) and the â!â to uniquely identify top level items in the filters when they need to be collapsed/expanded/selected (it was just easier to have at least 2 characters in this cell, but the logic could be improved, Iâm sure.) Likewise, the Name column allows sorting alphabetically. This was basically to let me test how Axure handles sortingâmore on that below.
If you donât need to sort your list, the Order and Name columns arenât technically required. You could remove these if you adjust the filter logic accordingly.
To add another Level 1 at bottom of list just increment the number and carry down the syntax used for Level 1:
Same for Level 2:
These two new items belong to âOtherâ which is the fourth Level 1 item, thus ordered â4â, so they are âchildren of 4â and inherit â4â to denote their parent. Level 2 is ordered by letter instead of number (*See below for reason) so the first item, âLiquidâ gets an âaâ, the next a âbâ and so on. Every Level 2 item must have this same syntax.
Same for Level 3:
The Level 3 items are again sorted by number, so they inherit their parentâs âaâ and their grandparentâs â4â. Again, it is just a matter of using the same syntax: all Level 3 items must have . Notice they donât need to be directly under âLiquidâ in the table, because the whole thing can be sorted later, or in the repeaterâs OnLoad event to make it a default.
*I initially tried to use the âdot-numberâ ordering scheme, similar to what skb showsâalthough that whole prototype is also a different approach from mine. However, the sorting failed: all the Level 3 items went to the bottom of the list. It appears Axure interprets 1.1.1 as greater than 1.2 and 2.2 --so a properly sorted list should be:
__1
____1.1
______1.1.1
______1.1.2
____1.2
______2.1.1
______2.1.2
______2.1.3
etcâŚ
But it turns out that sorting by âOrderâ ends up looking like:
__1
____1.1
____1.2
______1.1.1
______1.1.2
______2.1.1
______2.1.2
______2.1.3
This is why I resorted to using an alphanumeric multi-ordered list sort, which does get properly sorted by Axure with:
__1
____1a
______1a1
______1a2
____1b
______1b1
______1b2
__2
____2a
______2a1
______2a2
etcâŚ
Here is a simplified accordion repeater, which uses no numbers or separate classification scheme in the repeater table.
This is the repeater structure:
All Level 1 items must have text in Level1 and empty cells in Level2 and Level3.
All Level 2 items must have parent in Level1, text in Level2 and empty Level3.
All Level 3 items must have grandparent in Level1, parent in Level2 and text in Level3.
As you can see, there is more text involved, so the setup trades off elegance for simplicity, albeit more copy & pasting. Level ownership is easy to understand, and alphabetical sorting (within levels) is still maintained.
Handling item clicks became easier and more elegant, but the filters a bit more complicated. For instance, to determine if an item is Level 1, you have to test for an empty cell in the Level2 column. To âopenâ a Level 1 item, it has to show all the Level 1 items and all its own child Level 2 itemsâbut not anything else. Thus filter for âis Level 1 or (Level 2 and child of me)â. This is the click code:
âŚand what the filter code looks like:
âŚSo I had to learn and pay attention to the difference between [[TargetItem.Value]]
and [[Item.Value]]
Basically, in a filter the TargetItem refers to the entire repeater list; the âtargetâ is the repeater. Item refers to a repeater cell, and in this case, since the command is coming from within the repeater cell, it basically means âmy stuffâ as opposed to âother rowsâ stuffâ --if that makes sense.
Hello,
I am trying to build an interface with left navigation sidebar, based on repeater. my inspiration was file from this post.
Would it be possible to please ask you to help on the prototype where I need to the sidebar to be fully visible, when clicking on arrow? Right now, in Preview I see only closed state. Also, arrow do now rotate back foe no reason.
Thank you. Hope that you would be able to help me with theses
Shell.rp (652.5 KB)
Shell_EDIT.rp (652.9 KB)
From Chelsea (Axure support):
You already have an OnLoad interaction on your sidebarâs repeater that filters the menu to hide all of your repeater options:
The OnLoad case for the âNavigation with sectionsâ repeater filters the navigation sections so that when the page is loaded, none of the repeater options are visible. Iâm going to add an additional action to the âlabel.L1-2â rectangle so that the filter is removed:
Then, for the second case for âlabel.L1-2â, Iâm going to fire the OnLoad for âNavigation with sectionsâ, so that the filter is added, and the menu options are hidden once again:
Lastly, Iâve added actions to both cases for this rectangle so that the first case sets the selection of âlabel.L1-2â to âtrueâ, and the second case sets the selection to âfalseâ. This effectively allows the cases to toggle between each other, which in turn allows the repeater to filter and unfilter. This also resolves the issue with your arrow not rotating back.
That is one complex repeater!
I canât really tell whatâs going on with the repeaterâthere is just so much there. Looks like the repeater OnLoad has a filter that collapses it. If you remove all filters on the repeater, it shows all levels (which means sidebar is fully visible, I assume.)
The code you have for the âCampaign Automationâ widget (which sits on top of the caret) doesnât immediately make sense to me⌠The OnClick has two cases which test whether it is selected or not, but I canât see that it ever gets selected, and there is no style for a selected state, so no way to tell for sure. There is also no code for OnSelected, OnUnSelected or OnSelectedChange so I donât think youâre really doing anything there.
The caret has a rotation up for OnSelected and a rotation down for OnUnselected, so youâre better off testing against that. However, in that Campaign Automation code you Rotate the caret instead of changing its selection state, which is very confusingâyou should just set the caret to selected or unselected and use that to control rotationâotherwise very hard to track what will or should happen there.
Looks like you are applying several filters which are doing the opposite? âŚOr nothing at all? The filters are testing against global variables which are not initiated (blank) on page load, so the first click would not apply either filter. I canât tell if they would ever be sufficedâŚ
To test some basic opening and closing of the sidebar (your Navigation with sections repeater widget) I moved your OnClick code to OnResize for safekeeping. I copied the âLevel 1â filter from the repeaterâs OnLoad and used that in the label.L1-2 OnClick, then tested against the caret.L1-peretz selection state. That at least opens and closes the sidebar. Maybe you can add back in the code lines that make sense to you and proceed from thereâŚ
Shell.rp (665.2 KB)
Thank you so much for your help and feedback!!! I started to work on this navigation 2 days ago, and I am trying to mimic real navigation that really complex.
I am doing it in stages. I will post my progress, as Iâll go forward.
Hi mbc66
Thank you for helping me with this difficult repeater-sidebar.
I worked all day on it and made a good progress.
Shell-to expend.rp (681.4 KB)
But I stuck again on two things that I canât figured out.
In real application âon page loadâ condensed sidebar always visible and âOverviewâ icon is selected like that:
If user enter mouse over sidebar it become extended:
and if user clicks on any of All tools/Top pages:
âOverviewâ page always selected.
In my prototype on page load all items under CA are not visible, and I like to make them visible
Another issue I have, when I select anything, other choices are become invisible and state âCampaign Automationâ jump to state âCAâ.
Thank you again for your help,
Natalie
It looks like youâve got most of this figured out. Nice job.
I would recommend just making the size of sidebar 64 px wide on the page. The OnMouseEnter event will size it to 280 px and youâre good to go. I assume it should collapse again when the mouse cursor is not over the sidebar, so you could add an OnMouseOut event, too. Likewise, most of your OnPageLoad actions can just be set up in the editor (and some of them already areâŚ)
So, the first item under âCampaignâ should be selected by default. That can be handled in the OnItemLoad for the repeater to set that rowâs column for âSelectedâ. Looking at the Nav repeater, this is already set up (the row for âOverviewâ has a âSelectedâ column set to âtrueâ and the text widget has a Selected style) but just needs a condition to assign the selected state. Iâm not sure why the âClassâ column has â3â for all the items which seem to be Class/Level2, but we can use that to identify the right item (label.L2a; This widget should also have a Selection Group defined so that only one instance of these (e.g., âOverviewâ) can be selected.) The blank OnItemLoad event that youâve started should be something like:
If [[Item.Class]] = "3" and [[Item.Selected]] = "true" set is selected of label.L2a to "true"
An Update Rows action can set that rowâs column for âSelectedâ to âyesâ:
[[Item.ClassL2atext == 'Overview']]
and assign the âSelectedâ column to âtrueâ.
Get rid of the Add Filter Level 1 action in the Nav repeaterâs OnLoad event. That is what is collapsing it.
Take a look at the code for that widget, label.L2a --there is a bunch of stuff there which I donât understand, but one of those Update Rows or Add Filter actions is likely collapsing it (maybe by triggering that OnLoad action which shouldnât be there. Also, that âCampaign Automationâ dp has a default state of âCAâ so anytime the repeater is updated, it would reset to the first state. So, I would move âCampaign Automationâ to the first state to handle that. You also set the state to CA in your OnPageLoad event, so that should work.
Hi mbc66,
Thank you so much for all of your great suggestions!
I was able to fix the majority of issues based on them. Truly appreciate it!
I have just a few more issues. If you could please give me your expert advice on them, would greatly appreciate it.
Shell-4.rp (1.2 MB)
Here is a Recording from real shell navigation
Thanks again,
Natalie
Not sure what is going on there⌠You do have two competing actions that set the size of sidebar dp to 64 px (OnPageLoad) and 65 px (OnLoad for sidebar). I removed both and these gaps donât show up. Somehow the repeater is changing when sidebar width changes. I suspect this is a collision of the repeater loading at the same time its container is changing. I set the default width of sidebar to 64px and the gaps donât show up. I donât know what youâre trying to do with the invisible shape widget but putting the âset size of sidebar to 280â on it instead of sidebar itself creates a âback and forth bouncingâ of the width. Better to keep the resizing actions on the sidebarâs OnMouseEnter and OnMouseExit.
That doesnât happen for me⌠(Win 10, Chrome) âŚMaybe fixes above fix this, too?
On your group.L1 widget (which would either be 'Class 1, Order 1! : âAll Toolsâ â or â Class 1, Order 2! : âTop pagesâ â you could test 'If [[Item.Order]] contains â2â â and then set your sidebar-filters dp to the correct state and show it.
Hmm⌠You cannot nest repeaters in Axure, so this looks like some approach to mimic that, using multiple states of a dynamic panel within a repeater? Yes, you could have a hidden dp with N states (N = number of Class 3 widgets in your menu) which gets shown when you click one of those menu items, then when hovered show a group of widgets as the âexpanded stateâ like you show for âNewâ above. This would get pretty complex to list all that out in your repeater sheet (adding columns for all that) which is already pretty complicated. âŚAnd youâd have to deal with the width of sidebar when showing/hiding all that⌠I would try creating a separate repeater for this flyout menu and coordinating selection/states with the Nav repeater. So, when âEmailâ is clicked, the corresponding âEmailâ row or dp state is set and shown.
From Axure Support (Simon):
First, I changed the condition of the first case of the âNavigation with sectionsâ repeaterâs OnItemLoad event (named âCampaign automationâ) to evaluate for âItem.Classâ instead of âItem.ClassL1textâ to avoid confusion, since the value stored in the ClassL1text column of the first item is â2â as well. Then in the Set Panel State action of the same case, I edited it so that it would set the panel state of the âCA-titleâ dynamic panel to the value stored in the repeater itemâs âLevel1aâ column:
This makes it so that the CA-title panel is set to which ever stateâs name matches the value stored in the Level1a column (e.g. if the value in Level1a is âCampaign Automationâ, the panel will be set to the âCampaign Automationâ state). Because the values of these names will need to match up exactly, youâll want to change the state currently titled âCompaign Automationâ to âCampaign Automationâ instead.
Then, to complete this interaction, youâll want to add âUpdate Rowâ actions that change the value stored in the Level1a column to the CA-title panelâs corresponding state. I ended up adding these to the âOnMouseEnterâ and âOnMouseOutâ events of the âsidebarâ dynamic panel and âinvisible shapeâ group respectively, since these seem to be the main events determining which label should be displayed:
Thatâs it; now mousing in to the sidebar will update the Level1a columnâs value to âCampaign Automationâ and set the label to this value as well, and mousing out of the invisible shape group will do the same for the âCAâ label. Since the appearance of the label is now only determined by the value in this column (thanks to the first adjustment made in the OnItemLoad event), the label will persist even when the repeater items are reloaded. Overall this interaction does have a few different elements to it, so feel free to use my edited file as a reference point.
Also, if youâre interested in learning more about how the set panel state portion of this approach is working, the following tutorial may help:
Shell-7_edited.rp (1.1 MB)
As for your submenu, it looks like only six items are showing because the hot spot widget within the repeater is currently setting the size of the âsubâ dynamic panel to the height value of â[[LVAR1.height * 6]]â, where it looks like âLVAR1â is referring to the size of one subentry rectangle. This is limiting the panel to a size thatâs only be able to show six submenu items:
Since the âReportsâ submenu contains seven items, the last item wonât appear in this case. To fix this, youâll want to change the height so that itâs instead being set to â[[LVAR1.height * 7]]â. Note that if you end up creating a submenu with more than seven items, youâll want to change this again to match the new maximum number of submenu items.
submenu-question.rp (298.5 KB)
Hi mbc66,
Thank you for all your suggestions!
I am back with new questions
shell nav with flyout menu.rp (1004.2 KB)
From my file:
I think I need expert help, because I lost
If you could please help me out with the above issue, I would greatly appreciate it!
Thank you so much!
Natalie
See if this helps:
shell nav with flyout menu.rp (1.1 MB)
I took all your hidden flyout menu repeaters and put them in states for a âSubsetMenuâ dp. Clicking on an L2 item in the left nav will set the SubsetMenu dp to the state with itâs text label (as defined by [[Item.ClassL2text]]) and moves that dp to its y-location. So, I donât think you need the last two cases in your OnItemLoad event, and you donât need the FlyoutMenuOrder column.
Absolutely. Wow! This is such a great and simple solution!
Thank you so very much, mbc66!!!
Hi there,
I have been trying to achieve what you guys are talking about. And to be frank I am blown away with the complexity of those queries.
I have made the repeater as @mbc66 suggested and tried to copy the queries but somehow it doesnât work.
The pattern I am trying to do:
There is a list of Level 1 items
When you tap on one
All Child of the selected item are displayed
As you select a child it changes state to look like Level1
and so onâŚ
Here is the motion
Here is my file
accordion-inception (261.7 KB)
So if you have a minute to help a fellow axure folk please help me out