Using the Documents API

Introduction

This how-to describes how to create context menus for a document editor. In the example below, you create a menu which is shown for each entity in the domain model of Studio Pro.

Prerequisites

Before starting this how-to, make sure you have completed the following prerequisites:

• This how-to uses the results of Get Started with the Web Extensibility API. Please complete that how-to before starting this one.
• Review how menus work in the Web Extensibility API.

Creating a Context Menu

The code below does the following:

1. Create a menu object with a DocumentContext.
2. Use the documents API's addContextMenu method to add the menu to an entity inside the domain model editor.

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

const extensionId = "myextension";

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

        const menuId = `${extensionId}.entity.menu`;

        const action = async (args: { documentId: string }) => {
            await studioPro.ui.notifications.show({
                title: `Entity executed`,
                message: `You clicked a context menu for an Entity! (${args.documentId})`,
                displayDurationInSeconds: 4
            });
        };

        const entityMenu: Menu<DocumentContext> = { caption: `Entity menu`, menuId, action };

        await studioPro.ui.documents.addContextMenu(entityMenu, "DomainModels$Entity");
    }
};

As you can see from the example above, the expected payload of the menu action is DocumentContext (for example, an object containing a document id ({ documentId: string })). The documentId will be the Id of the document the menu is attached to (in this example, the exact entity in the domain model editor canvas).

Extensibility Feedback

If you would like to provide additional feedback, you can complete a short survey.

Any feedback is appreciated.