Dropdown List: multi-level hierarchy

Hi Everyone,

I’m evaluating Anvil (my background is Dundas BI/Dashboard) and am trying to build a multi-level hierarchy with multi-select (only at the same level).

All of our data is on-premise and so the hierarchy structure will need to be formed by SQL Server uplink code. I do have the uplink part working already and the code to form the hierarchy, from a previous Dundas project.

As an example, just think of a large corporate with city offices in countries: so level 0 would be “Country” and level 1 the office city “Locations”.

After select, I’ll need to send a hierarchy level and then a string of either city or country ids (depends on the level you made the selection) to my SQL Server SPs as a filter for subsequent querying. I can see this is kind of how the dropdown list box works right now, with id and name pairs.

Just wondering if anyone has worked on this kind of issue before?

Regards, Greg.

Hi @greg.bull, welcome to the forum.

Am I right in saying you want to:

  • create a UI with dropdown lists.
  • The selection will result in a server call.
  • The server call (through uplink) will run an SQL query to your database
  • Then present it to that data to the user?

This was a nice recent example from the forum that might showcase something similar:

Polymorphic ecosystem view for charities, nonprofits, etc

On the front end you could have your dropdown lists and then a Button component.
the button click event could then call the server function sending the arguments country and location.

The return value from the server call could be the rows from the database that you could then use to populate your UI.

Here are some relevant anvil tutorials that might give more insight.

Anvil | Building a Web App with an External Database

Anvil | Dashboards

Anvil | Data Grids: Displaying Data In Tables

Let us know what else you need…

HI Stu, Thanks for getting back to. I’m only really interested in the first two steps you list at present, as I think I’ll be able to cope with the latter two.

Here’s where I am right now. I can already load and make selections from a dropbox list, and pass these back to SQL Server to filter a datagrid. But, I can’t find a way to enable multiple items to be selected, or see how to make a multilevel control. I’m looking for this to be a single dropdown of 2 levels, not two seperate dropdown boxes - that would take up too much real estate on the screen. I’ve been through the tutorials you mentioned - very helpful!

1 Like

@david.wylie solved a similar problem for me in this post. It worked like a treat (thanks David!)

2 Likes

A multilevel dropdown component.

How many levels deep is it?
Do you have a mock up of how you’d like it to look?

If it’s a complex layout it’ll need a little thought, since the dropdown component is just for single level lists. But anything is doable…

My initial thinking might be - if it’s only a few levels deep you could have a few dropdown components. Depending on the structure the higher level values could be updated based on the lower levels selected…

If clutter is a problem then you could do the selection on its own form or in a (large) alert rather than on the same form that displays the data.

1 Like

You use a repeating panel.
In the form used for the repeating panel you can put a link.
In the click event of the link you can change a selected form variable and the background color of the form or the role of a link or the text of a link or of a label.
At this point you have a repeating panel containing forms that respond to click events and show you whether they have been selected or not.

Then you can loop through the repeating panel’s items and ask each form if it has been selected.

1 Like

Stefano’s approach is correct. In Anvil, you would have two repeating panels:
self.repeating_panel_countries
self.repeating_panel_locations

Whenever a user adds/removes a country via the first repeating panel, you would use the uplink to find locations. In pesudo-code:
SELECT * FROM LOCATIONS WHERE country IN (“country1”, “country2”)

Then have Anvil set the items on the second repeating panel
self.repeating_panel_locations.items = {locations}

Yes, I agree. Thanks very much to everyone for their prompt feedback. I may need some help on setting this up later, but for now, i just needed to find an approach.

ah yes i only read multi-level and missed the multi-select :man_facepalming: