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/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/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..d46779a9d0b --- /dev/null +++ b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/editor-api.md @@ -0,0 +1,93 @@ +--- +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 within 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/). 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 + +First, 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` (however, you can use any module or 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/). + +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"; + +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 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 +studioPro.ui.editors.addEventListener("activeDocumentChanged", async ({ activeDocument }) => { + if (activeDocument) { + studioPro.ui.notifications.show({ + title: "Document Changed Notification", + 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 + +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. 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