From 4c1b551a0d7bbd65526dbb701fa5b726ce2a29c5 Mon Sep 17 00:00:00 2001 From: Ester Uras Date: Thu, 3 Jul 2025 14:55:33 +0200 Subject: [PATCH 1/4] Remove weights to allow alphabetical default sorting --- .../extensibility-api/web/web-extensions-howtos/dialog-api.md | 1 - .../web/web-extensions-howtos/dockable-pane-api.md | 1 - .../web/web-extensions-howtos/local-app-files-api.md | 1 - .../extensibility-api/web/web-extensions-howtos/menu-api.md | 1 - .../web/web-extensions-howtos/messagebox-api.md | 1 - .../extensibility-api/web/web-extensions-howtos/model-api.md | 1 - .../web/web-extensions-howtos/notification-api.md | 1 - .../web/web-extensions-howtos/preference-api.md | 1 - .../extensibility-api/web/web-extensions-howtos/tab-api.md | 1 - 9 files changed, 9 deletions(-) diff --git a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/dialog-api.md b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/dialog-api.md index 579d71d2197..05ed4000e66 100644 --- a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/dialog-api.md +++ b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/dialog-api.md @@ -2,7 +2,6 @@ title: "Open a Modal Dialog Using Web API" linktitle: "Open a Modal Dialog" url: /apidocs-mxsdk/apidocs/web-extensibility-api-11/dialog-api/ -weight: 60 --- ## Introduction diff --git a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/dockable-pane-api.md b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/dockable-pane-api.md index 19d704867e2..ac3ee3d0d50 100644 --- a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/dockable-pane-api.md +++ b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/dockable-pane-api.md @@ -2,7 +2,6 @@ title: "Create a Dockable Pane Using Web API" linktitle: "Dockable Pane" url: /apidocs-mxsdk/apidocs/web-extensibility-api-11/dockable-pane-api/ -weight: 10 --- ## Introduction diff --git a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/local-app-files-api.md b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/local-app-files-api.md index bb03c444cd7..7684b405e19 100644 --- a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/local-app-files-api.md +++ b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/local-app-files-api.md @@ -2,7 +2,6 @@ title: "Interact With Local App Files Using Web API" linktitle: "Local Files" url: /apidocs-mxsdk/apidocs/web-extensibility-api-11/local-app-files-api/ -weight: 20 --- ## Introduction diff --git a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/menu-api.md b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/menu-api.md index 596b5a87d2a..1ea6efd642e 100644 --- a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/menu-api.md +++ b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/menu-api.md @@ -2,7 +2,6 @@ title: "Create a Menu Using Web API" linktitle: "Create Menu" url: /apidocs-mxsdk/apidocs/web-extensibility-api-11/menu-api/ -weight: 30 --- ## Introduction diff --git a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/messagebox-api.md b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/messagebox-api.md index 16585622234..eb0db3cd6e7 100644 --- a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/messagebox-api.md +++ b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/messagebox-api.md @@ -2,7 +2,6 @@ title: "Show a Message Box Using Web API" linktitle: "Message Box" url: /apidocs-mxsdk/apidocs/web-extensibility-api-11/messagebox-api/ -weight: 50 --- ## Introduction diff --git a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/model-api.md b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/model-api.md index 14c7003a1cd..da8ef22853f 100644 --- a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/model-api.md +++ b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/model-api.md @@ -2,7 +2,6 @@ title: "Access a Mendix Model Using Web API" linktitle: "Mendix Model" url: /apidocs-mxsdk/apidocs/web-extensibility-api-11/model-api/ -weight: 40 --- ## Introduction diff --git a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/notification-api.md b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/notification-api.md index 40927c800f9..27bf1b7746c 100644 --- a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/notification-api.md +++ b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/notification-api.md @@ -2,7 +2,6 @@ title: "Show a Pop-up Notification Using Web API" linktitle: "Show Notification" url: /apidocs-mxsdk/apidocs/web-extensibility-api-11/notification-api/ -weight: 30 --- ## Introduction diff --git a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/preference-api.md b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/preference-api.md index 969ffa392ad..ae2e0dad12f 100644 --- a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/preference-api.md +++ b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/preference-api.md @@ -2,7 +2,6 @@ title: "Show User's Preferences Using Web API" linktitle: "Show User's Preferences" url: /apidocs-mxsdk/apidocs/web-extensibility-api-11/preference-api/ -weight: 30 --- ## Introduction diff --git a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/tab-api.md b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/tab-api.md index 4b77a972c3f..44292d97aeb 100644 --- a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/tab-api.md +++ b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/tab-api.md @@ -2,7 +2,6 @@ title: "Open a Tab Using Web API" linktitle: "Open a Tab" url: /apidocs-mxsdk/apidocs/web-extensibility-api-11/tab-api/ -weight: 60 --- ## Introduction From 33509af541fe400cda7b4e8b123a7117b94150d3 Mon Sep 17 00:00:00 2001 From: Ester Uras Date: Thu, 3 Jul 2025 14:55:46 +0200 Subject: [PATCH 2/4] Add editor api documentation and sample --- .../extensibility-api/web/_index.md | 1 + .../web/web-extensions-howtos/editor-api.md | 70 +++++++++++++++++++ 2 files changed, 71 insertions(+) create mode 100644 content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/editor-api.md diff --git a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/_index.md b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/_index.md index 8eee5300e38..406cd076709 100644 --- a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/_index.md +++ b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/_index.md @@ -42,3 +42,4 @@ Here is a list of how-tos for you to begin with: * [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/) diff --git a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/editor-api.md b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/editor-api.md new file mode 100644 index 00000000000..91441e38c91 --- /dev/null +++ b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/editor-api.md @@ -0,0 +1,70 @@ +--- +title: "Open a Document Editor Using Web API" +linktitle: "Open a Document Editor" +url: /apidocs-mxsdk/apidocs/web-extensibility-api-11/editor-api/ +--- + +## Introduction + +This how-to describes how to open an existing document editor in Studio Pro from an extension. + +## Prerequisites + +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/). + +## Opening a Document Editor + +Create a menu item. This is done inside the `loaded` event in `Main`. For more information, see [Create a Menu Using Web API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/menu-api/). + +This menu action will look for the `Home_Page` document in `MyFirstModule` and it will then open it with the `editor-api`. Of course you can use any module or any document in your app. For more information, please look at the [model api](/apidocs-mxsdk/apidocs/web-extensibility-api-11/model-api/) + +In a listener event called `menuItemActivated`, write the following code. First we look for the page by its name and by the name of its containing module using the `studioPro.app.model.pages` api. +Then we call `studioPro.ui.editors.editDocument` to open the document by passing its ID. + +```typescript +import { IComponent, studioPro, Menu, Primitives } from "@mendix/extensions-api"; + +const menuId = "open-home-page"; + +studioPro.ui.extensionsMenu.addEventListener("menuItemActivated", async args => { + if (args.menuId === menuId) { + const [page] = await studioPro.app.model.pages.loadAll( + (info: Primitives.UnitInfo) => info.moduleName === "MyFirstModule" && info.name === "Home_Web" + ); + + await studioPro.ui.editors.editDocument(page.$ID); + } +}); + +export const component: IComponent = { + async loaded() { + const menu: Menu = { + caption: "Open Home Page", + menuId + }; + + await studioPro.ui.extensionsMenu.add(menu); + } +}; +``` + +## Active Documents +The editor api also supports notifying the extension when the active document tab gets activated in Studio Pro. It also provides this information on demand, via the `studioPro.ui.editors.getActiveDocument` method. This method returns a `ActiveDocumentInfo` object, which contains the document's name, type, container module name and id. +To get this `ActiveDocumentInfo` object when the active document changes, you can subscribe to the `activeDocumentChanged`. Add the following code to your extension: +```typescript +studioPro.ui.editors.addEventListener("activeDocumentChanged", async ({ info }) => { + if (info) { + studioPro.ui.notifications.show({ + title: "Document Changed Notification", + message: `Name: ${info.documentName}\nID: ${info.documentId}\nType: ${info.documentType}\nModule: ${info.moduleName}`, + displayDurationInSeconds: 5 + }); + } +}); +``` + +## Extensibility Feedback + +If you would like to provide us with additional feedback, you can complete a small [survey](https://survey.alchemer.eu/s3/90801191/Extensibility-Feedback). + +Any feedback is appreciated. From a4035faf6fe1118b061495d9933999227d271fc8 Mon Sep 17 00:00:00 2001 From: Ester Uras Date: Wed, 9 Jul 2025 16:01:15 +0200 Subject: [PATCH 3/4] Review: improve wording. Also add small sample code --- .../web/web-extensions-howtos/editor-api.md | 32 ++++++++++++++----- 1 file changed, 24 insertions(+), 8 deletions(-) diff --git a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/editor-api.md b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/editor-api.md index 91441e38c91..9801fc68026 100644 --- a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/editor-api.md +++ b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/editor-api.md @@ -6,7 +6,7 @@ url: /apidocs-mxsdk/apidocs/web-extensibility-api-11/editor-api/ ## Introduction -This how-to describes how to open an existing document editor in Studio Pro from an extension. +This how-to describes how to open an existing document editor in Studio Pro from within an extension. ## Prerequisites @@ -18,8 +18,7 @@ Create a menu item. This is done inside the `loaded` event in `Main`. For more i This menu action will look for the `Home_Page` document in `MyFirstModule` and it will then open it with the `editor-api`. Of course you can use any module or any document in your app. For more information, please look at the [model api](/apidocs-mxsdk/apidocs/web-extensibility-api-11/model-api/) -In a listener event called `menuItemActivated`, write the following code. First we look for the page by its name and by the name of its containing module using the `studioPro.app.model.pages` api. -Then we call `studioPro.ui.editors.editDocument` to open the document by passing its ID. +In this example, we add an event listener for the `menuItemActivated` event for when a menu gets clicked. When the event triggers, first we look for the page by its name and by the name of its containing module using the `studioPro.app.model.pages` api. Then, we call `studioPro.ui.editors.editDocument` to open the document by passing its ID. See the following code sample to see how this is done. ```typescript import { IComponent, studioPro, Menu, Primitives } from "@mendix/extensions-api"; @@ -49,18 +48,35 @@ export const component: IComponent = { ``` ## Active Documents -The editor api also supports notifying the extension when the active document tab gets activated in Studio Pro. It also provides this information on demand, via the `studioPro.ui.editors.getActiveDocument` method. This method returns a `ActiveDocumentInfo` object, which contains the document's name, type, container module name and id. -To get this `ActiveDocumentInfo` object when the active document changes, you can subscribe to the `activeDocumentChanged`. Add the following code to your extension: +The editor api also supports notifying the extension when the active document tab gets activated in Studio Pro, via the `activeDocumentChanged` event. +It also provides this information on demand, via the `studioPro.ui.editors.getActiveDocument` method. +Both the `getActiveDocument` method and the `activeDocumentChanged` event args returns a `ActiveDocumentInfo` object, which contains the document's name, type, container module name and id. +See the sample code below: + ```typescript -studioPro.ui.editors.addEventListener("activeDocumentChanged", async ({ info }) => { - if (info) { +studioPro.ui.editors.addEventListener("activeDocumentChanged", async ({ activeDocument }) => { + if (activeDocument) { studioPro.ui.notifications.show({ title: "Document Changed Notification", - message: `Name: ${info.documentName}\nID: ${info.documentId}\nType: ${info.documentType}\nModule: ${info.moduleName}`, + message: `Name: ${activeDocument.documentName}\nID: ${activeDocument.documentId}\nType: ${activeDocument.documentType}\nModule: ${activeDocument.moduleName}`, displayDurationInSeconds: 5 }); } }); + +studioPro.ui.extensionsMenu.addEventListener("menuItemActivated", async args => { + if (args.menuId === "getActiveDocumentMenu") { + const activeDocument: ActiveDocumentInfo = studioPro.ui.editors.getActiveDocument(); + + if (activeDocument) { + studioPro.ui.notifications.show({ + title: "Active Document", + message: `Name: ${activeDocument.documentName}\nID: ${activeDocument.documentId}\nType: ${activeDocument.documentType}\nModule: ${activeDocument.moduleName}`, + displayDurationInSeconds: 5 + }); + } + } +}); ``` ## Extensibility Feedback From be2fa97c02040ee6a5f68fe891e7888e4a4f0b51 Mon Sep 17 00:00:00 2001 From: quinntracy Date: Mon, 14 Jul 2025 14:42:23 +0200 Subject: [PATCH 4/4] Proof --- .../web/web-extensions-howtos/editor-api.md | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/editor-api.md b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/editor-api.md index 9801fc68026..17380a1d8e3 100644 --- a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/editor-api.md +++ b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/editor-api.md @@ -10,15 +10,20 @@ This how-to describes how to open an existing document editor in Studio Pro from ## Prerequisites -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/). +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. 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/). ## Opening a Document Editor Create a menu item. This is done inside the `loaded` event in `Main`. For more information, see [Create a Menu Using Web API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/menu-api/). -This menu action will look for the `Home_Page` document in `MyFirstModule` and it will then open it with the `editor-api`. Of course you can use any module or any document in your app. For more information, please look at the [model api](/apidocs-mxsdk/apidocs/web-extensibility-api-11/model-api/) +This menu action will look for the `Home_Page` document in `MyFirstModule` (however, you can use any module or any document in your app). It will then open it with the editor API. For more information, see [Access a Mendix Model Using Web API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/model-api/). -In this example, we add an event listener for the `menuItemActivated` event for when a menu gets clicked. When the event triggers, first we look for the page by its name and by the name of its containing module using the `studioPro.app.model.pages` api. Then, we call `studioPro.ui.editors.editDocument` to open the document by passing its ID. See the following code sample to see how this is done. +For this example, add an event listener for the `menuItemActivated` event for when a menu is clicked. When the event triggers, do the following: + +1. Look for the page by its name, and by the name of its containing module using the `studioPro.app.model.pages` API. +2. Call `studioPro.ui.editors.editDocument` to open the document by passing its ID. + +See the code sample below to see how this is done: ```typescript import { IComponent, studioPro, Menu, Primitives } from "@mendix/extensions-api"; @@ -48,9 +53,11 @@ export const component: IComponent = { ``` ## Active Documents -The editor api also supports notifying the extension when the active document tab gets activated in Studio Pro, via the `activeDocumentChanged` event. -It also provides this information on demand, via the `studioPro.ui.editors.getActiveDocument` method. -Both the `getActiveDocument` method and the `activeDocumentChanged` event args returns a `ActiveDocumentInfo` object, which contains the document's name, type, container module name and id. + +The editor API notifies the extension when the active document tab is activated in Studio Pro, via the `activeDocumentChanged` event. It also provides this information on demand, via the `studioPro.ui.editors.getActiveDocument` method. + +Both the `getActiveDocument` method and the `activeDocumentChanged` event args returns a `ActiveDocumentInfo` object, which contains the document's name, type, container, module name, and id. + See the sample code below: ```typescript