Easily Create Custom-dependent Drop-downs in Mendix

Using non-persistent entities

Easily Create Custom-dependent Dropdowns in Mendix

A good user experience when using an app is essential, but UX extends beyond the user interface. Overwhelming the user with too much data can undo even the most elegant app design. Filtering the data your users interact with makes your app more user-friendly and a joy to use.

Use case

Suppose I have a requirement to display a list of countries in a dropdown. When I select a country from the list, states should populate filtered by the country, and when I select the state, cities should populate respectively.

How to build it

To accomplish this use case, first, I add an NPE or non-persistent entity (I named my entity ‘DataPopulator’) which should have an association with every other entity.

We are going to use this entity on our page as a parent data view. Now let’s see how this works:

On the page where you want to create the dropdowns, place a data view and set its data source to the microflow. In that microflow, add a create activity and create an object of DataPopulator, and don’t forget to set it as the return type for the microflow.

Now add three reference selectors to the page, one for each field (country, state, and city)

Your data view should look like this:

Now in every reference selector apply an on-change event to call a microflow that refreshes the NPE (you can use the same microflow, as it is only needed to refresh the NPE “DataPopulator”).

Your on-change microflow should look like this:

Now for the first reference selector:

The first reference selector should populate and because of the on-change event, it will refresh the data on the page when the user interacts with it.

For the second reference selector, we are going to set it up so that it will get populated after the selection of the first reference selector.

To do so, we will need to create a microflow and use it to retrieve the selectable objects for the reference selector.

Below you can see the selectable objects tab and the microflow which will be used as the source for the selectable object.

Selectable object tab of the first reference selector

Source microflow of the selectable object tab of the first reference selector

As you can see, this microflow retrieves the selected country. It uses the association which was set on the first reference selector when the user selected the country.

The third reference selector will be set in the same way as the second. This time it uses the state to retrieve the cities. Let’s see its microflow:

Source microflow for the selectable object tab of the second reference selector

With this, your newly created dependent dropdowns are ready for use. You can take this to the next level and hide the empty reference selectors on the page until the user has selected the fields which populate them.

I hope you enjoyed reading this, please leave any comments or suggestions below.

Read more

Reference Selector

Conditional Visibility Section

From the Publisher -

If you enjoyed this article you can find more like it on our Medium page. For great videos and live sessions, you can go to MxLive or our community Youtube page.

For the makers looking to get started, you can sign up for a free account, and get instant access to learning with our Academy.

Interested in getting more involved with our community? Join us in our Slack community channel.