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 guide uses the results of Get Started with the Web Extensibility API. Please 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:
-
Create an
assets
folder under yoursrc
folder. -
Find an icon you want to use in your notification and copy it into the
assets
folder. This example uses the filecheck.png
. -
Create an
Icons.ts
file inside that sameassets
folder. -
Add the following code to the
Icons.ts
file, replacingcheck.png
with the name of your icon and using an appropriate name in theimport
,IIcons
, andexport
statements.import Check from "./check.png"; interface IIcons { Check: string; } export default { Check } as IIcons;
-
Create an
images.d.ts
file. This is adeclaration
file, as indicated by thed
file extension. -
Add the line
declare module "*.png";
to theimages.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. -
Replace your
src/main/index.ts
file with the following, using the appropriate icon name in place ofCheck
:import { IComponent, studioPro } from "@mendix/extensions-api"; import Icons from "../assets/Icons"; const notificationsApi = studioPro.ui.notifications; class Main implements IComponent { async loaded() { await notificationsApi.show({ title: "Extension Loaded", message: "The extension was successfully loaded", displayDurationInSeconds: 5, icon: Icons.Check }); } } export const component: IComponent = new Main();
This code does the following:
- It imports the
notificationsApi
fromstudioPro.ui.notifications
to allow you to use the notifications API. - It implements a
loaded
event, which calls theshow
method to show a pop-up notification for five seconds with the titleExtension Loaded
, a message, and thecheck.png
icon you set up earlier. For more information, see the Full Reference for Show Method section below.
- It imports the
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 notificationmessage
– the text content of the notificationdisplayDurationInSeconds
– 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 themselvesicon
– an optional icon that is displayed inside the notification
Extensibility Feedback
If you would like to provide us additional feedback, you can complete a small survey.
Any feedback is appreciated.