Hello everyone. I’m sure this has probably been asked before but here we go again…
Currently I have the standard sidebar with a ColumnPanel in it. It is shown and hidden if you hit the hamburger icon.
What I’m looking to do is implement a collection of hierarchical “icon text” rows inside the column panel, meaning the structure can take on a form like:
- Icon1 Text1
- Icon3 Text3
etc…
To illustrate further I’m including some mock pictures of what I’m wanting…
Sidebar not shown ^
Sidebar shown with first level of icon text rows showing ^
Sidebar shown with second level of icon text row showing after clicking “Account” row.
Idk, maybe having nested RepeatingPanels would be better?
I would probably just put the first level of links each in their own linear panel (so you can access them independently). Set the link’s click event to add a new component to the corresponding linear panel. That new component would be made up of a spacer (for indentation) and another link (the second level).
1 Like
You could also build the structure out of components as @alcampopiano suggests and then programmatically show or hide each level using click event handlers.
2 Likes
I’m thinking about using nested skiplists to implement a generic DAG. Need to verify that when I add a node dynamically it is put in the correct position in o(log(n))
I’m still not really sure how you keep track of children when adding them to the linear panel, any hints?
Here’s what I know how to do…
https://anvil.works/build#clone:H6ZFIS3DZ4PWMDRN=5RFYS3DB767CZ4LR43MUYRHL
Here’s how I’m thinking of implimenting the showing and hiding of child nodes:
Create a Parent and Child class. Parent has a reference to the ColumnPanel object. Each Parent has a collection of Child.
@nathanguyette I got around this by adding buttons under the ‘parent’ link in the menu panel. The buttons start hidden and when ever the corresponding link is clicked, the link role is set to ‘selected’ and the button is programmatically made to be visible. When you select another parent link, there is a ‘clear content’ function which sets all the links’ roles to default and sets the buttons to hidden again. It does this by checking the type of each component. This works really well for me.
Hopefully this makes sense and is in the vein of what you are trying to achieve. I will try post some code and a gif of it working tomorrow when I am at a computer.
2 Likes
Humm… I think I know what you are getting at, though in my case the buttons don’t start out as hidden. I’ll do some more fiddling around and see what I can get 
1 Like
Ok, I’m nearly there. The only thing I need to figure out is how to prevent the menu bar from closing when I click on a parent… (Edit: nvm, Anvil was just acting screwy I guess) This works! If you have any ideas on how to make the code cleaner though, let me know
https://anvil.works/build#clone:H6ZFIS3DZ4PWMDRN=5RFYS3DB767CZ4LR43MUYRHL
One little thing I can’t figure out… when I click on a child button element, the child onlick function gets raised, and then after, the parent onclick function gets raised… I only want the child onlick function to be raised! How do I fix this? In the app, this relationship is the Button_1 child and the Bids parent
Clicking the Button_1 child should bring up the BidSettings Form… But this doesn’t happen.
https://anvil.works/build#clone:H6ZFIS3DZ4PWMDRN=5RFYS3DB767CZ4LR43MUYRHL
So this happens if the button is inside the link. If you select the link you will see that the container goes around the button. It seems that there is a glitch with placement and it almost always puts the button in the link. If you put the button at the bottom of the panel and then place the other links you want below this it seems to work.
1 Like
Brilliant. That fixed it. Thank you so much!
1 Like
Awesome! Glad it worked out.
There is another option to show or hide components and that is to add a data binding that binds the visible property to the selected role of the parent link. Just another way of doing it… gotta love Anvil!
