Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,6 @@ For information on new releases of the Extensibility API see:

## Introduction

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

The API is provided in two flavors, depending which language you are developing in. C# and web based (via Typescript):
The API is provided in two sections, depending on the language you are developing in:
Original file line number Diff line number Diff line change
@@ -1,21 +1,25 @@
---
title: "Add Menus and Submenus to Studio Pro Using C#"
title: "Add Menus and Sub-menus to Studio Pro Using C#"
linktitle: "Structured Menus"
url: /apidocs-mxsdk/apidocs/csharp-extensibility-api-11/add-menu/
weight: 15
---

## Introduction

This how-to describes how you can add a menu that contains submenus, some of which also contain submenus of their own. Before you start this how-to, it is recommended to [Create a Menu Extension Using C#](/apidocs-mxsdk/apidocs/csharp-extensibility-api-11/create-menu-extension/) first.
This how-to describes how to add a menu that contains sub-menus, some of which also contain sub-menus of their own.

You can download the example in this how-to in [this GitHub repository](https://github.com/mendix/ExtensionAPI-Samples).

## Creating Menu Extension Class
## Prerequisites

1. Open the project that you previously created when you followed [Create a Menu Extension Using C#](/apidocs-mxsdk/apidocs/csharp-extensibility-api-11/create-menu-extension/).
This how-to uses the results of [Create a Menu Extension Using C#](/apidocs-mxsdk/apidocs/csharp-extensibility-api-11/create-menu-extension/). Complete that how-to before starting this one.

## Creating the Menu Extension Class

1. Open the project you created when following [Create a Menu Extension Using C#](/apidocs-mxsdk/apidocs/csharp-extensibility-api-11/create-menu-extension/).
2. Add a new class to the project and name it `MyMenuExtension.cs`.
3. Replace the code in the file with the following code:
3. Replace the code in the file with the following:

```csharp
using Mendix.StudioPro.ExtensionsAPI.UI.Menu;
Expand Down Expand Up @@ -57,10 +61,41 @@ You can download the example in this how-to in [this GitHub repository](https://
}
```

The code above creates a single menu, `Beverages`, which contains the submenus `Hot` and `Cold`, both of which contain some submenus. Note that when you are creating this menu structure, you only return the main parent menu (in this example, the `Beverages` menu) from the `GetMenus` method. You should only return the topmost parents in your list, so only the ones that do not have a parent should be returned. In the example above, there is only one.
### Menu Structure Overview

The code above creates a single menu, `Beverages`. This menu contains the following:

* `Beverages` contain two sub-menus: `Hot` and `Cold`
* `Hot` contains `Coffee` and `Tea`
* `Coffee` contains `Black Coffee`, `Decaf`, and `Espresso`
* `Espresso` contains `Regular Espresso` and `Ristretto`
* `Cold` contains `Soda`

Only the top-most parent menu (`Beverages`) is returned from the `GetMenus` method. You should only return menus that do not have a parent.

### Menu Placement

If an app contains one or more extensions, a top-level menu named `Extensions` will appear in the main menu bar of Studio Pro.

Menus that are created from `MenuExtension` implementations are grouped by their extension entry point name (in this example, `MyCompany`), and are placed under a dedicated sub-menu. For example, `MyMenuExtension` will be placed as follows: **Extensions** > **MyCompany** > **MyMenuExtension**.

### Menu Properties

A menu can either:

* Be a parent (a menu that contains sub-menus), or
* Have an action

You cannot create a menu that both contains sub-menus and has an action.

#### Separators

You can add a `MenuSeparator` to a menu using the `Separator` property. The options include:

If an app contains one or more extensions, a top-level menu named `Extensions` will appear in the main menu bar of Studio Pro. Menus that are created from `MenuExtension` implementations will be grouped by their extension entry point name (in this example, `MyCompany`), and then placed under their own dedicated submenu under the main `Extensions` top-level menu. For example, the `MyMenuExtension` above will be placed as follows: **Extensions** > **MyCompany** > **MyMenuExtension**.
* `After`
* `Before`
* `None` (default).

A menu can only be a parent (namely, a menu that contains submenus) or have an action. You cannot create a menu with an action which also contains submenus.
#### Enabling and Disabling Menus

You can add a `MenuSeparator` to a menu, via the `Separator` property. Options are `After`, `Before` or `None`. The default value is `None`. You can also disable a menu by setting its `IsEnabled` property to `false`. Menus are enabled by default.
Menus are enabled by default. To disable a menu, set its `IsEnabled` property to `false`.
Original file line number Diff line number Diff line change
Expand Up @@ -4,26 +4,32 @@ url: /apidocs-mxsdk/apidocs/extensibility-api-11/packaging-your-extension
weight: 30
---

# Packaging your extension
## Packaging your Extension

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

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.
To package your extension, follow the steps below:

![Extension Add-on Module](/attachments/apidocs-mxsdk/apidocs/extensibility-api/extensionAddOnModule.png)
1. Make sure the`--enable-extension-development` command-line option is enabled.
2. In your Studio Pro app, create a new module and include your development extension.
3. Give the module a name.
4. Open the module's settings and in the **Export** tab, choose **Add-on module**.
5. In the **Extension name** drop-down, select the extension you want to package into it.

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.
{{< figure src="/attachments/apidocs-mxsdk/apidocs/extensibility-api/extensionAddOnModule.png" width="500" >}}

![Export Module](/attachments/apidocs-mxsdk/apidocs/extensibility-api/exportAddOnModule.png)
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**.

{{< figure src="/attachments/apidocs-mxsdk/apidocs/extensibility-api/exportAddOnModule.png" width="500" >}}

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

# Importing the extension add-on module
## Importing the Extension Add-on Module

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.
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**.

![Import Module](/attachments/apidocs-mxsdk/apidocs/extensibility-api/importAddOnModule.png)
{{< figure src="/attachments/apidocs-mxsdk/apidocs/extensibility-api/importAddOnModule.png" width="300" >}}

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

![Trust Extension](/attachments/apidocs-mxsdk/apidocs/extensibility-api/trustExtension.png)
{{< figure src="/attachments/apidocs-mxsdk/apidocs/extensibility-api/trustExtension.png" width="500" >}}
Original file line number Diff line number Diff line change
Expand Up @@ -13,35 +13,40 @@ weight: 20

## Introduction

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/).
Extensions can be written in TypeScript or other web languages, described here, or using a C# API (for more information about the C# API, see [Extensibility API for C# Developers](/apidocs-mxsdk/apidocs/csharp-extensibility-api-11/)).

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

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).

## Prerequisites

* You need at least a basic understanding of the Mendix platform.
* You need some understanding of the Mendix Model.
* You need to have some TypeScript development experience.
To use the Web Extensibility API, you must have:

* A basic understanding of the Mendix platform
* Some understanding of the Mendix Model
* Some TypeScript development experience

## Getting Started

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/).
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/).

## How-tos

Here is a list of how-tos for you to begin with:

* [How to Create a Dockable Pane Using Web API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/dockable-pane-api/)
* [How to Interact With Local App Files Using Web API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/local-app-files-api/)
* [How to Create a Menu Using Web API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/menu-api/)
* [How to Show a Message Box Using Web API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/messagebox-api/)
* [How to Access a Mendix Model Using Web API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/model-api/)
* [How to Open a Tab Using Web API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/tab-api/)
* [How to Show a Popup Notification Using Web API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/notification-api/)
* [How to View User Preferences Using Web API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/preference-api/)
* [How to Show a Modal Dialog Using Web API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/dialog-api/)
* [How to Open Documents Using Web API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/editor-api/)
* [How to Use the App Explorer](/apidocs-mxsdk/apidocs/web-extensibility-api-11/app-explorer-api/)
* [How to Create a Dockable Pane](/apidocs-mxsdk/apidocs/web-extensibility-api-11/dockable-pane-api/)
* [How to Interact With Local App Files](/apidocs-mxsdk/apidocs/web-extensibility-api-11/local-app-files-api/)
* [How to Create a Menu](/apidocs-mxsdk/apidocs/web-extensibility-api-11/menu-api/)
* [How to Show a Message Box](/apidocs-mxsdk/apidocs/web-extensibility-api-11/messagebox-api/)
* [How to Access a Mendix Model](/apidocs-mxsdk/apidocs/web-extensibility-api-11/model-api/)
* [How to Open a Tab](/apidocs-mxsdk/apidocs/web-extensibility-api-11/tab-api/)
* [How to Show a Pop-up Notification](/apidocs-mxsdk/apidocs/web-extensibility-api-11/notification-api/)
* [How to View User Preferences](/apidocs-mxsdk/apidocs/web-extensibility-api-11/preference-api/)
* [How to Show a Modal Dialog](/apidocs-mxsdk/apidocs/web-extensibility-api-11/dialog-api/)
* [How to Open a Document Editor](/apidocs-mxsdk/apidocs/web-extensibility-api-11/editor-api/)
* [How to Register a Command](/apidocs-mxsdk/apidocs/web-extensibility-api-11/command-api/)
* [How to Create a Context Menu](/apidocs-mxsdk/apidocs/web-extensibility-api-11/documents-api/)
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ weight: 2

## 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.
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.

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

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

* [Mendix Studio Pro](https://marketplace.mendix.com/link/studiopro) version 11.2.0 or higher.
* A development IDE to develop your extensions. We recommend using [Visual Studio Code](https://code.visualstudio.com/).
* Install the latest version 22.x.x of Node: https://nodejs.org/en/download.
* A development IDE to develop your extensions. Mendix recommend using [Visual Studio Code](https://code.visualstudio.com/).
* The latest version 22.x.x of Node: https://nodejs.org/en/download.

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

{{% alert color="info" %}}
Expand All @@ -29,32 +29,28 @@ Extension development is only possible by starting Studio Pro with the `--enable

## Creating Your First Extension

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

### Create a Test App

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

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

### Creating the Extension

To accelerate your extension development, we provide an extension generator that creates a customizable sample extension.
To accelerate your extension development, Mendix provides an extension generator that creates a customizable sample extension.

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.

You will be asked the following:

* Select the programming language (TypeScript is used in our tutorials)
* Select the programming language (TypeScript is used in the tutorials)
* Specify the extension name
* Choose if you will use React for the extension’s UI
* Choose if you will use React for the extension’s UI

The next two questions, while optional, are highly recommended, as they enable direct debugging and deployment from Visual Studio Code.
The next two questions, while optional, are highly recommended, as they enable direct debugging and deployment from Visual Studio Code:

* Specify the path to the Studio Pro executable (this allows Visual Studio Code to automatically attach to Studio Pro for debugging)
* Specify the location of the application `.mpr` package. (This allows for automatic deployment of your extension build to your app)
* Specify the location of the application `.mpr` package (this allows for automatic deployment of your extension build to your app)

The final question allows you to select the Studio Pro version you are targeting; we recommend you choose version 11.

Expand All @@ -73,7 +69,7 @@ containing the source code of the extension.

In the following example, the name of your extension is `myextension` and you are exploring it using Visual Studio Code.

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

In the source code, you should see the following:

Expand Down Expand Up @@ -155,17 +151,8 @@ If the last two questions of the extension generator were answered and you have

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.

## Conclusion

Using this guide we have:

* Created a new app
* Used the extension generator to get started with extension development
* Built the extension and installed it in our app
* Tested and debugged our extension from within Visual Studio Code

## Extensibility Feedback

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)
If you would like to provide additional feedback, you can complete a small [survey](https://survey.alchemer.eu/s3/90801191/Extensibility-Feedback).

Any feedback is much appreciated.
Any feedback is appreciated.
Original file line number Diff line number Diff line change
Expand Up @@ -9,4 +9,4 @@ description_list: true

## Introduction

The following how-tos teach you how to use the Extensibility API for Web Developers in different use cases.
The following how-tos describe how to use the Extensibility API for Web Developers in different use cases:
Loading