Register a Command Using Web API

Introduction

This how-to describes how to register a command in Studio Pro from an extension. This command can then be attached to a menu or context menus for a document or an editor.

Prerequisites

This how-to uses the results of Get Started with the Web Extensibility API. Please complete that how-to before starting this one. You should also be familiar with creating menus as described in Create a Menu Using Web API.

Register Commands

The Commands API allows users to register a reusable command. These commands can be attached to menus and context menus. At this time, two APIs make use of this feature:

• Documents API
• App Explorer API

To register commands, you can call the Commands API registerCommand.

In the sample code below, we register a command, then attach it to a menu by setting the property commandId to the Menu object.

For commands that require payload, you must make sure you register the command with the exact expected payload object type. See the App Explorer API and Documents API documentation for clear examples.

import { ComponentContext, IComponent, Menu, StudioProApi, getStudioProApi } from "@mendix/extensions-api";

const extensionId = "myextension";

export const component: IComponent = {
    async loaded(componentContext: ComponentContext) {
        const studioPro = getStudioProApi(componentContext);

        await this.createMenuWithCommand(studioPro);
    }

    async createMenuWithCommand(studioPro: StudioProApi) {
        const commandId = `${extensionId}.menu-command`;
        const menuId = `${commandId}.menu`;

        await studioPro.app.commands.registerCommand<void>(
            commandId,
            async () => await studioPro.ui.messageBoxes.show("info", `This menu executed a command with id '${commandId}'`)
        );

        await studioPro.ui.extensionsMenu.add({ caption: "Menu with command", menuId, commandId });
    }
}

It is also possible to create a context menu that belongs to a document in the App Explorer or a document editor, and that menu can have a registered command attached to it. To do so, you can use the App Explorer API or the Documents API.

The command registration for commands that interact with documents are slightly different. They require a payload of type { documentId: string }; the backend will return the menu when it is clicked. The documentId is the id of the exact document that was interacted with by the menu.

Conclusion

You have seen how to register commands that can be attached to menus in Studio Pro.

Extensibility Feedback

If you would like to provide us with additional feedback, you can complete a small survey.

Any feedback is appreciated.