Attaching data to Blockly blocks

1,682 views
Skip to first unread message

George Schneeloch

unread,
Feb 24, 2015, 5:52:21 PM2/24/15
to blo...@googlegroups.com
Hi everyone! I'm using Blockly for a workflow editor. The workflow editor imports blocks by reading the workflow (custom JSON), converting the workflow to Blockly XML and loading it into the Blockly workspace. Each workflow item has a unique id and I'm looking to include it somehow in the Blockly XML so that I can tell where a block came from.

It seems like the 'id' attribute is meant for Blockly internal use, which is fine, but is there any place in the Blockly XML which I can put arbitrary data like this without it showing up in the UI (like a comment) and surviving deserialization/serialization?

Thanks,
-George

Neil Fraser

unread,
Feb 24, 2015, 8:14:04 PM2/24/15
to blo...@googlegroups.com
That's a good suggestion.  I've added a .data property on blocks that round-trips to a <data></data> tag in the XML.

Note that when a block is duplicated, its data will be copied exactly.  Also, if there is data on a block in the toolbox, the same data will be copied to all new blocks instantiated from that block.

Since nobody is using this right now, I'm happy to make changes if people have better ideas.

--
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+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.



--

George Schneeloch

unread,
Feb 25, 2015, 11:30:31 AM2/25/15
to blo...@googlegroups.com, ro...@neil.fraser.name
Thanks, this is great! I think for our case I can just edit BlockSvg.showContextMenu_ to remove the option to duplicate. If there were a method isDuplicatable that would be ideal but this seems like a pretty simple workaround.

Thanks for being so responsive!
-George

Neil Fraser

unread,
Feb 25, 2015, 12:39:13 PM2/25/15
to blo...@googlegroups.com

Don't forget copy and paste.

Send (awkwardly) from an Android phone.

George Schneeloch

unread,
Feb 25, 2015, 2:47:22 PM2/25/15
to blo...@googlegroups.com, ro...@neil.fraser.name
Thanks, seems to be working fine.

If I did the work to create isDuplicatable would it be accepted in a pull request? Or is this feature too narrow to be much use to other people?
-George

Neil Fraser

unread,
Feb 25, 2015, 3:53:40 PM2/25/15
to blo...@googlegroups.com
Hmm, let's think about this more.  Currently undeletable blocks are not copy/pasteable or duplicatable.  Tell me about the life-cycle of your blocks.  Can they be created from a toolbox?  Can they be deleted?  Do you have a problem with copy/paste and duplicate other than the data property?

One option for you might be to allow duplication, but if you see two blocks with the same data in the XML, only use the data with the block that has the lower id.

George Schneeloch

unread,
Feb 25, 2015, 6:08:42 PM2/25/15
to blo...@googlegroups.com, ro...@neil.fraser.name
Blocks can be loaded from a workflow, saved into a workflow, created from the toolbox and deleted. The data property contains a unique id to the workflow and is used to link workflow items to each other and keep track of edits to already existing workflow items. When a new block is created from the toolbox data is blank. If data is blank when the workflow is saved an autogenerated id is created for it before POSTing to the server.

I think if there was a way to alter block.data when a new block is created to set it to null, that would make it unnecessary to disable duplication for my case. Using the data property from the block with the lowest id would fail in the case where, if the user copied the old block and then deleted it, it would think that the new block was actually the old block.

Anyway, was just offering in case it was helpful to other people. Commenting out duplication will work fine for my case. Thanks!
-George

Matthias Lösch

unread,
Apr 17, 2015, 9:45:14 AM4/17/15
to blo...@googlegroups.com, ro...@neil.fraser.name
Hi,

I'm using Blockly in a project where non-IT people need to build small code snippets and Blockly seems to be the right tool to support them.

To get access to the data I'd like them to drag and drop objects from a tree into Blockly so they can access the data from those objects in their code.
A custom block gets created with the corrosponding data as JSON insinde the <data> element and I can access everything I need at "compile time" (during code generation).

For some of those objects selections can be made, so naturally I'd like to do that with a FieldDropdown.
But when instantiating blocks this.data is undefined and I am unable to generate a dropdown from the <data> element.

Is there another way to archive this?

                init: function() {
                    this.setColour(type.color);
                    var label = this.appendDummyInput();
                    label.appendField(type.type + '_node');
                    label.appendField(new Blockly.Field(), 'nodename');
                    if (type.name == 'single_choice')
                        label.appendField(new Blockly.FieldDropdown(this.options), 'nodevalue');
                    this.setOutput(true, type.type);
                },
                getNode: function() {
                    return JSON.parse(this.data);
                },
                options: function() {
                    var opts = [];
                    var node = JSON.parse(this.data);
                    for (var port in node.ports)
                    {
                        opts.push([port.data.id, port.data.text]);
                    }
                    return opts;
                }

JSON.parse works fine in getNode, but fails in options.

Neil Fraser

unread,
Apr 17, 2015, 1:13:43 PM4/17/15
to blo...@googlegroups.com
On 17 April 2015 at 06:45, Matthias Lösch <m...@codiac.de> wrote:
> But when instantiating blocks this.data is undefined and I am unable to
> generate a dropdown from the <data> element.

Try: this.sourceBlock_.data

I think the issue is that in a dropdown menu generator 'this' is not
the block, but rather the dropdown menu. Thus you need to access the
dropdown menu's block to access the data. In JavaScript the location
of a function does not affect the value of 'this', only the way it is
called.

Let me know if this fixes the problem, and if so, I'll update the
documentation accordingly. Thanks!

Matthias Lösch

unread,
Apr 23, 2015, 6:07:59 AM4/23/15
to blo...@googlegroups.com, ro...@neil.fraser.name
Thanks for the quick response

unfortunately this.sourceBlock_ is null at that point, so that didn't work.

It looks like the data property isn't appended to the object until after the init function has completed, so even if this.sourceBlock_ was not null I still couldn't access data.

Zubair Quraishi

unread,
Jun 19, 2016, 10:44:49 AM6/19/16
to Blockly, ro...@neil.fraser.name
Did you find a solution for this in the end Matthias?

phil cleaver

unread,
Mar 16, 2017, 9:16:09 PM3/16/17
to Blockly, ro...@neil.fraser.name
Hi,

I'd really like to know how to use <data> tags as well, it sounds like a great feature.

Would love to see some code examples if anyone has.....

Thanks

Giggles

lt...@ains.com

unread,
Oct 2, 2017, 5:28:23 PM10/2/17
to Blockly
Hi everyone! In addition to adding a string into the <data> tag, can we also add an XML? Thanks in advance.
Lun
Reply all
Reply to author
Forward
0 new messages