Dropdown loaded each with a different entity

RE: Dropdown loaded each with a different entity

Stewart Burchell — Thu, 27 Jun 2019 08:23:00 GMT

Yes, exactly. Or was that a question?

You have two implementation options:

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
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.

RE: Dropdown loaded each with a different entity

alexc0002 — Thu, 27 Jun 2019 08:15:48 GMT

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

RE: Dropdown loaded each with a different entity

Stewart Burchell — Thu, 27 Jun 2019 08:11:41 GMT

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

RE: Dropdown loaded each with a different entity

alexc0002 — Thu, 27 Jun 2019 08:09:52 GMT

Thanks Stewart.

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

RE: Dropdown loaded each with a different entity

Stewart Burchell — Wed, 26 Jun 2019 14:32:44 GMT

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.

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
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)
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
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",{}),
            )
          }
        )
      }
    )
  }
)

RE: Dropdown loaded each with a different entity

Malleswari Talakola — Wed, 26 Jun 2019 14:14:03 GMT

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.