Dynamically disabling a drop down menu

[1207...@brookes.ac.uk]

Hi there

I've got the following block that has 3 drop down menus. I want 3rd dropdown menu ("colour2") to be disabled/enabled based upon whether option "1" has been picked in the 1st drop down menu ("function"). Is there a way to grey out a dropdown menu dynamically, or do something similar in order to get this outcome? 

The alternative for me is to have 3 separate blocks for each function, but I'd much rather have one dynamic block to do everything. 

Thanks 

Ben 

Blockly.Blocks.set_leds = {

  helpUrl: null,

  init: function() {

this.setColour(0);

    this.appendValueInput("NAME")

        .setCheck(null)

        .appendField("Set LEDs");

    this.appendDummyInput()

        .appendField("to function")

        .appendField(new Blockly.FieldDropdown(this.FUNCTIONS), 'Function')

        .appendField("with colour")

        .appendField(new Blockly.FieldDropdown(this.COLOURS), 'Colour1')

        .appendField(new Blockly.FieldDropdown(this.COLOURS), 'Colour2');

    this.setInputsInline(true);

    this.setPreviousStatement(true, null);

    this.setNextStatement(true, null);

  }

};

Blockly.Blocks.set_haze.FUNCTIONS =

    [

["1", '1'],

["2", '2'],

["3", '3'],

    ]; 

    

Blockly.Blocks.set_haze.COLOURS =

    [

["Off", 'off'],

["White", 'white'],

["Red", 'red']

                ["Blue", 'Blue']

                ["Green", 'green']

    ]; 

[Anuj Khandelwal]

Hey Ben,

I believe it could be worked out by adding an onchange function to your block declaration, and hiding the third dropdown according to the value that is selected in the first dropdown. The code would be something like this:

onchange : function() {

var val = this.getField( 'Function' ).getValue();

if( val == this.FUNCTIONS[0] ){

this.getField('Colour2').setVisible( false );

}else{

this.getField( 'Colour2' ).setVisible( true );

}

this.render();

  }

Hope this helps!

[1207...@brookes.ac.uk]

Thanks Anuj. That has worked for me. I still haven't figured out if 'greying out' elements is possible, but this solution does the job for me cheers

Ben 

[Adrian Buzea]

There is no need to add that in the change event of the entire block, you can just add it in the change event of the dropdown. I see a field does have a disabled property but setting it to true apparently does not disable it. 

You can instead remove /add the dropdown according to the option selected.

Blockly.Blocks['set-leds'] = {

  init: function() {

   this.setColour(0);

   this.appendValueInput("NAME")

       .setCheck(null)

       .appendField("Set LEDs");

    this.COLOURS =

   [

     ["Off", 'off'],

     ["White", 'white'],

     ["Red", 'red'],

     ["Blue", 'Blue'],

     ["Green", 'green']

   ]; 

   this.FUNCTIONS =

   [

     ["1", '1'],

     ["2", '2'],

     ["3", '3']

   ]; 

   this.appendDummyInput()

       .appendField("to function")

       .appendField(new Blockly.FieldDropdown(this.FUNCTIONS, function(option){

          var input = this.sourceBlock_.getInput("ti");

          var fieldExists = this.sourceBlock_.getField('Colour2') !== null;

          if(option != '1' && fieldExists)

            input.removeField('Colour2');

          else if(option == '1' && !fieldExists)

            input.appendField(new Blockly.FieldDropdown(this.sourceBlock_.COLOURS), 'Colour2');

       }), 'Function')

       .appendField("with colour")

       .appendField(new Blockly.FieldDropdown(this.COLOURS), 'Colour1');

  this.appendDummyInput("ti")

       .appendField(new Blockly.FieldDropdown(this.COLOURS), 'Colour2');

   this.setInputsInline(true);

   this.setPreviousStatement(true, null);

   this.setNextStatement(true, null);

  },

};