setFieldValue and new FieldDropdown

[Štěpán Vích]

Hi, I am writing my application for visual programming of a robot and i encountered this problem. When i want to change the dropdown of a block element i get this error message in browser console:

Uncaught TypeError: a.replace is not a function
    at Blockly.FieldDropdown.Blockly.Field.getDisplayText_ (blockly_compressed.js:1364)
    at Blockly.FieldDropdown.renderSelectedText_ (blockly_compressed.js:1563)
    at Blockly.FieldDropdown.render_ (blockly_compressed.js:1559)
    at Blockly.FieldDropdown.Blockly.Field.getSize (blockly_compressed.js:1363)
    at Blockly.BlockSvg.renderCompute_ (blockly_compressed.js:1488)
    at Blockly.BlockSvg.render (blockly_compressed.js:1483)
    at Blockly.FieldDropdown.Blockly.Field.forceRerender (blockly_compressed.js:1365)
    at Blockly.FieldDropdown.setValue (blockly_compressed.js:1558)
    at Blockly.BlockSvg.Blockly.Block.setFieldValue (blockly_compressed.js:1399)
    at main.js:109

My code looks like this:

block.setFieldValue(new Blockly.FieldDropdown(["option1": "1", "option2": "2"]), "BLOCK_LIST");

The code of the block looks like this:

Blockly.Blocks['block_definition_if'] = {
  init: function() {
    this.appendDummyInput()
        .appendField("If Podprogram")
        .appendField(new Blockly.FieldTextInput("program"), "BLOCK_NAME");
    this.appendStatementInput("NAME")
        .setCheck(["repeat", "while", "do_while", "if_statement"]);
    this.appendDummyInput()
        .appendField("then")
        .appendField(new Blockly.FieldDropdown([["program1","PROGRAM1"], ["program2","PROGRAM2"], ["program3","PROGRAM3"]]), "BLOCK_LIST");
    this.appendDummyInput()
        .appendField("else");
    this.setPreviousStatement(true, ["block_definition", "block_definition_if"]);
    this.setNextStatement(true, ["block_definition", "block_definition_if"]);
    this.setColour(90);
 this.setTooltip("");
 this.setHelpUrl("");
  }
};

Can everybody tell me, where i make mistake?

[Amber B]

Well, two things.

1. new Blockly.FieldDropdown(["option1": "1", "option2": "2"]) should be new Blockly.FieldDropdown([["option1","1"], ["option2","2"]]). Blockly Field Dropdowns take arrays of arrays where each nested array is an option to display and its internal value.

2. I'm a little unclear as to what you're trying to accomplish with that block.setFieldValue setup. The BLOCK_LIST field doesn't seem to have any options which correspond at all to the value you're trying to pass in, and you certainly wouldn't put a new field in as either argument to block.setFieldValue. I would expect this to look more like block.setFieldValue("PROGRAM2", "BLOCK_LIST").

[Štěpán Vích]

1.You are right, in the Blockly.FieldDropdown i have

new Blockly.FieldDropdown([["option1","1"], ["option2","2"]])

But even with this array it doesnt work.

2. I pass dynamically generated array of arrays, so user will choose which option he can.

[Amber B]

Oh, so you want to change the options available in the dropdown? You definitely don't want to use setFieldValue for that, then; that function is to set the option selected in the field. What you want to do is pass in a function which will generate the available options. For example, you could do something like:

function generateOptions(){
    if(this.value === 'a') {
        return [["program1","PROGRAM1"], ["program2","PROGRAM2"], ["program3","PROGRAM3"]];

        } else {

            return [["option1","1"], ["option2","2"]];

        }

}

this.appendDummyInput()
        .appendField("then")
        .appendField(new Blockly.FieldDropdown(generateOptions.bind(this)), "BLOCK_LIST");

You would of course need to change generateOptions based on the conditions when you need the different options available, and then update the values used in generateOptions where needed.

[Štěpán Vích]

Thanks, this is what i need.