Change dropdown values based on selection from another tab's dropdown

[jlandwerlen]

I agree it's not the most intuitive, I didn't know about it either until I saw someone discussing it.

[Transistor]

@ian.sebryk

... how would i have known that?

It's an undocumented feature. You learn it as a reward for hanging around the forum!

[pturmel]

@Transistor

undocumented

Tribal knowledge that goes back before v8--Vision offers to Copy/Paste window or template XML the same way. I think it is hidden to "protect" us from destructive operations.

I'd prefer the options be present but greyed-out if shift is omitted. Same protection, but without the secrecy.

Edit: Well, it also "protects" IA from support calls from users who blow away their work using these.

[amarks]

If you're overwhelmed by programmatically changing the options, there's always ye old "hide the dropdowns that aren't 'active' " method.

Somewhere in-between, you could construct 4 different custom object properties to hold the 4 option sets and select the one you want based on a binding.

I entirely misread the question. Is there a disable prop for each option in the options array for the dropdown? Typically, disabling an option would just gray that one out.

It's not very flexible, but you can use this binding on each option's isDisabled prop for each dropdown if they're all equal.

binEnc(
	{../Dropdown_0.props.value}={this.props.options[0].value},
	{../Dropdown_1.props.value}={this.props.options[0].value},
	{../Dropdown_2.props.value}={this.props.options[0].value}
)

[pturmel]

@amarks

I entirely misread the question

Consider dropping my sample into a view and looking at how it works.

[amarks]

I don't doubt that it works, but I think @ian.sebryk is saying the scripting is over their head and they don't have time to learn it.

Short answer, there's no way to dynamically remove options without a script. Since there are 4 identical dropdowns, this script needs to be reused and held in the scripting library.

However, we can disable options without a script.

1. We need a custom prop (dropdownOptions) on the view to hold the dropdown options array. Every dropdown can use the same set of options because if one has selected an option, it should be disabled for all of them. I opted to create the first dropdown and populate the options and then copy/paste into a custom prop object, rather than create it manually. The options are:

[
  {
    "value": 0,
    "label": "Pressure",
    "isDisabled": false
  },
  {
    "value": 1,
    "label": "Temperature",
    "isDisabled": false
  },
  {
    "value": 2,
    "label": "Flow",
    "isDisabled": false
  },
  {
    "value": 3,
    "label": "Level",
    "isDisabled": false
  }
]

(this list can be copy/pasted directly onto a custom prop)

2. We also need a custom object prop (selOption) on the view to determine when an option has been chosen by any of the dropdowns. We will use the val key as our comparator against the val prop of each dropdown, so these values could be easily updated later, if needed.

[
  {
    "val": 0,
    "isSelected": false
  },
  {
    "val": 1,
    "isSelected": false
  },
  {
    "val": 2,
    "isSelected": false
  },
  {
    "val": 3,
    "isSelected": false
  }
]

(this list can be copy/pasted directly onto a custom prop)

3. My dropdowns are labeled Dropdown_1 - Dropdown_4. isSelected keys for elements 0-3 within the selOption array need the following binding:

//option is selected by any of the 4 dropdowns (dropdown.value == selOptions.val)
{/root/Dropdown_1.props.value} = {view.custom.selOption[0].val}
||
{/root/Dropdown_2.props.value} = {view.custom.selOption[0].val}
||
{/root/Dropdown_3.props.value} = {view.custom.selOption[0].val}
||
{/root/Dropdown_4.props.value} = {view.custom.selOption[0].val}

Using view.custom.selOption[0].val for the corresponding dropdownOptions element (i.e. use 0 for 0, 1 for 1, 2 for 2, and 3 for 3).

4. Now, the individual options can be disabled by a simple binding on the isDisabled prop for each element of the dropdownOptions custom prop.

//disable this option if it is selected
view.custom.selOption[0].isSelected

Again, using view.custom.selOption[0].isSelected for the corresponding dropdownsOptions element.

5. Last step is to bind the options prop for Dropdown_1 - Dropdown_4 to the custom dropdownOptions prop. Also, disable the search option and show the clear button.

[pturmel]

@amarks

is saying the scripting is over their head

Again, I think you are further misreading. My example with my Integration Toolkit has no scripting at all. My supplement, to offer a solution that doesn't require my toolkit, has a single six-line script called from four places.

The point is that the architecture of the bindings in my example provides all of the desired functionality without ever needing to use .refreshBinding(). Because the flow of information follows best practices for use of view custom properties with input fields.

Really, try my example. With or without my Integration Toolkit. Look at each of the eight bindings to see how it ties together.

And note: either of my solutions could be easily tweaked to disable options instead of hiding them.