Update Extensibility API structure

content/en/docs/apidocs-mxsdk/apidocs/studio-pro-10/_index.md

@@ -0,0 +1,11 @@
+---
+title: "APIs for Studio Pro 10"
+url: /apidocs-mxsdk/apidocs/apis-for-studio-pro-10/
+no_list: false
+description_list: true
+description: "Provides the documentation of APIs for Studio Pro 10, including Extensibility API and Mendix Runtime API."
+weight: 5
+linktitle: "Studio Pro 10"
+---
+
+Mendix offers the following APIs for Studio Pro 10:

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

@@ -1,6 +1,6 @@
 ---
 title: "Extensibility API"
-url: /apidocs-mxsdk/apidocs/extensibility-api/
+url: /apidocs-mxsdk/apidocs/extensibility-api-10/
 description: "The Extensibility API allows you to extend Studio Pro by adding custom functionality."
 weight: 57
 no_list: false

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

@@ -1,29 +1,29 @@
----
-title: "Packaging Your Extension"
-url: /apidocs-mxsdk/apidocs/extensibility-api/packaging-your-extension
-weight: 30
----
-
-# 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.
-
-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.
-
-![Extension Add-on Module](/attachments/apidocs-mxsdk/apidocs/extensibility-api/extensionAddOnModule.png)
-
-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.
-
-![Export Module](/attachments/apidocs-mxsdk/apidocs/extensibility-api/exportAddOnModule.png)
-
-You can now save the add-on module to a location of your choice.
-
-# 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.
-
-![Import Module](/attachments/apidocs-mxsdk/apidocs/extensibility-api/importAddOnModule.png)
-
-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.
-
+---
+title: "Packaging Your Extension"
+url: /apidocs-mxsdk/apidocs/extensibility-api/packaging-your-extension
+weight: 30
+---
+
+# 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.
+
+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.
+
+![Extension Add-on Module](/attachments/apidocs-mxsdk/apidocs/extensibility-api/extensionAddOnModule.png)
+
+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.
+
+![Export Module](/attachments/apidocs-mxsdk/apidocs/extensibility-api/exportAddOnModule.png)
+
+You can now save the add-on module to a location of your choice.
+
+# 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.
+
+![Import Module](/attachments/apidocs-mxsdk/apidocs/extensibility-api/importAddOnModule.png)
+
+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.
+
 ![Trust Extension](/attachments/apidocs-mxsdk/apidocs/extensibility-api/trustExtension.png)

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

@@ -0,0 +1,37 @@
+---
+title: "Extensibility API for Web Developers"
+linktitle: "Web Extensibility API"
+url: /apidocs-mxsdk/apidocs/web-extensibility-api-10/
+description: "The web extensibility API allows your custom Studio Pro 10 extensions developed using JavaScript to interact with some internal services of Studio Pro."
+weight: 20
+---
+
+{{% alert color="warning" %}} This feature is in beta. For more information, see [Beta Releases](/releasenotes/beta-features/). {{% /alert %}}
+
+{{% alert color="info" %}}For information on new releases of the Extensibility API, see [Extensibility: Web API Release Notes](/releasenotes/studio-pro/web-extensibility-api/).
+{{% /alert %}}
+
+## 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/).
+
+## 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.
+
+## 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/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/dockable-pane-api/)
+* [How to Interact With Local App Files Using Web API](/apidocs-mxsdk/apidocs/web-extensibility-api/local-app-files-api/)
+* [How to Create a Menu Using Web API](/apidocs-mxsdk/apidocs/web-extensibility-api/menu-api/)
+* [How to Show a Message Box Using Web API](/apidocs-mxsdk/apidocs/web-extensibility-api/messagebox-api/)
+* [How to Access a Mendix Model Using Web API](/apidocs-mxsdk/apidocs/web-extensibility-api/model-api/)
+* [How to Open a Tab Using Web API](/apidocs-mxsdk/apidocs/web-extensibility-api/tab-api/)

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

