Show a Message Box Using Web API

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, studioPro } from "@mendix/extensions-api";
const messageBoxApi = studioPro.ui.messageBoxes;
const menuApi = studioPro.ui.extensionsMenu;

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

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"
    );
});

class Main implements IComponent {
  async loaded() {
    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);
  }
}

export const component: IComponent = new Main();

For example, the Show Info menu item will display the following message box:

Extensibility Feedback

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

Any feedback is appreciated.