Show a Message Box Using Web API

Introduction

This how-to shows you how to show a message box to the Studio Pro user.

Prerequisites

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

Showing a Message Box

Firstly, you need to create a menu which will display a dialog with text. This is done in the loaded event in Main.

You can learn how to do that in Create a Menu Using Web API.

In this example you create three menu items:

• Show Info
• Show Error
• Show Warning

You then need to add event listeners to receive and act upon the notifications generated by the menu items. Here the listener events show a different message box, depending on which menu item is selected. The message has the following 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 which is initially collapsed.

The full typescript file 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.

Conclusion

You have seen how to implement message boxes triggered by menu items.

Extensibility Feedback

If you would like to provide us with some additional feedback you can complete a small Survey

Any feedback is much appreciated.