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 context menu that displays for each microflow in the App Explorer.

Prerequisites

Before starting this how-to, complete the following prerequisites:

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

Creating a Context Menu

The code below uses the appExplorer API addContextMenu method to add the context menu to all Microflow document nodes. When you click this menu, the document ID is sent as an argument through the DocumentContext argument parameter.

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}.microflow.menu`;

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

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

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

The DocumentContext payload for the menu action is an object containing a document ID ({ documentId: string }). When you create a menu for the appExplorer addContextMenu method, use DocumentContext as the context of your menu. The documentId is the ID of the document the menu is attached to (in this example, the specific Microflow node in the App Explorer).

As explained in the menu documentation, DocumentContext is not required to add your menu to Studio Pro. However, if you do not use it, the menu will not receive the clicked document ID.

Extensibility Feedback

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

Any feedback is appreciated.