Get Started with the Web Extensibility API

Introduction

Studio Pro extensions can be developed using typescript and use standard web development technologies to extend the Studio Pro development environment. This guide shows you how to set up a basic development environment for building an extension using the web extensibility API.

Prerequisites

You will need the following prerequisites:

• Mendix Studio Pro version 10.21.0 or higher Mendix Studio Pro.
• Install the latest Studio Pro version from the Mendix Marketplace.
• A development IDE to develop your extensions. We recommend using Visual Studio Code.
• Install the latest version 22.x.x of Node: https://nodejs.org/en/download.

Creating Your First Extension

This section will show you how to build and test an extension.

Create a Test App

1. Create a new app using the Blank Web App template.
2. Install the Studio Pro Web Extension Template from GitHub using the instructions in the repository.

Building the Extension

From within Visual Studio Code:

1. Select File -> Open Folder
2. Navigate to the folder you just extracted your extension source code to.
3. Click Select Folder.
4. Select Yes if you are asked whether you trust this folder.
5. Now open a Terminal by selecting Terminal -> New Terminal from the top menu.
6. From the Terminal type npm install. This installs all dependencies for the extension
7. Build your extension using the command npm run build in the terminal.

Once completed you should now have a build artifact which we can deploy to your Mendix app.

You can explore the extension a bit more to understand what it will do when it is installed. Do the following:

1. From the Explorer window navigate to src/main/index.ts select it to open the file.

   Reading through the source code you should see the following:

2. Line 7 adds a menu

   await studioPro.ui.extensionsMenu.add({
   menuId: "myextension.MainMenu",
   caption: "MyExtension Menu",
   subMenus: [{ menuId: "myextension.ShowTabMenuItem", caption: "Show tab" }],
   });
   

3. Line 14 opens a tab

   // Open a tab when the menu item is clicked
   studioPro.ui.extensionsMenu.addEventListener("menuItemActivated", (args) => {
     if (args.menuId === "myextension.ShowTabMenuItem") {
       studioPro.ui.tabs.open(
         {
           title: "My Extension Tab",
         },
         {
           componentName: "extension/myextension",
           uiEntrypoint: "tab",
         }
       );
     }
   });
   

When you install the extension you will see a new menu item within Studio Pro.

Testing the Extension

To test the extension, do the following in File Explorer.

1. Navigate to the folder where you extracted the extension source code.

2. Open the dist folder.

3. Copy the myextension folder.

4. Navigate to the folder where you created your app.

5. Create a new folder called webextensions.

6. Paste the myextension folder into the webextensions folder you just created.

   The extension files have now been added to the app.

7. Start Studio Pro with the following command line parameters to tell it to use the extensions in the folder.

   --enable-extension-development --enable-webview-debugging

   These flags instruct Studio Pro to do the following:

   • Load extensions from the webextensions folder
   • Enable web debugging tools which will be useful when developing your extension

8. In Studio Pro, open the new app.

   You will see a new Extensions item in the top menu.

Conclusion

Using this guide we have:

• Created a new app
• Downloaded a new extension from GitHub
• Built the extension and installed it in our app
• Tested our extension from within Studio Pro.

Extensibility Feedback

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

Any feedback is much appreciated.