Dynamically update the block field value in workspace?

1,519 views
Skip to first unread message

Hank Lee

unread,
Jan 24, 2018, 2:02:11 AM1/24/18
to Blockly
Hi Blockly team
we are trying to do some work based on blockly. it's very good tool.
we want to dynamically update the block field value, value comes  from some input on the page .
I monitor the input value ,and try to update it to block field.


Try to update the value by with setFieldValue method in js. 
I call this function once input field change, 
Blockly.Blocks['temp'].update();
but it remind me it's not a function.

here is the block definition.
The init function is generated by blockly development tool, the update function is written by me.

Blockly.Blocks['temp'] = {
  init: function() {
//var template=my_temp;
    this.appendDummyInput()
        .setAlign(Blockly.ALIGN_CENTRE)
        .appendField("template->case");
    this.appendDummyInput()
        .appendField("template_name:")
        .appendField(new Blockly.FieldTextInput("temp_name"), "temp");
    this.appendDummyInput()
        .appendField("parameters:")
        .appendField(new Blockly.FieldTextInput("p1=xx;p2=xx;"), "parameters");
    this.setPreviousStatement(true, null);
    this.setNextStatement(true, null);
    this.setColour(315);
debugger;
 this.setTooltip("");
 this.setHelpUrl("");
  },
### I try to initate a  update function. 
update: function() {
  this.setFieldValue("tesetsdf","temp");
  }
};


if it not work. Do you have better method to update the block field value dynamically?

Thanks 

Andrew Stratton

unread,
Jan 24, 2018, 8:39:25 AM1/24/18
to Blockly
Hi Hank
  Your current approach won't work, I think, because of the value of this in your invocation of update - I think it might work if you use .call() to set the value of this to the block.

  You could also use an event handler to detect changes and then that triggers/invokes the update.  It all depends how you update...

  e.g. I use events to show/hide an 'extra' set of inputs, like this:



Hope this helps
  Andy

Hank Lee

unread,
Jan 24, 2018, 8:38:39 PM1/24/18
to Blockly
Hi Andy
thanks very much. do you know where to find the document for the .call()? I don't know how to use that.
I try to exportxml, modify the xml, and then domtoworkspace. 
.... but finally found it didn't work. the domtoworkspace only care about the block and id. don't care the filed value. 
Looks like the call is the only method. 




在 2018年1月24日星期三 UTC+8下午9:39:25,Andrew Stratton写道:

Hank Lee

unread,
Jan 24, 2018, 9:49:22 PM1/24/18
to Blockly


在 2018年1月25日星期四 UTC+8上午9:38:39,Hank Lee写道:
Hi Andy
thanks very much. do you know where to find the document for the .call()? I don't know how to use that.
I try to exportxml, modify the xml, and then domtoworkspace. 
.... but finally found it didn't work. the domtoworkspace only care about the block and id. don't care the filed value. 
Looks like the call is the only method. 


Untitled.png

Andrew Stratton

unread,
Jan 25, 2018, 7:49:37 AM1/25/18
to Blockly
Call is a standard part of Javascript - so you should probably write:

let tmp = Blockly.Blocks['temp']
tmp
.update.call(tmp)

Which means the 'this' in the update will bind to the block 'tmp'.

Sorry - not tested.

Cheers
  Andy
Message has been deleted

Hank Lee

unread,
Jan 26, 2018, 10:41:52 AM1/26/18
to Blockly
re-test again with your recommend method. still failed.

Blockly.Blocks['temp'] = {
  init: function() {
//var template=my_temp;
    this.appendDummyInput()
        .setAlign(Blockly.ALIGN_CENTRE)
        .appendField("template->case");
    this.appendDummyInput()
        .appendField("template_name:")
        .appendField(new Blockly.FieldTextInput("temp_name"), "temp");
    this.appendDummyInput()
        .appendField("parameters:")
        .appendField(new Blockly.FieldTextInput("p1=xx;p2=xx;"), "parameters");
    this.setPreviousStatement(true, null);
    this.setNextStatement(true, null);
    this.setColour(315);
debugger;
 this.setTooltip("");
 this.setHelpUrl("");
  },
### I try to initate a  update function. 
update: function() {
  this.setFieldValue("tesetsdf","temp");
  }
};

in the html, I wrote a js script.

var block_test=Blockly.Blocks['temp'];
debugger
block_test.update.call(block_test);
debugger
it could jump to the update function.
but just like pic showed, it always remind me the this.setfieldvalue is not a function.
I try to put the this.setfieldvalue to the "init function". actually the setfieldvalue works when loading.
but If I call it when running .it always remind "this.setfieldvalue is not a function"



在 2018年1月25日星期四 UTC+8下午8:49:37,Andrew Stratton写道:

Andrew Stratton

unread,
Jan 26, 2018, 10:56:24 AM1/26/18
to Blockly
Sorry - my bad - this in update needs to be the block instance - not the block definition.

So you need block_test to be the actual block - sorry, but it's been a long day - and I can't think of a simple solution at the moment - will have a think and see what makes sense.

It would be easier (for me) to do it through events - but that is not easy to explain.

Would it be possible for you to describe your use case? I'm not certain which solution will fit your use best. Just a description of what you think should happen from the block creators point of view would be enough.

Best wishes and have a nice weekend
  Andy

Hank Lee

unread,
Jan 27, 2018, 4:44:35 AM1/27/18
to Blockly
Thanks in advance Andy
here is what I want to do:
1. I want to drag a init block into my workspace the default value in the blank would be "default"..
2. fill the value "this is my domain.". and monitor the blank change.
3. I will capture the value and fill into the block filed. Ths block field value will be updated.




 didn't find the right way to update field value.
Hope I make it clear enough.
Have a good weekend. :-).
在 2018年1月26日星期五 UTC+8下午11:56:24,Andrew Stratton写道:

Andrew n marshall

unread,
Jan 29, 2018, 12:26:33 PM1/29/18
to blo...@googlegroups.com
Hi Hank,

The Blockly.Blocks array is just the block definitions, not the actual blocks in the toolbox or on the workspace. For the latter, you'll probably want Blockly.mainWorkspace.getAllBlocks() or .getGetById(idString).

That said, the idString is not 'temp'. That is the block type name, and there may be multiple blocks of that type on the workspace. The .id is usually a dynamically generated string, so you may need other attributes to distinguish a singular block. It depends on what you want to do. Maybe you intend to search through all .getAllBlocks() results for blocks where .type === 'temp' and set the field.

--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Hank Lee

unread,
Jan 31, 2018, 12:28:04 AM1/31/18
to Blockly
Thanks let me try that.

在 2018年1月30日星期二 UTC+8上午1:26:33,Andrew n marshall写道:
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.
Reply all
Reply to author
Forward
0 new messages