Using the App Explorer API

Introduction

This how-to describes how to interact with the App Explorer in Studio Pro. In this example, you create a menu which will show for each microflow in the App Explorer.

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. 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 Command API.
2. Attaches the commandId to the new menu.
3. Uses the appExplorer API's addContextMenu method to add the menu to all Microflow document nodes.

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}.microflow.command`;
        const menuId = `${commandId}.menu`;

        await studioPro.app.commands.registerCommand<{ documentId: string }>(commandId, async (args: { documentId: string }) => {
            await studioPro.ui.notifications.show({
                title: `Microflow command executed`,
                message: `You clicked a context menu for a Microflow! (${args.documentId})`,
                displayDurationInSeconds: 4
            });
        });

        const microflowMenu: Menu = { caption: `Microflow command menu`, menuId, commandId };

        await studioPro.ui.appExplorer.addContextMenu(microflowMenu, "Microflows$Microflow");
    }
}

The payload of the command must be an object containing a document Id ({ documentId: string }). Registering the command requires the exact type of the payload, or your extension will not compile. The documentId will be the Id of the document the menu is attached to (in this scenario, the exact Microflow node in the App Explorer).

Extensibility Feedback

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

Any feedback is appreciated.