Dependent select lists - JSON datasource

Configure the datasource

The first step is to configure the data source, this is easily done, just follow our documentation and adapt it to your own configuration. You can either set a local JSON file or a URL data source that return JSON format, the field configuration is equivalent in both cases.
Let us say our data are organised in different tables.

For testing purposes, you can also use a URL data source and set the following URL: https://pastebin.com/raw/fiKLgX3T. This will provide the same JSON data as shown above.

Create the Connect fields

Creating the Elements Connect fields is pretty straightforward and is described here in our documentation.

We require 3 fields:

• Connect Live Text: Continent

• Connect Live Text: Country

• Connect Live Text: City

Configure the Continent selection field

The first select list is simple, it is supposed to fetch all the Continent names that are stored in the continent table. We are going to use the id attribute as the key, so that this value will be used to configure the next select lists.

Configure of the Edit view, from the "Edit" tab:

Root element

$.continents[*]

Columns:

• First column: 

  • Name: id 

  • JSON path: $.id

• Second column

  • Name: continent_name 

  • JSON path: $.continent_name

Key

0

This number refers to the column number in the result set (numbering starts at 0).

This is the value stored in the customfieldvalue table in the Jira Database. It's use to retrieve the selected value when the field is edited.

You can find more information about how to configure the edit view here.

Editor 

Select list

Selection

The user can select only one value

Columns

1

Template

{1}

Configure the Country selection field

The values that are displayed in the Country field needs to be different depending on what value is selected in the Continent field. The JSON file table contains an attribute that will be useful to determine which country value should be displayed. The continent_id attribute (in the countries array) contains the id of the corresponding continent. That attribute must match the continent that has been selected.

Configure of the Edit view, from the "Edit" tab:

Root element

$.countries[?(@.continent_id==$issue.get("Continent"))]

Columns:

• First column: 

  • Name: id 

  • JSON path: $.id

• Second column 

  • Name: country_name 

  • JSON path: $.country_name

Key

0

Editor 

Select list

Selection

The user can select only one value

Columns

1

Template

{1}

 Note how the Edit query depends on the Continent value that has been previously selected. This dependency also appears in the Fields section of the Elements Connect administration page under the Dependencies column.

Configure the City selection field

Almost done, the last field is the City field. The configuration here is very similar to the previous one, except that here we are going to match the country_id attribute with the value that has been selected in the Country field.

Configure of the Edit view, from the "Edit" tab:

Root element

$.cities[?(@.country_id==$issue.get("Country"))]

Columns:

• First column: 

  • Name: id 

  • JSON path: $.id

• Second column 

  • Name: city_name

  • JSON path: $.city_name

Key

0

Editor 

Select list

Selection

The user can select only one value

Columns

1

Template

{1}

And that's it. You have configured single select dependent fields that you can start using right away.

Can I configure multi-select dependent fields?

And what if Country field is a multiple value field? If, for example, we select Iceland and Australia, could we propose all the cities from those two countries in the City Elements Connect field? The answer is YES OF COURSE.

Configure the Country selection field

Country field configuration is the same as in the example above, you just should choose 'Multiple value' selection option.

Configure the City selection field

Here the configuration is almost the same as above, exact that Root element filter will be a little bit different. Since $issue.get("Country") will now return a list of selected country ids, we should transform it to a list.

Root element:

$.cities[?(@.country_id in [$issue.get("Country").stringList()])]

And we are done. You are ready to start using your dependent JSON fields.