Skip to content

Commit 296c99b

Browse files
authored
Merge pull request #10236 from mendix/qt-extupdates
Extensibility API review
2 parents b3fe4e8 + 829dd29 commit 296c99b

File tree

18 files changed

+334
-349
lines changed

18 files changed

+334
-349
lines changed

content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/_index.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,6 @@ For information on new releases of the Extensibility API see:
2020

2121
## Introduction
2222

23-
Extensions are self-contained modules which users can add to Studio Pro. This means that with extensibility you can add new features and functionality to Studio Pro. The Extensibility API is an API that allows developers to interact with a curated list of internal systems of Studio Pro. This documentation provides guides and reference documentation for the Extensibility API.
23+
Extensions are self-contained modules that enhance Studio Pro by adding new features and functionality. The Extensibility API allows developers to interact with a curated set of internal systems, making it easier to customize and expand Studio Pro’s capabilities.
2424

25-
The API is provided in two flavors, depending which language you are developing in. C# and web based (via Typescript):
25+
The API is provided in two sections, depending on the language you are developing in:

content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/packaging-your-extension.md

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,26 +4,32 @@ url: /apidocs-mxsdk/apidocs/extensibility-api-11/packaging-your-extension
44
weight: 30
55
---
66

7-
# Packaging your extension
7+
# Packaging Your Extension
88

9-
Once you have finished development on your extension, you might want to package it into an add-on module so that others can start using it. Once you have created the add-on module, it can then be published to the Mendix Marketplace for your extension users to download into their Studio Pro app.
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.
1010

11-
To package your extension, you will still need the `--enable-extension-development` command line option turned on. Create a new module in your Studio Pro app containing your dev extension, give it an appropriate name. Open the module's settings form and set it to be an Add-on module. In the `Extension name` dropdown, select the extension you want to package into it.
11+
To package your extension, follow the steps below:
12+
13+
1. Make sure the`--enable-extension-development` command-line option is enabled.
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.
1218

1319
![Extension Add-on Module](/attachments/apidocs-mxsdk/apidocs/extensibility-api/extensionAddOnModule.png)
1420

15-
After you've created your add-on module with its extension, you can now export it, by right-clicking the module in the App Explorer and choosing `Export add-on module package`, as shown below.
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**.
1622

1723
![Export Module](/attachments/apidocs-mxsdk/apidocs/extensibility-api/exportAddOnModule.png)
1824

1925
You can now save the add-on module to a location of your choice.
2026

21-
# Importing the extension add-on module
27+
# Importing the Extension Add-on Module
2228

23-
Once the add-on module is available to a Studio Pro user, they are now able to add it in their application. They can so so by right-clicking the app in the App Explorer and choosing `Import module package`, as shown below.
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**.
2430

2531
![Import Module](/attachments/apidocs-mxsdk/apidocs/extensibility-api/importAddOnModule.png)
2632

27-
Once 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 won't be loaded.
33+
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.
2834

2935
![Trust Extension](/attachments/apidocs-mxsdk/apidocs/extensibility-api/trustExtension.png)

content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/_index.md

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,23 +13,25 @@ weight: 20
1313

1414
## Introduction
1515

16-
Extensions can be written in Typescript or other web languages, described here, or using a C# API which is documented separately in [Extensibility API for C# Developers](/apidocs-mxsdk/apidocs/csharp-extensibility-api-11/).
16+
Extensions can be written in TypeScript or other web languages, described here, or using a C# API, which is documented in [Extensibility API for C# Developers](/apidocs-mxsdk/apidocs/csharp-extensibility-api-11/).
1717

1818
{{% alert color="info" %}}
19-
Please note that extension development is only possible by starting Studio Pro with the `--enable-extension-development` feature flag.
19+
At this time, extension development is only possible with the `--enable-extension-development` feature flag.
2020
{{% /alert %}}
2121

