Adding categories dynamically toolbox

[frm...@gmail.com]

Is it possible to add categories dynamically to the Toolbox?

(Please say yes (and how ;) ).

Cheers,

Oded

[Neil Fraser]

Yes, absolutely.  The only catch is that Blockly needs to start with a category toolbox to start with, you can't dynamically change from a simple toolbox to a category toolbox or back again.

Here's the documentation you seek:

https://developers.google.com/blockly/guides/configure/web/toolbox#changing_the_toolbox

--
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.
To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/07719e6e-5b6d-4950-b9a2-80328a8c88d1n%40googlegroups.com.

--

Neil Fraser
https://neil.fraser.name

[frm...@gmail.com]

Thanks Neil!

Just asserting, that we are on the same page: can one do nested categories dynamically?

(The demo from the link you shared is shallow / not nested).

[Neil Fraser]

Yes, absolutely.  Branches of nested sub-categories can be changed at any time, assuming one started with a toolbox with categories.

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/58f9a611-7f57-474a-b960-788a9fa726c6n%40googlegroups.com.

[frm...@gmail.com]

Cool!

Started following the link you shared.

Added the category as followed:

<category name="Projects"
  colour={UTILS.getColorPalette().EXAMPLES}>
  <category name="Colours" custom="COLOUR_PALLET">

  </category>
</category>

It appears as a menu item in the category as seen in attached screenshot.

Pasted the following log with some debugging logging:

var coloursFlyoutCallback = function (workspace: any) {
console.log("JJJ CALLBACK CALLED")
var colourList = ['#4286f4', '#ef0447'];
var blockList = [];
for (var i = 0; i < colourList.length; i++) {
blockList.push({
'kind': 'block',
'type': 'colour_picker', // Type is optional if you provide blockxml
'blockxml': '<block type="colour_picker">' +
'<field name="COLOUR">' + colourList[i] + '</field>' +
'</block>'
});
}
return blockList;
};
console.log("JJJ Before");
workspace.registerToolboxCategoryCallback(
'COLOUR_PALETTE', coloursFlyoutCallback);
console.log("JJJ After");
console.log(workspace.getToolbox());
this.props.setWorkAreaLoadingState(LoadingState.INITIALIZED,
0);

With the following console.log output:

JJJ Before
JJJ After
Blockly.Toolbox {workspace_: B…y.WorkspaceSvg, toolboxDef_: {…}, horizontalLayout_: false, HtmlDiv: div.blocklyToolboxDiv.blocklyNonSelectable, contentsDiv_: div.blocklyToolboxContents, …}

Yet clicking the menu item does not trigger the 

console.log("JJJ CALLBACK CALLED")

command

Instead an error is triggered with the following trace:

blockly_compressed.js:875 Uncaught TypeError: Couldn't find a callback function when opening a toolbox category.
    at Blockly.VerticalFlyout.Blockly.Flyout.getDynamicCategoryContents_ (blockly_compressed.js:875:1)
    at Blockly.VerticalFlyout.Blockly.Flyout.show (blockly_compressed.js:871:1)
    at Blockly.Toolbox.updateFlyout_ (blockly_compressed.js:980:1)
    at Blockly.Toolbox.setSelectedItem (blockly_compressed.js:978:1)
    at Blockly.Toolbox.onClick_ (blockly_compressed.js:965:1)
    at HTMLDivElement.h (blockly_compressed.js:829:1)

What am I doing wrong?