Dropdown loaded each with a different entity

Hi, 

I try to have two dropdowns loaded each with a different entity. In turn, the two are related. That is, when I make the selection of one of them, I should only take the values ​​in the second that belong to the first one. Typical Province Community.

Thank you very much, best regards

  Discussion posts and replies are publicly visible

  • 1. You can save the value of second dropdown variable to be shown after selection into the first dropdown Saveinto(a!save).

    2. or, you can write a showwhen condition on each dropdown, and define as if selection label is >1 show first label related dropdown, > 2 second label dropdown etc.

  • So, let's approach this methodically. I'm going to use as an example two classifications - Fruit and Vegetables - as the values for the first drop-down, and then a few examples of each type for the values in the second drop-down.

    1. You need to find a way of relating the data. Typically we can put these into two database tables, with one table holding 'Fruit' and 'Vegetables' and the second holding all the examples but with a Foreign Key that points to either 'Fruit' or 'Vegetable' in the first table
    2. In your interface you will load the values of the first drop-down, whilst the second drop-down will initially be empty (and even not visible if that is the UX you want to achieve)
    3. When you pick a value in the first drop-down you can use the associated key to retrieve all of the related items from the second table using it's value to match the values in the Foreign Key column
    4. Lastly you'll need to also cater for the scenario where a null value is selected in the first drop-down (which should clear out the content of the second drop-down)

    The main thing is to design the data model to allow the contents of the second-drop down to be a sub-selection of the full set of data, based upon the value selected from the first drop-down.

    Here's an example where I've hard-coded the list of data into the load() variables. but you may well want to manage the data in a database and retrieve it from there.

    load(
      local!classifications: {
        {ClassificationKey: 1, classification: "Fruit"},
        {ClassificationKey: 2, classification: "Vegetable"}
      },
      local!examples: {
        {ExampleKey: 1, ClassificationKey: 1, example: "Apple"},
        {ExampleKey: 2, ClassificationKey: 1, example: "Banana"},
        {ExampleKey: 3, ClassificationKey: 1, example: "Cherry"},
        {ExampleKey: 4, ClassificationKey: 2, example: "Artichoke"},
        {ExampleKey: 5, ClassificationKey: 2, example: "Broccoli"},
        {ExampleKey: 6, ClassificationKey: 2, example: "Celery"}
      },
      local!selectedClassification: tointeger(null),
      local!selectedExample: tointeger(null),
      local!exampleSubset: {},
      {
        a!columnsLayout(
          columns: {
            a!columnLayout(
              contents: {
                a!dropdownField(
                  label: "Classification",
                  value: local!selectedClassification,
                  saveInto: {
                    local!selectedClassification,
                    a!save(
                      local!selectedExample,
                      null
                    ),
                    a!save(
                      local!exampleSubset,
                      local!examples[fn!wherecontains(save!value,local!examples.ClassificationKey)]
                    )
                  },
                  placeholderLabel: "---Select a Classification---",
                  choiceLabels: local!classifications.classification,
                  choiceValues: local!classifications.ClassificationKey
                )
              }
            ),
            a!columnLayout(
              contents: {
                a!dropdownField(
                  instructions: local!exampleSubset,
                  label: "Example",
                  value: local!selectedExample,
                  saveInto: {
                    local!selectedExample
                  },
                  placeholderLabel: "---Select an Example---",
                  choiceLabels: fn!index(local!exampleSubset,"example",{}),
                  choiceValues: fn!index(local!exampleSubset,"ExampleKey",{}),
                )
              }
            )
          }
        )
      }
    )

  • Thanks .

    Yes I need to manage the data in a database and retrieve it from there.

    I must load the data from the database, not with local variables

    Thx

  • So, everything will be effectively the same other than the assignment of the data to the local! variables.

  • On your example, Fruit and Vegetable are in one table and the values ​​of the second dropdown in a different one. In turn the two related. In such a way that when the value is selected in the first dropdown, the query must be made to take the values ​​of the second table.

    Thx

  • Yes, exactly. Or was that a question?

    You have two implementation options:

    1. retrieve the data for the first drop-down, and only retrieve the data for the second drop-down when a value in the first is selected
    2. retrieve ALL the data for BOTH drop-downs and perform the relevant look-up locally, exactly as in my example

    Which you choose depends on how much data there is, and how often you think someone will pick an option from the first drop-down.