@@ -0,0 +1,124 @@
+---
+title: "Get Started with the Web Extensibility API"
+linktitle: "Get Started"
+url: /apidocs-mxsdk/apidocs/web-extensibility-api-10/getting-started/
+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.
+
+### Prerequisites
+
+You will need the following prerequisites:
+
+* Mendix Studio Pro version 10.21.0 or higher [Mendix Studio Pro](https://marketplace.mendix.com/link/studiopro). 
+* Install the latest Studio Pro version from the Mendix [Marketplace](https://marketplace.mendix.com/link/studiopro/).
+* 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.
+
+{{% alert color="info" %}}
+Extensions can be built on any operating system as the underlying framework is cross-platform.
+{{% /alert %}}
+
+## Creating Your First Extension
+
+This section will show you how to build and test an extension.
+
+### Create a Test App
+
+1. Create a new app using the **Blank Web App** template.
+1. Install the [Studio Pro Web Extension Template](https://github.com/mendix/web-extension-template) from GitHub using the instructions in the repository.
+
+### Building the Extension
+
+From within Visual Studio Code:
+
+1. Select **File** -> **Open Folder**
+1. Navigate to the folder you just extracted your extension source code to.
+1. Click **Select Folder**.
+1. Select **Yes** if you are asked whether you trust this folder.
+1. Now open a Terminal by selecting **Terminal** -> **New Terminal** from the top menu.
+1. From the Terminal type `npm install`. This installs all dependencies for the extension
+1. Build your extension using the command `npm run build` in the terminal.
+
+Once completed you should now have a build artifact which we can deploy to your Mendix app.
+
+You can explore the extension a bit more to understand what it will do when it is installed. Do the following:
+
+1. From the Explorer window navigate to `src/main/index.ts` select it to open the file.
+
+    Reading through the source code you should see the following:
+
+1. Line 7 adds a menu
+
+    ```typescript
+    await studioPro.ui.extensionsMenu.add({
+    menuId: "myextension.MainMenu",
+    caption: "MyExtension Menu",
+    subMenus: [{ menuId: "myextension.ShowTabMenuItem", caption: "Show tab" }],
+    });
+    ```
+
+1. Line 14 opens a tab
+
+    ```typescript
+    // Open a tab when the menu item is clicked
+    studioPro.ui.extensionsMenu.addEventListener("menuItemActivated", (args) => {
+      if (args.menuId === "myextension.ShowTabMenuItem") {
+        studioPro.ui.tabs.open(
+          {
+            title: "My Extension Tab",
+          },
+          {
+            componentName: "extension/myextension",
+            uiEntrypoint: "tab",
+          }
+        );
+      }
+    });
+    ```
+
+When you install the extension you will see a new menu item within Studio Pro.
+
+### Testing the Extension
+
+To test the extension, do the following in File Explorer.
+
+1. Navigate to the folder where you extracted the extension source code.
+1. Open the `dist` folder.
+1. Copy the `myextension` folder.
+1. Navigate to the folder where you created your app.
+1. Create a new folder called `webextensions`.
+1. Paste the `myextension` folder into the `webextensions` folder you just created.
+
+    The extension files have now been added to the app.
+
+1. Start Studio Pro with the following command line parameters to tell it to use the extensions in the folder.
+
+    `--enable-extension-development --enable-webview-debugging`
+
+    These flags instruct Studio Pro to do the following:
+
+    * Load extensions from the webextensions folder
+    * Enable web debugging tools which will be useful when developing your extension
+
+1. In Studio Pro, open the new app. 
+
+    You will see a new `Extensions` item in the top menu.
+
+## Conclusion
+
+Using this guide we have:
+
+* Created a new app
+* Downloaded a new extension from GitHub
+* Built the extension and installed it in our app
+* Tested our extension from within Studio Pro.
+
+## 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)
+
+Any feedback is much appreciated.

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

@@ -0,0 +1,12 @@
+---
+title: "Web Extensibility API How-tos"
+linktitle: "How-tos"
+url: /apidocs-mxsdk/apidocs/web-extensibility-api-10/how-tos/
+weight: 3
+no_list: false
+description_list: true
+---
+
+## Introduction
+
+The following how-tos teach you how to use the Extensibility API for Web Developers in different use cases.