Modify toolboxes
Stay organized with collections
Save and categorize content based on your preferences.
The application may change the blocks available in the toolbox at any time with
a single function call:
workspace.updateToolbox(newTree);
As was the case during initial configuration, newTree may either be a tree of
nodes, a string representation, or a JSON object. The only restriction is that
the mode cannot be changed; that is if there were categories in the
initially-defined toolbox then the new toolbox must also have categories
(though the categories may change). Likewise, if the initially-defined toolbox
did not have any categories, then the new toolbox may not have any categories.
The contents of a single category can be updated by:
var category = workspace.getToolbox().getToolboxItems()[0];
category.updateFlyoutContents(flyoutContents);
Where flyoutContents can be a list of blocks defined using JSON, a tree of nodes,
or a string representation.
Be aware that at this time updating the toolbox causes some minor UI resets:
- In a toolbox without categories, any fields changed by the user (such as a dropdown) will revert to the default.
Here is a live demo of a tree with categories and block groups.
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2025-03-20 UTC.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-03-20 UTC."],[],[],null,["# Modify toolboxes\n\nThe application may change the blocks available in the toolbox at any time with\na single function call: \n\n workspace.updateToolbox(newTree);\n\nAs was the case during initial configuration, `newTree` may either be a tree of\nnodes, a string representation, or a JSON object. The only restriction is that\nthe mode cannot be changed; that is if there were categories in the\ninitially-defined toolbox then the new toolbox must also have categories\n(though the categories may change). Likewise, if the initially-defined toolbox\ndid not have any categories, then the new toolbox may not have any categories.\n\nThe contents of a single category can be updated by: \n\n var category = workspace.getToolbox().getToolboxItems()[0];\n category.updateFlyoutContents(flyoutContents);\n\nWhere `flyoutContents` can be a list of blocks defined using JSON, a tree of nodes,\nor a string representation.\n\nBe aware that at this time updating the toolbox causes some minor UI resets:\n\n- In a toolbox without categories, any fields changed by the user (such as a dropdown) will revert to the default.\n\nHere is [a live demo](https://google.github.io/blockly-samples/examples/toolbox-demo/) of a tree with categories and block groups."]]
