Show a Message Box Using Web API

Last modified: October 16, 2025

Introduction

This how-to describes how to show a message box to a user. In this example, you will create three menu items that will display a dialog with text.

Prerequisites

This how-to uses the results of Get Started with the Web Extensibility API. Make sure to complete that how-to before starting this one.

Showing a Message Box

Create a menu that will display a dialog with text. This is done in the loaded method of your main entry point (src/main/index.ts). For more information on how to do this, see Create a Menu Using Web API.

Add event listeners to receive and act upon the notifications generated by the menu items. The listener events show a different message box, depending on which menu item is selected. The message has the format messageBoxApi.show(<message-type>, <message>, <message-details>), where:

<message-type> is the type of message, indicated in the pane title and indicated by an icon. Values are "information" , "warning" , and "error" .
<message> is the message to display.
<message-details> is an optional extended message which is displayed in an expandable area that is initially collapsed.

The full TypeScript file (src/main/index.ts) to implement these three menu items and message boxes is as follows:

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

const show_info_menu_id = "show-info-id";
const show_error_menu_id = "show-error-id";
const show_warning_menu_id = "show-warning-id";

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

        const messageBoxApi = studioPro.ui.messageBoxes;
        const menuApi = studioPro.ui.extensionsMenu;

        menuApi.addEventListener("menuItemActivated", (args) => {
            if (args.menuId === show_info_menu_id)
                messageBoxApi.show("info", "This is information.", "Extra info");
            if (args.menuId === show_error_menu_id)
                messageBoxApi.show("error", "This is an error.", "Extra error details");
            if (args.menuId === show_warning_menu_id)
                messageBoxApi.show(
                    "warning",
                    "This is a warning.",
                    "Extra warning details"
                );
        });

        const infoMenu: Menu = {
            caption: "Show Info",
            menuId: show_info_menu_id,
        };

        const errorMenu: Menu = {
            caption: "Show Error",
            menuId: show_error_menu_id,
        };

        const warningMenu: Menu = {
            caption: "Show Warning",
            menuId: show_warning_menu_id,
        };

        await menuApi.add(infoMenu);
        await menuApi.add(errorMenu);
        await menuApi.add(warningMenu);
    }
}

For example, the Show Info menu item displays the following message box.

Extensibility Feedback

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

Any feedback is appreciated.