Select in connection with other data

[Karlek]

Hi guys,

What would be the best approach to my problem? I have two select fields in a row, in one I select a SW and in the other I would like to select a version based on the selected SW. The SW and versions are chronologically written in another table, where for each SW there are several rows with different versions. My wish is that when I select a SW in one select field, I move to the next one, where I can select only the versions of the SW selected previously?

TIA,

Stane

[Kate]

Hello @Karlek

I think your case is described in this guide: Row context referencing | UI Bakery Docs
Do you think it could work for you?

Thanks!

[Karlek]

Hi Kate,

Thank you. Now I remember that I saw this. At my age, we tend to forget things.

[Karlek]

The example is roughly what I want. I want the first choice options to be dynamic as well. From the query I get, for example: {“si.lab4pay.pos.android”:[{“value”:“2.1.6”},{“value”:“2.1.7”},{“value”:“2.1.8”}],“com.trsys.bankartpayment”:[{“value”:“2.10.0”},{“value”:“2.9.0”}]} and I would like to be able to select the App package name options in the first field, which are also dynamic, and the versions in the second field, because this can change daily. Is this possible?

TIA,

Stane

[Max]

Hi @Karlek,

I have made this simple example, see if it works for you.

First, I’m returning the example data you shared in an action, this would be the query call on your side.

Then I placed two select components:

In the Options setting of the ‘App package’ one, get the package names:

And finally, in the Options setting of the ‘Version’ select, get the appropriate versions if a package is selected in the ‘App package’ select component:

And now you can select the package and version:

[Karlek]

Hi Max,

I was little to quick. It is working fine when I use two separate select fields, but when I try to implement in new Row in table then somehow won’t work. Selection of App package is not filled or I can’t find it and therefore I can’t select the version?

TIA,

Stane

[Max]

This was a bit tricky to make it work, but I managed to make the selects work in a table. I hope this is what you are asking about .

From what I understood, you’d like to have the selection of the app package and version inside a table, very likely as Select/Tag columns.

So I made a simple setup with exactly that:

1. Add table component

2. Configure the columns of the table to your liking, but we obviously need at least a column holding the primary key and two columns of the Select/Tag type for the app & version select

   

3. Create an action or state variable that holds all the options (just like in my previous answer). I created an action called getOptions that looks like this:

   return {
      'si.lab4pay.pos.android': [
         { value: '2.1.6' },
         { value: '2.1.7' },
         { value: '2.1.8' }
      ],
      'com.trsys.bankartpayment': [
         { value: '2.10.0' },
         { value: '2.9.0' }
      ]
   };
   

4. Now set the Options setting of the app package Select/Tag column to this:

   {{Object.keys(actions.getOptions.data)}}
   

   

5. Finally the “tricky” part. Set the Options setting of the version Select/Tag column to this:

   {{ draftRow.app ? actions.getOptions.data[draftRow.app].map(version => version.value) : [] }}
   

And now you should be able to dynamically select the app package and the corresponding version:

If something is not working, check if the names of the actions, columns, etc. match.