I’ve just started working on an app that includes, as one of its components, a nested tree of dates. I want users to be able to quickly navigate through and select: Years -> Quarters -> Months -> Weeks -> Days. I’ve implemented this as a series of repeating panels along side check boxes that toggles the children panels’ visibility.
Once the app is running, this seems to work really well, both in terms of UI/UX, and performance. But, within the Anvil IDE, loading and editing has slowed to a crawl and are almost unusable.
I’m still testing, am currently don’t have the Day’s repeating panel included (which I suspect is going to make performance exponentially worse), and am just using some random test data. But here’s a link to the app:
https://anvil.works/build#clone:S2TS7IPRJHFHAPGR=GV5DBHGRYMWDE2B6IFBTFJPA
Is there anything obvious that I’m doing wrong or another implementation approach I can take?
Hi @jessime.kirk, welcome to the forum!
I had a look at your app. You are correct that the slow performance in the IDE is due to the very long and nested repeating panels. Sure enough, if you delete the repeating panel on the main page, the app is zippy again.
I know that others here (including myself) have worked with tree-like design patterns and so it should be absolutely possible to do what you want to do and have a fast IDE.
My initial sense is that your tree design could be done without repeating panels. Rather, you can design a general “child node” that is used for nesting and build it programmatically when needed (i.e., when there is a click event, add the nested component).
For example:
Create a form that holds a single node’s design information only (not its content per se). See the image below. Let’s call this form “child node” for the sake of this example. You can see that it has a right-justified container at the bottom and this is used to hold additional nested elements (i.e., other instances of itself).
The tree design could follow this pattern:
- main node (column panel, or linear panel)
- child node 1 added to main node’s container
- child node 2 added to child node 1’s container
- child node 3 added to child node 2’s container
You can end up with something like this, which is very zippy and doesn’t require a jam-packed IDE:
Of course you will have to control the content that is passed to each node each node but that is certainly possible to determine since you know where the user clicks.
I would suggest searching the forum for “tree-like patterns” and perhaps giving the above approach a try to see if it works for you.
1 Like
@alcampopiano, thanks for the quick response! I’ll try out something a little more custom like you suggested and let you know how it goes. I’m not looking for anything particularly complicated, so it shouldn’t be too difficult. I just didn’t want to reinvent the wheel if there was already a standard way of doing it.
@alcampopiano Making a “node” form was easier than I thought, and worked really well. Thanks for the help!
1 Like
My pleasure! I can remember struggling with that idea for a while when I was building something similar in the past. Glad it worked out.