You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
description: "Explains how to package extensions into add-on modules and publish them to the Mendix Marketplace."
5
6
---
6
7
7
8
# Packaging Your Extension
8
9
9
-
After completing development on your extension, you can package it into an add-on module so others can use it. Once packaged, the module can be published to the Mendix Marketplace, allowing other users to download it into their Studio Pro apps.
10
+
After you complete development on your extension, you can package it into an add-on module so others can use it. You can then publish the module to the Mendix Marketplace so other users can download it into their apps.
10
11
11
-
To package your extension, follow the steps below:
12
+
To package your extension, follow these steps:
12
13
13
-
1.Make sure you have enabled the [Extension Development](/refguide/preferences-dialog/#extension-development) setting in your app's Preferences. Alternatively, you can start Studio Pro with the `--enable-extension-development` command-line option.
14
-
2. In your Studio Pro app, create a new module and include your development extension.
15
-
3.Give the module a name.
16
-
4. Open the module's settings and in the **Export** tab, choose**Add-on module**.
17
-
5. In the **Extension name**drop-down, select the extension you want to package into it.
14
+
1.Verify that you have enabled the [Extension Development](/refguide/preferences-dialog/#extension-development) setting in your app's **Preferences**. Alternatively, start Studio Pro with the `--enable-extension-development` command-line option.
15
+
2. In your app, create a new module and include your development extension.
16
+
3.Name the module.
17
+
4. Open the module's settings and on the **Export** tab, select**Add-on module**.
18
+
5. In the **Extension name**list, select the extension you want to package.
{{< figure src="/attachments/apidocs-mxsdk/apidocs/extensibility-api/extensionAddOnModule.png" alt="Extension settings showing Add-on module selected with Extension name dropdown" width="400" >}}
20
21
21
-
After you have created your add-on module with its extension, you can export it by right-clicking the module in the **App Explorer** and selecting **Export add-on module package**.
22
+
After you create your add-on module with its extension, export it by right-clicking the module in the **App Explorer** and selecting **Export add-on module package**.
You can now save the add-on module to a location of your choice.
26
27
27
28
# Importing the Extension Add-on Module
28
29
29
-
When the add-on module is available to a Studio Pro user, they are now able to add it in their application. This is done by right-clicking the app in the **App Explorer** and selecting **Import module package**.
30
+
When the add-on module is available to a Studio Pro user, they can add to their app. This is done by right-clicking the app in the **App Explorer** and selecting **Import module package**.
When an add-on module containing an extension is imported in the app, Studio Pro will show a warning to the user, asking to trust the extension contained in it. If the user does not choose to trust, the module will still be imported but the extension inside it will not be loaded.
34
+
When an add-on module containing an extension is imported in the app, Studio Pro displays a warning to the user, asking to trust the extension contained in it. If the user does not choose to trust the extension, the module is still imported but the extension inside it will not be loaded.
Copy file name to clipboardExpand all lines: content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/get-started.md
+23-24Lines changed: 23 additions & 24 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,17 +7,17 @@ weight: 2
7
7
8
8
## Introduction
9
9
10
-
Studio Pro extensions can be developed using TypeScript and use standard web development technologies to extend the Studio Pro development environment. This document describes how to set up a basic development environment for building an extension using the web extensibility API.
10
+
Studio Pro extensions can be developed using TypeScript and standard web development technologies to extend the Studio Pro development environment. This document describes how to set up a basic development environment for building an extension using the Web Extensibility API.
11
11
12
12
For more detailed information, see the [Mendix Studio Pro Web Extensibility API reference documentation](http://apidocs.rnd.mendix.com/11/extensions-api/index.html).
13
13
14
14
### Prerequisites
15
15
16
-
You will need the following prerequisites:
16
+
You need the following prerequisites:
17
17
18
-
*[Mendix Studio Pro](https://marketplace.mendix.com/link/studiopro) version 11.2.0 or higher.
19
-
* A development IDE to develop your extensions. Mendix recommends using [Visual Studio Code](https://code.visualstudio.com/).
20
-
* The latest version 22.x.x of Node: https://nodejs.org/en/download.
18
+
*[Mendix Studio Pro](https://marketplace.mendix.com/link/studiopro) version 11.2.0 or above
19
+
* A development IDE to develop your extensions; Mendix recommends using [Visual Studio Code](https://code.visualstudio.com/)
20
+
* The latest version 22.x.x of Node from [nodejs.org](https://nodejs.org/en/download/)
21
21
22
22
{{% alert color="info" %}}
23
23
Extensions can be built on any operating system, as the underlying framework is cross-platform.
@@ -29,32 +29,32 @@ Extension development is only possible by enabling the [Extension Development](/
29
29
30
30
## Creating Your First Extension
31
31
32
-
This section will show you how to build and test an extension.
32
+
This section shows you how to build and test an extension.
33
33
34
34
### Create a Test App
35
35
36
36
Create a new app using the **Blank Web App** template.
37
37
38
-
You can also open the application directory containing the application`.mpr` file by clicking the **App** menu > **Show App Directory in Explorer** (or **Show App Directory in Finder**) in Studio Pro.
38
+
You can also open the app directory containing the app`.mpr` file by clicking **App** > **Show App Directory in Explorer** (or **Show App Directory in Finder**) in Studio Pro.
39
39
40
40
### Creating the Extension
41
41
42
42
To accelerate your extension development, Mendix provides an extension generator that creates a customizable sample extension.
43
43
44
44
To use the generator, navigate to your desired source code directory and run the command `npm create @mendix/extension@latest`. You may be prompted by `npm` to grant permission to install the generator. After installation, you will be guided through a series of questions to help configure your extension.
45
45
46
-
You will be asked the following:
46
+
The generator asks the following questions:
47
47
48
48
* Select the programming language (TypeScript is used in the tutorials)
49
49
* Specify the extension name
50
50
* Choose if you will use React for the extension’s UI
51
51
52
-
The next two questions, while optional, are highly recommended, as they enable direct debugging and deployment from Visual Studio Code:
52
+
The next two questions are optional but highly recommended, as they enable direct debugging and deployment from Visual Studio Code:
53
53
54
54
* Specify the path to the Studio Pro executable (this allows Visual Studio Code to automatically attach to Studio Pro for debugging)
55
-
* Specify the location of the application`.mpr` package (this allows for automatic deployment of your extension build to your app)
55
+
* Specify the location of the app`.mpr` package (this allows automatic deployment of your extension build to your app)
56
56
57
-
The last question allows you to select the Studio Pro version you are targeting; Mendix recommends choosing version 11.
57
+
The last question allows you to select the Studio Pro version you are targeting. Mendix recommends choosing version 11.
58
58
59
59
{{% alert color="info" %}}
60
60
On a Windows machine, the Studio Pro executable is typically located at `C:\Program Files\Mendix\<version>\modeler\studiopro.exe`. To find the exact path, follow these steps:
@@ -64,14 +64,13 @@ On a Windows machine, the Studio Pro executable is typically located at `C:\Prog
64
64
3. Select **Properties**. The **Target** field displays the executable path.
65
65
{{% /alert %}}
66
66
67
-
Once you have completed the setup, a new directory named after your extension will be created,
68
-
containing the source code of the extension.
67
+
Once you complete the setup, a new directory named after your extension is created, containing the source code of the extension.
69
68
70
69
### Exploring the Created Extension
71
70
72
71
In the following example, the name of your extension is `myextension` and you are exploring it using Visual Studio Code.
73
72
74
-
Before you begin, your extension will have to get an instance of the Studio Pro API. to do this, from the Explorer window, navigate to `src/main/index.ts` and select it to open the file.
73
+
Before you begin, your extension must get an instance of the Studio Pro API. To do this, from the Explorer window, navigate to `src/main/index.ts` and select it to open the file.
75
74
76
75
In the source code, you should see the following:
77
76
@@ -109,13 +108,13 @@ In the source code, you should see the following:
7.Buildyourextensionusingthecommand`npm run build`intheterminal. Ifyouprovidedthepathto`.mpr`fileinthepreviousstep, thiswillinstalltheextensionintotheapplicationdirectory.
7.Buildyourextensionusingthecommand`npm run build`intheterminal. Ifyouprovidedthepathtothe`.mpr`fileinthepreviousstep, thisinstallstheextensionintotheappdirectory.
Copy file name to clipboardExpand all lines: content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/migration-guide.md
+6-6Lines changed: 6 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,11 +7,11 @@ weight: 2
7
7
8
8
## Introduction
9
9
10
-
A breaking change in the Web Extensibility API was introduced in Studio Pro 11.6, which changed the way [menus](/apidocs-mxsdk/apidocs/web-extensibility-api-11/menu/) are created. This guide explains how to update your extension code after upgrading to Studio Pro 11.6 from an earlier version.
10
+
Studio Pro 11.6 introduced a breaking change in the Web Extensibility API that changed the way [menus](/apidocs-mxsdk/apidocs/web-extensibility-api-11/menu/) are created. This guide explains how to update your extension code after you upgrade to Studio Pro 11.6 from an earlier version.
11
11
12
12
## `MenuItemActivated` Event
13
13
14
-
If your extension created menus using the `menuId` and the `menuItemActivated` event to trigger actions, you can now use the action that was called when the event was triggered as the actual`action` property of your menu.
14
+
If your extension created menus using `menuId` and the `menuItemActivated` event to trigger actions, you can now use the action that was called when the event was triggered as the `action` property of your menu.
The `menuItemActivated` event no longer exists, so you cannot listen to it anymore.
47
+
The `menuItemActivated` event no longer exists.
48
48
49
49
## Registering Commands
50
50
51
51
{{%alert type="info" %}}
52
52
The command registration API has been removed and is no longer available for Studio Pro 11.6 and above.
53
53
{{% /alert%}}
54
54
55
-
If your extension created menus by using a command Id of a pre-registered command, the action that is sent to the command registration API when registering the command can now be used directly as the action of the menu.
55
+
If your extension created menus using a command ID of a pre-registered command, the action sent to the command registration API when registering the command can now be used directly as the action of the menu.
Action arguments are also possible in the new Menu API. Review the [Menus documentation](/apidocs-mxsdk/apidocs/web-extensibility-api-11/menu/) for a detailed explanation.
81
+
Action arguments are also possible in the new Menu API. For a detailed explanation, review [Menus](/apidocs-mxsdk/apidocs/web-extensibility-api-11/menu/).
0 commit comments