Ribbon

• The ribbon's UI configuration can be extended using a manifest.
• You can freely configure the ribbon's tabs and groups, and place buttons to invoke commands and checkboxes to display/change ON/OFF states on the ribbon.
• The ribbon definition is common regardless of whether it's implemented as a C# script, Python script, or .NET DLL.

Ribbon Elements

The following ribbon elements can be extended with extensions:

• Tab
• Group
• Single Control
• Button
• Checkbox
• Separator
• Compound Control
• Button Group
• Stack Panel
• Menu
• Split Button

Element-Specific Details

¹²³

Tabs (Elements of tabs)

• Tabs that make up the ribbon

• Properties

Key	Description	Range	Required
id	An ID that uniquely identifies the tab. A unique string across all components of the ribbon. 1	String representing the ID	Required
label	Tab label	Optional string	Required 4
orderBefore/orderAfter	The ID of the ribbon element indicating the relative position where the tab will be added. 2 If not specified, it will be added before the [Help] tab. If a tab with the same ID already exists, the new tab will not be added and will remain in the existing tab's position. For IDs of system-standard built-in ribbon elements, see Ribbon Element IDs.	String representing the ID	-
visible	The visibility state of the target element. Omitted or specified as true displays it. Specified as false hides it.	"true", "false"	-
groups	Array of groups that make up the tab	Object array	-

• Child element type

• Group

You can specify either before (orderBefore) or after (orderAfter) the specified element.

If not specified for elements other than tabs, it will be added to the end of the sibling elements.

Group (groups element)

• Groups that divide the ribbon tabs

• Properties

Key	Description	Range	Required or Not
id	An ID that uniquely identifies the target element. A unique string among all ribbon components. 1	String representing the ID	Required
label	Group label	Any string	Required 4
orderBefore/orderAfter	The ID of the ribbon element indicating the relative position to which the target element will be added. 2 For IDs of built-in ribbon elements in the system, please refer to Ribbon Element IDs.	String representing the ID	-
visible	The display state of the target element. Omitted or specified as true displays the element. Specified as false hides it.	"true", "false"	-
controls	An array of controls to be placed within a group	Object array	-

• Types of controls that can be placed as child elements

• Button

• CheckBox

• Separator

• ButtonGroup

• StackPanel

• Menu

• SplitButton

Button (type: Button)

• Command execution button on the ribbon

• You can assign a command to be executed when the button is pressed.

• The button's enabled/disabled state and toggle state are linked to the assigned command.

• Property

Key	Description	Range	Required
type	Element type.	"Button"	Required
id	ID that uniquely identifies the target element. A unique string among all ribbon components. 1	String representing the ID	Required
label	Button label	Any string	Required 5
description	Description displayed in the tooltip	Any string	-
orderBefore/orderAfter	ID of the ribbon element indicating the relative position to add the target element. 2	String representing the ID	-
visible	Visibility of the target element. Displayed if omitted or set to true. Hided if set to false.	"true", "false"	-
isEnabled	Property name that holds the enabled/disabled state of the button. If omitted, it is linked to the state of the assigned command.	String representing the property name	-
imageSmall	PNG file path for the small icon to display on the button (16 x 16 image recommended). 3	String representing the relative path	-
imageLarge	PNG file path for the large icon to display on the button (32 x 32 image recommended). 3	String representing the relative path	-
command	ID of the command to assign to the button.	String representing the ID	Required

Checkbox (type: CheckBox)

• Checkbox

• The display of the checkbox changes depending on the value of the property associated with the isChecked property.

• Manipulating the checkbox updates the value of the associated property.

• Property

Key	Description	Range	Required
type	The type of element.	"CheckBox"	Required
id	An ID that uniquely identifies the target element. A unique string across all components of the ribbon. 1	A string representing the ID	Required
label	The label of the checkbox	Any string	Required
orderBefore/orderAfter	The ID of the ribbon element indicating the relative position to add the target element. 2	A string representing the ID	-
visible	The display state of the target element. Omitted or true displays it. false hides it.	"true", "false"	-
isChecked	Property name that holds the checked state	String representing the property name	Required

Separator (type: Separator)

• Separator.

• Property

Key	Description	Range	Required or not
type	Element type.	"Separator"	Required
id	ID that uniquely identifies the tab. A unique string across all components of the ribbon. 1	String representing the ID	Required

Button Group (type: ButtonGroup)

• Container that displays multiple buttons side-by-side like a toolbar

• Property

Key	Description	Range	Required or not
type	Element type.	"ButtonGroup"	Required
id	An ID that uniquely identifies the target element. A unique string among all ribbon components. 1	String representing the ID	Required
orderBefore/orderAfter	The ID of the ribbon element indicating the relative position to which the target element will be added. 2	String representing the ID	-
visible	The display state of the target element. Displayed if omitted or set to true. Hided if set to false.	"true", "false"	-
controls	An array of controls to be arranged side-by-side	Object array	-

• Types of controls that can be placed as child elements

• Button (small)

• Separator

Stack Panel (type: StackPanel)

• A container that displays multiple buttons arranged vertically

• Used when you want to display small image buttons arranged vertically.

• Properties

Key	Description	Range	Required
type	The type of element.	"StackPanel"	Required
id	An ID that uniquely identifies the target element. A unique string among all components of the ribbon. 1	A string representing the ID	Required
orderBefore/orderAfter	The ID of the ribbon element indicating the relative position to which the target element will be added. 2	A string representing the ID	-
visible	The visibility state of the target element. Omitted or set to true to display. Set to false to hide.	"true", "false"	-
controls	An array of controls to arrange side by side. Up to 3 controls can be placed.	Object Array	-

• Types of controls that can be placed as child elements

• Button (Small)

• SplitButton (Small)

• CheckBox

Menu (type: Menu)

• A container that displays multiple buttons in a pull-down menu format

• Properties

Key	Description	Range	Required or Not
type	Element type.	"Menu"	Required
id	An ID that uniquely identifies the target element. A unique string among all components of the ribbon. 1	String representing the ID	Required
label	Menu label	Any string	Required
orderBefore/orderAfter	ID of the ribbon element indicating the relative position to add the target element. 2	String representing the ID	-
visible	Visibility of the target element. Omitted or set to true to display. Set to false to hide.	"true", "false"	-
imageLarge	PNG file path of the icon to display on the button.	String representing a relative path	-
controls	Array of controls to arrange side by side	Object array	-

• Types of controls that can be placed as child elements

• Button (small)

• Separator

Split Button (type: SplitButton)

• A container that has the functionality of a button that can execute a command when pressed, and also displays another button in a pull-down menu format.

• Properties

Key	Description	Range	Required or not
type	Type of element.	"SplitButton"	Required
id	An ID that uniquely identifies the target element. A unique string among all components of the ribbon. 1	String representing the ID	Required
label	Button label	Optional string	Required
description	Description displayed in the tooltip	Optional string	-
orderBefore/orderAfter	ID of the ribbon element indicating the relative position to which the target element will be added. 2	String representing the ID	-
visible	Visibility of the target element. Displayed if omitted or set to true. Hided if set to false.	"true", "false"	-
isEnabled	Property name that maintains the button's enabled/disabled state. If omitted, it is linked to the state of the assigned command.	String representing the property name	-
imageSmall	PNG file path of the small icon to display on the button (16 x 16 image recommended). 3	String representing the relative path	-
imageLarge	PNG file path of the large icon to display on the button (32 x 32 image recommended). 3	String representing relative path	-
command	ID of the command to assign to the button	String representing the ID	Required
controls	Array of controls to arrange side by side	Object array	-

• Types of controls that can be placed as child elements

• Menu

Multilingual Support

• The values ​​of the label and description properties can also be localized.

