Using the Documents API

Introduction

This how-to describes how to create context menus for a document editor that execute previously registered commands. 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.
• Make sure you are familiar with command registration as described in Register a Command Using Web API.

Creating a Context Menu

The code below does the following:

1. Registers a command through the Commands API

2. Attaches the commandId to the new menu

3. Uses the documents API's addContextMenu method to add the menu to an entity inside the domain model editor

   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);
   
           const commandId = `${extensionId}.entity.command`;
           const menuId = `${commandId}.menu`;
   
           await studioPro.app.commands.registerCommand<{ documentId: string }>(commandId, async (args: { documentId: string }) => {
               await studioPro.ui.notifications.show({
                   title: `Entity command executed`,
                   message: `You clicked a context menu for an Entity! (${args.documentId})`,
                   displayDurationInSeconds: 4
               });
           });
   
           const microflowMenu: Menu = { caption: `Entity command menu`, menuId, commandId };
   
           await studioPro.ui.documents.addContextMenu(microflowMenu, "DomainModels$Entity");
       }
   }

As you can see from the example above, the expected payload of the command is an object containing a document id ({ documentId: string }). Registering the command requires the exact type of the payload, otherwise your extension will not compile. The documentId will be the id of the document the menu is attached to, in this case, 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.