2222
For more detailed information on the web API, see the [Mendix Studio Pro Web Extensibility API reference documentation](http://apidocs.rnd.mendix.com/11/extensions-api/index.html).
2323

2424
## Prerequisites
2525

26-
* You need at least a basic understanding of the Mendix platform.
27-
* You need some understanding of the Mendix Model.
28-
* You need to have some TypeScript development experience.
26+
To use the Web Extensibility API, you must have:
27+
28+
* A basic understanding of the Mendix platform
29+
* Some understanding of the Mendix Model
30+
* Some TypeScript development experience
2931

3032
## Getting Started
3133

32-
For detailed explanation on how to get started with extensions, check out [Get Started with the Web Extensibility API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/getting-started/).
34+
For detailed information on how to get started with extensions, see [Get Started with the Web Extensibility API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/getting-started/).
3335

3436
## How-tos
3537

content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/get-started.md

Lines changed: 12 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ weight: 2
77

88
## Introduction
99

10-
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.
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.
1111

1212
For more detailed information, see the [Mendix Studio Pro Web Extensibility API reference documentation](http://apidocs.rnd.mendix.com/11/extensions-api/index.html).
1313

@@ -16,11 +16,11 @@ For more detailed information, see the [Mendix Studio Pro Web Extensibility API
1616
You will need the following prerequisites:
1717

1818
* [Mendix Studio Pro](https://marketplace.mendix.com/link/studiopro) version 11.2.0 or higher.
19-
* A development IDE to develop your extensions. We recommend using [Visual Studio Code](https://code.visualstudio.com/).
20-
* Install the latest version 22.x.x of Node: https://nodejs.org/en/download.
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.
2121

2222
{{% alert color="info" %}}
23-
Extensions can be built on any operating system as the underlying framework is cross-platform.
23+
Extensions can be built on any operating system, as the underlying framework is cross-platform.
2424
{{% /alert %}}
2525

2626
{{% alert color="info" %}}
@@ -35,28 +35,26 @@ This section will show you how to build and test an extension.
3535

3636
Create a new app using the **Blank Web App** template.
3737

38-
{{% alert color="info" %}}
3938
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.
40-
{{% /alert %}}
4139

4240
### Creating the Extension
4341

44-
To accelerate your extension development, we provide an extension generator that creates a customizable sample extension.
42+
To accelerate your extension development, Mendix provides an extension generator that creates a customizable sample extension.
4543

4644
To use the generator, navigate to your desired source code directory and run the command `npm create @mendix/extension`. 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.
4745

4846
You will be asked the following:
4947

50-
* Select the programming language (TypeScript is used in our tutorials)
48+
* Select the programming language (TypeScript is used in the tutorials)
5149
* Specify the extension name
52-
* Choose if you will use React for the extension’s UI
50+
* Choose if you will use React for the extension’s UI
5351

54-
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, while optional, are highly recommended, as they enable direct debugging and deployment from Visual Studio Code:
5553

5654
* Specify the path to the Studio Pro executable (this allows Visual Studio Code to automatically attach to Studio Pro for debugging)
57-
* 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 application `.mpr` package (this allows for automatic deployment of your extension build to your app)
5856

59-
The final question allows you to select the Studio Pro version you are targeting; we recommend you choose version 11.
57+
The last question allows you to select the Studio Pro version you are targeting; Mendix recommends choosing version 11.
6058

6159
{{% alert color="info" %}}
6260
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:
@@ -155,17 +153,8 @@ If the last two questions of the extension generator were answered and you have
155153

156154
This will run Studio Pro in extension development mode and open the configured application. You will see a new `Extensions` item in the top menu.
157155

158-
## Conclusion
159-
160-
Using this guide we have:
161-
162-
* Created a new app
163-
* Used the extension generator to get started with extension development
164-
* Built the extension and installed it in our app
165-
* Tested and debugged our extension from within Visual Studio Code
166-
167156
## Extensibility Feedback
168157

169-
If you would like to provide us with some additional feedback you can complete a small [Survey](https://survey.alchemer.eu/s3/90801191/Extensibility-Feedback)
158+
If you would like to provide additional feedback, you can complete a small [survey](https://survey.alchemer.eu/s3/90801191/Extensibility-Feedback).
170159

171-
Any feedback is much appreciated.
160+
Any feedback is appreciated.

content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/app-explorer-api.md

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,20 @@ url: /apidocs-mxsdk/apidocs/web-extensibility-api-11/app-explorer-api/
66

77
## Introduction
88

9-
This how-to describes how to interact with the App Explorer in Studio Pro.
9+
This how-to describes how to interact with the App Explorer in Studio Pro. In this example, you create a menu which will show for each microflow in the App Explorer.
1010

1111
## Prerequisites
1212

13-
This how-to uses the results of [Get Started with the Web Extensibility API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/getting-started/). Please complete that how-to before starting this one. You should also be familiar with command registration as described in [Register a Command Using Web API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/command-api/).
13+
Before starting this how-to, make sure you have completed the following prerequisites:
14+
15+
* This how-to uses the results of [Get Started with the Web Extensibility API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/getting-started/). Complete that how-to before starting this one.
16+
* Make sure you are familiar with command registration, as described in [Register a Command Using Web API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/command-api/).
1417

1518
## Creating a Context Menu
1619

17-
In this example, you will create a menu which will show for each microflow in the App Explorer. Use the full name of the document type to specify which type of document a menu should belong to (for example, `Microflows$Microflow` for microflows or `Pages$Page` for pages). The documentation for these document type names can be found at [Access a Mendix Model Using Web API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/model-api/).
20+
{{% alert color="info" %}}
21+
Use the full name of the document type to specify which type of document a menu should belong to (for example, `Microflows$Microflow` for microflows or `Pages$Page` for pages). For more information about these document type names, see [Access a Mendix Model Using Web API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/model-api/).
22+
{{% /alert %}}
1823

1924
The code below does the following:
2025

@@ -55,12 +60,8 @@ The payload of the command must be an object containing a document Id (`{ docume
5560
The command must be registered before creating the menu.
5661
{{% /alert %}}
5762

58-
## Conclusion
59-
60-
You have seen how to create context menus for a document node in the App Explorer. The menu executes a previously registered command.
61-
6263
## Extensibility Feedback
6364

64-
If you would like to provide us with additional feedback, you can complete a small [survey](https://survey.alchemer.eu/s3/90801191/Extensibility-Feedback).
65+
If you would like to provide additional feedback, you can complete a small [survey](https://survey.alchemer.eu/s3/90801191/Extensibility-Feedback).
6566

6667
Any feedback is appreciated.

content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/command-api.md

Lines changed: 23 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -10,24 +10,23 @@ This how-to describes how to register a command in Studio Pro from an extension.
1010

1111
## Prerequisites
1212

13-
This how-to uses the results of [Get Started with the Web Extensibility API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/getting-started/). Please complete that how-to before starting this one. You should also be familiar with creating menus as described in [Create a Menu Using Web API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/menu-api/).
13+
Before starting this how-to, make sure you have completed the following prerequisites:
14+
15+
* This how-to uses the results of [Get Started with the Web Extensibility API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/getting-started/). Complete that how-to before starting this one.
16+
* Make sure you are familiar with creating menus as described in [Create a Menu Using Web API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/menu-api/).
1417

1518
## Register Commands
1619

17-
The Commands API allows users to register a reusable command. These commands can be attached to menus and context menus. At this time, two APIs make use of this feature:
20+
The Commands API allows you to register a reusable command that can be attached to menus and context menus. At this time, two APIs support this feature:
1821

1922
* [Documents API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/)
2023
* [App Explorer API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/app-explorer-api/)
2124

22-
To register commands, you can call the Commands API `registerCommand`.
23-
24-
In the sample code below, we register a command, then attach it to a menu by setting the property `commandId` to the `Menu` object.
25+
## Using `registerCommand` API
2526

26-
{{% alert color="info" %}}
27-
The `registerCommand` requires a generic type for the command payload once executed. For standalone menus that have a command without payload, you can register it with `<void>`. When using `void`, the generic type declaration can also be left out (for example, `registerCommand<void>(commandId...)` becomes `registerCommand(commandId...)`).
28-
{{% /alert %}}
27+
To register commands, use the Commands API `registerCommand`.
2928

30-
For commands that require payload, you must make sure you register the command with the exact expected payload object type. See the [App Explorer API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/app-explorer-api/) and [Documents API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/documents-api/) documentation for clear examples.
29+
In the sample code below, we register a command, then attach it to a menu by setting the property `commandId` to the `Menu` object.
3130

3231
```typescript
3332
import { ComponentContext, IComponent, Menu, StudioProApi, getStudioProApi } from "@mendix/extensions-api";
@@ -55,20 +54,30 @@ export const component: IComponent = {
5554
}
5655
```
5756

58-
It is also possible to create a context menu that belongs to a document in the App Explorer or a document editor, and that menu can have a registered command attached to it. To do so, you can use the [App Explorer API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/app-explorer-api/) or the [Documents API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/documents-api/).
57+
## Payloads
58+
59+
The `registerCommand` requires a generic type for the command payload once executed.
60+
61+
* For commands without payload, use `<void>`. When using `void`, the generic type declaration can also be left out (for example, `registerCommand<void>(commandId...)` becomes `registerCommand(commandId...)`).
62+
* For commands that require payload, make sure the payload type matches the expected structure.
5963

60-
The command registration for commands that interact with documents are slightly different. They require a payload of type `{ documentId: string }`; the backend will return the menu when it is clicked. The `documentId` is the id of the exact document that was interacted with by the menu.
64+
See the [App Explorer API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/app-explorer-api/) and [Documents API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/documents-api/) documentation for examples.
65+
66+
## Context Menu Integration
6167

6268
{{% alert color="info" %}}
6369
The command must be registered before creating any menus that might be attached to it.
6470
{{% /alert %}}
6571

66-
## Conclusion
72+
You can attach registered commands to context menus in:
73+
74+
* [App Explorer API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/app-explorer-api/)
75+
* [Documents API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/documents-api/).
6776

68-
You have seen how to register commands that can be attached to menus in Studio Pro.
77+
The command registration for commands that interact with documents require a payload of type `{ documentId: string }`. The `documentId` is the id of the exact document that was interacted with by the menu. The backend will return the menu when it is clicked.
6978

7079
## Extensibility Feedback
7180

72-
If you would like to provide us with additional feedback, you can complete a small [survey](https://survey.alchemer.eu/s3/90801191/Extensibility-Feedback).
81+
If you would like to provide additional feedback, you can complete a small [survey](https://survey.alchemer.eu/s3/90801191/Extensibility-Feedback).
7382

7483
Any feedback is appreciated.

0 commit comments

Comments
 (0)