• Instead of specifying the display string as the property value, specifying it as "%resource string name%" will replace it with the resource string in the localized locale file.

note

For details on multilingual support, see Advanced Topics > Multilingual Support.

Example of Ribbon Definition

manifest.json

{
"name": "My Extension",

"main": "main.cs", //For C# scripts. For Python, use "main.py"
"lifecycle": "project",
"baseprofile": "MBD",
"extensionPoints": {
"ribbon": {
"tabs": [
{
"id": "MBD",
"label": "MBD",
"orderAfter": "System.View",
"groups": [
{
"id": "MbdSync",
"label": "Block",
"controls": [
{
"id": "MbdSync.CreateBlock",
"type": "Button",
"label": "Create Block",
"imageLarge": "resources/createBlock.png",
"command": "myExtension.createBlock"
},
{
"id": "MbdSync.Menu",
"type": "Menu",
"label": "Update Block",
"imageLarge": "resources/blocks.png",
"controls": [
{
"id": "MbdSync.UpdateAllBlocks",
"type": "Button",
"imageSmall": "resources/updateAllBlocks.png",
"label": "Bulk Update",
"description": "Updates all blocks",
"command": "myExtension.updateAllBlocks"
},
{
"id": "MbdSync.Separator",
"type": "Separator"
},
{
"id": "MbdSync.UpdateBlock",
"type": "Button",
"imageSmall": "resources/updateBlock.png",
"label": "Update",
"description": "Updates the selected block",
"isEnabled": "IsBlockSelected",
"command": "myExtension.updateBlock"
}
]
},
{
"id": "MbdSync.StackPanel",
"type": "StackPanel",
"controls": [
{
"id": "MbdSync.UpdateAllBlocks",
"type": "Button",
"imageSmall": "resources/updateAllBlocks.png",
"label": "Bulk Update Blocks",
"description": "Updates all blocks",
"command": "myExtension.updateAllBlocks"
},
{
"id": "MbdSync.UpdateBlock",
"type": "Button",
"imageSmall": "resources/updateBlock.png",
"label": "Block Update",
"description": "Updates the selected block",
"isEnabled": "IsBlockSelected",
"command": "myExtension.updateBlock"
}
]
}
]
},
{
"id": "Code Gen",
              "label": "Generate Source Code",
              "controls": [
                {
                  "id": "CodeGen.GenerateCode",
                  "type": "Button",
                  "label": "Generate Source Code",
                  "imageLarge": "resources/generate.png",
                  "command": "myExtension.generateCode"
                }
              ]
            }
          ]
        }
      ]
    },
    "commands": [
      {
        "id": "myExtension.createBlock",
        "execFunc": "createBlock"
      },
      {
        "id": "myExtension.updateAllBlocks",
        "execFunc": "updateAllBlocks"
      },
      {
        "id": "myExtension.updateBlock",
        "execFunc": "updateBlock"
      },
      {
        "id": "myExtension.generateCode",
        "execFunc": "generateCode"
      }
    ]
  }
}

Footnotes

1. If the same ID as an existing component is specified, it will be merged into the same component. Otherwise, a new component will be created. ↩ ↩² ↩³ ↩⁴ ↩⁵ ↩⁶ ↩⁷ ↩⁸ ↩⁹ ↩¹⁰

2. Specifies the ID of a sibling element indicating the relative position. ↩ ↩² ↩³ ↩⁴ ↩⁵ ↩⁶ ↩⁷ ↩⁸ ↩⁹

3. Set either imageSmall or imageLarge. The size of the displayed icon will be adjusted according to the layout in the ribbon. Set imageSmall for StackPanel elements. ↩ ↩² ↩³ ↩⁴ ↩⁵

4. If the ID is the same as an existing component, specifying label is not necessary. ↩ ↩²

5. Optional when placed under a button group. However, if no label is specified, specify either imageSmall or imageLarge. ↩