Skip to content

Commit 5f60653

Browse files
quinntracyquinntracy
committed
Review
1 parent e9d6a92 commit 5f60653

3 files changed

Lines changed: 81 additions & 55 deletions

File tree

‎content/en/docs/apidocs-mxsdk/apidocs/studio-pro-10/extensibility-api/csharp/extensibility-api-howtos/create-context-menu.md‎

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,19 @@ weight: 6
77

88
## Introduction
99

10-
It is possible to add a context menu to an `IEntity` in Studio Pro or to a `IDocument`, such as microflows and pages, etc. Context menus will be placed under a menu named after the extension that contains them (e.g. `MyExtension`) and context menus can modify those items they relate to. You can achieve this simple by specifying the type when creating the extension.
11-
12-
This how-to describes how you can add a context menu to an entity. Before you start this how-to, it is recommended to [Create a Menu Extension Using C#](/apidocs-mxsdk/apidocs/csharp-extensibility-api-10/create-menu-extension/) first.
10+
You can add a context menu to an `IEntity` in Studio Pro or to a `IDocument`, such as microflows and pages. These context menus will appear under a menu named after the extension that contains them (for example, `MyExtension`) and can modify the items they relate to. This is achieved by specifying the type when creating the extension.
1311

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

14+
## Prerequisites
15+
16+
Before you start this how-to, it is recommended to [Create a Menu Extension Using C#](/apidocs-mxsdk/apidocs/csharp-extensibility-api-10/create-menu-extension/) first.
17+
1618
## Creating an Entity Context Menu Extension Class
1719

18-
1. Open the project that you previously created when you followed [Create a Menu Extension Using C#](/apidocs-mxsdk/apidocs/csharp-extensibility-api-10/create-menu-extension/).
19-
2. Add a new class to the project and name it `MyEntityContextMenuExtension.cs`.
20-
3. Replace the code in the file with the following code:
20+
1. Open the project you previously created by following [Create a Menu Extension Using C#](/apidocs-mxsdk/apidocs/csharp-extensibility-api-10/create-menu-extension/).
21+
2. Add a new class to the project named *MyEntityContextMenuExtension.cs*.
22+
3. Replace the code in the file with the following:
2123

2224
```csharp
2325
namespace MyCompany.MyProject.MendixExtension;
@@ -90,15 +92,20 @@ You can download the example in this how-to in [this GitHub repository](https://
9092
}
9193
```
9294

93-
The code above creates a series of context menu items for any entity. It is important to note the type `IEntity` is passed in so that the context menu will only apply to entities. It adds menus using the same logic as `MenuExtension.cs`. For more examples, see [Create a Menu Extension Using C#](/apidocs-mxsdk/apidocs/csharp-extensibility-api-10/create-menu-extension/).
95+
The code above creates a series of context menu items for any entity. The menus allow you to:
9496

95-
In the code above, you can see a few context menus that can perform changes on the entity they belong to. In The entity's location on the canvas can be changed, it can be renamed, and some of its information is shown in a message box.
97+
* Rename the entity
98+
* Change the entity's location on the canvas
99+
* Display entity information in a message box
100+
* Enable a previously disabled menu item
96101

97-
It is also possible to add menus that are disabled until some action is performed.
102+
{{% alert type="info" %}}
103+
The type `IEntity` is passed so the context menu will only apply to entities. It adds menus using the same logic as `MenuExtension.cs`. For more examples, see [Create a Menu Extension Using C#](/apidocs-mxsdk/apidocs/csharp-extensibility-api-10/create-menu-extension/).
104+
{{% /alert %}}
98105

99106
## Adding a Context Menu to a Document
100107

101-
You can also add a context menu to a document. All you have to do is specify the type `IDocument` in the context menu extension.
108+
You can also add a context menu to a document. To do this, specify the type `IDocument` in your context menu extension.
102109

103110
```csharp
104111
namespace MyCompany.MyProject.MendixExtension;

‎content/en/docs/apidocs-mxsdk/apidocs/studio-pro-10/extensibility-api/csharp/extensibility-api-howtos/create-dockable-pane.md‎

Lines changed: 27 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,19 @@ weight: 5
77

88
## Introduction
99

10-
This how-to describes how you can add a custom dockable web pane window to Studio Pro. Before you start this how-to, it is recommended to [Create a Menu Extension Using C#](/apidocs-mxsdk/apidocs/csharp-extensibility-api-10/create-menu-extension/) first.
10+
This how-to describes how to add a custom dockable web pane window to Studio Pro.
1111

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

14+
## Prerequisites
15+
16+
Before you start this how-to, it is recommended to [Create a Menu Extension Using C#](/apidocs-mxsdk/apidocs/csharp-extensibility-api-10/create-menu-extension/) first.
17+
1418
## Creating a Dockable Pane Extension Class
1519

16-
1. Open the project that you previously created when you followed [Create a Menu Extension Using C#](/apidocs-mxsdk/apidocs/csharp-extensibility-api-10/create-menu-extension/).
17-
2. Add a new class to the project and name it `MyDockablePaneExtension.cs`.
18-
3. Replace the code in the file with the following code:
20+
1. Open the project you previously created by following [Create a Menu Extension Using C#](/apidocs-mxsdk/apidocs/csharp-extensibility-api-10/create-menu-extension/).
21+
2. Add a new class to the project named *MyDockablePaneExtension.cs*.
22+
3. Replace the code in the file with the following:
1923

2024
```csharp
2125
using System.ComponentModel.Composition;
@@ -33,13 +37,13 @@ You can download the example in this how-to in [this GitHub repository](https://
3337
}
3438
```
3539

36-
## The View Model for the Extension Tab
40+
## Creating The View Model for the Extension Tab
3741

38-
The dockable pane will have content, and this content comes in the form of a view model. The view model is an implementation of `WebViewDockablePaneViewModel`.
42+
The dockable pane has content, which is provided through a view model. The view model is an implementation of `WebViewDockablePaneViewModel`.
3943

40-
You need to override the `InitWebView` method in which you can set up the content of your web view inside the dockable pane. In this example, it will contain the home page of `http://mendix.com`.
44+
Override the `InitWebView` method, where you can set up the content of your web view inside the dockable pane. In this example, it contains the `http://mendix.com` home page.
4145
42-
Below is a small example code of the view model:
46+
Below is a code example of the view model:
4347

4448
```csharp
4549
using Mendix.StudioPro.ExtensionsAPI.UI.DockablePane;
@@ -57,7 +61,12 @@ public class MyDockablePaneExtensionWebViewModel(string homePage) : WebViewDocka
5761
{{% snippet file="/static/_includes/apidocs-mxsdk/warning-wwwroot.md" %}}
5862
{{% /alert %}}
5963

60-
The code above creates a new web-enabled tab view. You still need a way to show the new dockable pane. To do so, you need to modify the menu extension you added when you followed [Create a Menu Extension Using C#](/apidocs-mxsdk/apidocs/csharp-extensibility-api-10/create-menu-extension/). Simple replace the existing content of `MyMenuExtension.cs` with the following code:
64+
## Displaying the Pane Through a Menu
65+
66+
To show the new dockable pane, modify the extension you created when following [Create a Menu Extension Using C#](/apidocs-mxsdk/apidocs/csharp-extensibility-api-10/create-menu-extension/).
67+
68+
1. Open `MyMenuExtension.cs`.
69+
2. Replace its contents with the following code:
6170

6271
```csharp
6372
using System.ComponentModel.Composition;
@@ -77,17 +86,20 @@ public class MyMenuExtension(IDockingWindowService dockingWindowService, IMessag
7786
}
7887
```
7988

80-
The code above introduces a few new concepts.
89+
The code above introduces the following concepts:
90+
91+
* The `IDockingWindowService` is injected to allow opening the dockable pane
92+
* A new menu item named *Open My Dockable Pane* is added to trigger the pane using the `IDockingWindow` service
8193

82-
Firstly, you inject the `IDockingWindowService` so that you can open a new dockable pane.
94+
Once you have made these changes, build your project. If you have opted to not automatically copy the output to the destination folder, manually copy the bin output from your project to your extension folder you created when you followed the [Create a Menu Extension Using C#](/apidocs-mxsdk/apidocs/csharp-extensibility-api-10/create-menu-extension/) process.
8395

84-
Secondly, you add a new menu item with the caption **Open My Dockable Pane** that you will use to open your new dockable pane using the `IDockingWindow` service that you have injected.
96+
## Showing a Dockable Pane Without a Custom Menu
8597

86-
In order for the changes to reflect, you need to build your project. If you have opted to not automatically copy the output to the destination folder, then you will also need to manually copy the bin output from your project to your extension folder you created when you followed [Create a Menu Extension Using C#](/apidocs-mxsdk/apidocs/csharp-extensibility-api-10/create-menu-extension/).
98+
If you prefer to not add a separate menu item to open the docking pane, you can override the `ViewMenuCaption` property in the `DockablePaneExtension` implementation.
8799

88-
## Showing a Dockable Pane Without Adding a Custom Menu
100+
This places the menu under the `View` top-level menu in Studio Pro using the caption provided. In this case, you do not need a separate `MenuExtension` class.
89101

90-
Instead of adding a separate menu to open the docking pane, you can override the `ViewMenuCaption` property in the implementation of the `DockablePaneExtension`. This means that the menu that opens will be placed under the `View` top-level menu in Studio Pro and will have the caption provided. There is no need for a separate `MenuExtension` in this case.
102+
```csharp
91103

92104
```csharp
93105
public override string? ViewMenuCaption => "My pane without custom menu";

‎content/en/docs/apidocs-mxsdk/apidocs/studio-pro-10/extensibility-api/csharp/extensibility-api-howtos/create-menu-extension.md‎

Lines changed: 37 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,20 @@ weight: 4
77

88
## Introduction
99

10-
This how-to describes how you can create an extension that adds an item to Studio Pro menu from scratch.
10+
This how-to describes how to create an extension that adds an item to Studio Pro menu from scratch.
1111

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

1414
## Creating an Extension Project
1515

16-
1. Create a new project in Visual Studio based on `C# Class Library` template.
17-
2. Choose a name for the project. Use a format similar to `MyCompany.MyProject.MendixExtension`, but it is not a hard requirement.
18-
3. Choose `.NET 8.0` Framework.
16+
1. Open Visual Studio and create a new project using the `C# Class Library` template.
17+
2. Name your project. It recommended to use a format similar to `MyCompany.MyProject.MendixExtension`.
18+
3. Select the `.NET 8.0` Framework.
1919
4. Add `Mendix.StudioPro.ExtensionsAPI` NuGet package to the project references. Pick the version that does not exceed the Studio Pro version you installed. To do so, perform the following steps:
2020

2121
1. Include a reference to the Extensions API [NuGet package](https://www.nuget.org/packages/Mendix.StudioPro.ExtensionsAPI):
22-
2. Add new file named `manifest.json` to your project. Put the following content into it:
22+
2. Add new file named `manifest.json` to your project.
23+
3. Add the following code into the file:
2324

2425
```json
2526
{ "mx_extensions": [ "<name_of_your_project>.dll" ] }
@@ -29,21 +30,24 @@ You can download the example in this how-to in [this GitHub repository](https://
2930

3031
## Creating a Test Mendix App
3132

32-
It is handy to have an app where the extension is used for the testing purposes. Perhaps you even want to share this app with your team by committing its code next to the extension project.
33-
34-
1. Create a new Mendix app to use for testing the extension, based on a starter app of your choice. You can also use an existing app.
35-
2. Go to **App** > **Show App Directory in Explorer** to open the app directory.
36-
3. Create a new folder `extensions` inside the app directory.
37-
4. Create a subfolder named after your extension, for example, `MyCompany`, inside the `extensions` folder.
38-
5. Copy the full path of the subfolder by pressing <kbd>Shift</kbd> and right-clicking at the same time, and then selecting **Copy as path**.
39-
6. Add the `Post-build event` script below to your extension project [Build > Events configuration](https://docs.microsoft.com/en-us/visualstudio/ide/how-to-specify-build-events-csharp?view=vs-2022):
40-
`xcopy /y /s /i "$(TargetDir)" "<path_to_folder>"`
41-
42-
Now if you build your extension project (usually you can do this by pressing <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>B</kbd>) and click [Synchronize App Directory](/refguide/app-menu/#synchronize) in Studio Pro (or press <kbd>F4</kbd>), the latest version of your extension will be loaded.
33+
Test your extension by creating or using a Mendix app.
34+
35+
1. Create a new Mendix app using a starter template, or use an existing app.
36+
2. In Studio Pro, go to **App** > **Show App Directory in Explorer** to open the app directory.
37+
3. Inside the app directory, create a new folder named *Extensions*.
38+
4. Inside the **Extensions** folder, create a sub-folder named after your extension (for example, *MyCompany*).
39+
5. Copy the full path of the sub-folder:
40+
1. Press <kbd>Shift</kbd> and right-click at the same time
41+
2. Select **Copy as path**.
42+
6. Add the `Post-build event` script below to your extension project:
43+
1. Go to [Build > Events configuration](https://docs.microsoft.com/en-us/visualstudio/ide/how-to-specify-build-events-csharp?view=vs-2022)
44+
2. Use this command: `xcopy /y /s /i "$(TargetDir)" "<path_to_folder>"`
45+
7. Build your extension project by pressing <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>B</kbd>
46+
8. In Studio Pro, click [Synchronize App Directory](/refguide/app-menu/#synchronize) (or press <kbd>F4</kbd>) to load the latest version of your extension.
4347

4448
## Creating Your First Extension
4549

46-
To introduce a simple extension that adds a menu item to Studio Pro, add the following class:
50+
To add a menu item to Studio Pro, add the following class:
4751

4852
```csharp
4953
using System.ComponentModel.Composition;
@@ -63,11 +67,13 @@ public class MyMenuExtension(IMessageBoxService messageBoxService) : MenuExtensi
6367
}
6468
```
6569

66-
Build your extension and press <kbd>F4</kbd> in Studio Pro. Extension menu items are placed under a corresponding menu with the extensions name. If your extension is named "My Extension", then your menu items will be located under the **Extensions** > **My Company** submenu.
70+
Build your extension and press <kbd>F4</kbd> in Studio Pro. Menu items are placed under a corresponding menu with the extensions name. For example, if your extension is named *My Extension*, your menu items will be located under the **Extensions** > **MyCompany** sub-menu.
71+
72+
The Extensibility API provides several services you can use and are injected into your extension classes by using the `ImportingConstructor` attribute.
6773

68-
The Extensibility API provides you with several services you can use and they are injected into your extension classes by using the `ImportingConstructor` attribute.
74+
## Subscribing to Extension Events
6975

70-
It is also possible to get notified when your extension has been successfully loaded into Studio Pro and also just before it gets unloaded. It is as simple as subscribing to the `ExtensionLoaded` and `ExtensionUnloading` events.
76+
You can be notified when your extension has been successfully loaded and unloaded from Studio Pro by subscribing to the `ExtensionLoaded` and `ExtensionUnloading` events.
7177

7278
```csharp
7379
using Mendix.StudioPro.ExtensionsAPI.UI.Events;
@@ -88,23 +94,24 @@ public class MyMenuExtension() : MenuExtension
8894

8995
## Debugging Your Extension
9096

91-
1. Make sure that the current version of the extension code is loaded in Studio Pro.
92-
2. Attach to Studio Pro process in Visual Studio debugger as follows:
93-
1. On the **Debug** menu, open the **Attach to Process** dialog box (or press <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>P</kbd>).
94-
2. Search for `studiopro.exe` among the processes.
95-
3. Select the only found process (or the one with correct title, if you have many) and select **Attach**.
97+
1. Ensure the latest version of the extension code is loaded in Studio Pro.
98+
2. Attach the Visual Studio debugger to Studio Pro:
99+
1. Go to **Debug** > **Attach to Process** dialog box (or press <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>P</kbd>).
100+
2. Search for and select `studiopro.exe`.
101+
3. Click **Attach**.
96102

97-
3. Add a Breakpoint inside `Action` delegate in `MyMenuExtension.GetMenus()`. It will be hit when you click **Extensions** > **MyCompany** > **Say hello** menu item.
103+
3. Add a breakpoint inside the `Action` delegate in `MyMenuExtension.GetMenus()`.
104+
4. Trigger the breakpoint by clicking **Extensions** > **MyCompany** > **Say hello** menu item.
98105

99106
## Adding a NuGet Dependency
100107

101-
You can freely use [NuGet packages](https://www.nuget.org/) from extensions to access reusable .NET libraries. The following one-time additional setup is required:
108+
You can access reusable .NET libraries via [NuGet](https://www.nuget.org/) Follow the steps below for a one-time setup:
102109

103-
1. Open your extension project `.csproj` file by right-clicking **Solution Explorer** > **Edit Project File**.
104-
2. Add the following line into the first `<PropertyGroup>`:
110+
1. In Visual Studio, open your extension project `.csproj` file by right-clicking **Solution Explorer** > **Edit Project File**.
111+
2. Add the following line inside the first `<PropertyGroup>`:
105112

106113
```xml
107114
<CopyLocalLockFileAssemblies>true</CopyLocalLockFileAssemblies>
108115
```
109116

110-
Then you can add a NuGet dependency, for example, using the **Manage NuGet Packages** menu.
117+
3. Use the **Manage NuGet Packages** to add a dependency.

0 commit comments

Comments
 (0)