Show a Pop-up Notification Using Web API

Introduction

This how-to describes how to show a simple pop-up notification in Studio Pro.

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 Notification

With the notifications API, you can show a pop-up notification when your extension loads. The notification will disappear after five seconds. To do this, follow the steps below:

1. Create an assets folder under your src folder.

2. Find an icon you want to use in your notification and copy it into the assets folder. This example uses the file check.png.

3. Create an Icons.ts file inside that same assets folder.

4. Add the following code to the Icons.ts file, replacing check.png with the name of your icon and using an appropriate name in the import, IIcons, and export statements.

   import Check from "./check.png";
   
   interface IIcons {
       Check: string;
   }
   
   export default { Check } as IIcons;

5. Create an images.d.ts file inside the assets folder. This is a declaration file, as indicated by the d file extension.

6. Add the line declare module "*.png"; to the images.d.ts file. This tells TypeScript that any import ending in .png should be treated as a module. This enables TypeScript to handle .png files correctly when you import them in your code and allows you to use images in your extensions.

7. Replace your src/main/index.ts file with the following, using the appropriate icon name in place of Check:

   import { IComponent, getStudioProApi } from "@mendix/extensions-api";
   import Icons from "../assets/Icons";
   
   export const component: IComponent = {
       async loaded(componentContext) {
           const studioPro = getStudioProApi(componentContext);
           const notificationsApi = studioPro.ui.notifications;
           await notificationsApi.show({
                   title: "Extension Loaded",
                   message: "The extension was successfully loaded",
                   displayDurationInSeconds: 5,
                   icon: {
                       relativePath: Icons.Check,
                       componentName: "extension/myextension"
                   }
           });
       }
   }

   This code does the following:

   • It uses the notificationsApi from studioPro.ui.notifications to allow you to use the notifications API.
   • It implements a loaded method, which calls the show method to show a pop-up notification for five seconds with the title Extension Loaded, a message, and the check.png icon you set up earlier. For more information, see the Full Reference for Show Method section below.

Now, when the extension loads, your notification will show in the top-right corner of Studio Pro:

Full Reference for Show Method

The show method has the following parameters:

• title – the title of the notification
• message – the text content of the notification
• displayDurationInSeconds – an optional duration (in seconds) for the notification to remain visible; if no duration is provided, the pop-up will remain indefinitely until the user removes it themselves
• icon – an optional icon that is displayed inside the notification

Extensibility Feedback

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

Any feedback is appreciated.