Update all tutorials to use new menus. Delete command api document and all references to it.

Author: ester-nl

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

@@ -10,7 +10,7 @@ After completing development on your extension, you can package it into an add-o
 
 To package your extension, follow the steps below:
 
-1. Make sure the`--enable-extension-development` command-line option is enabled.
+1. Make sure the setting for enabling extension development is checked in the Preferences form. Alternatively, you can start Studio Pro with the `--enable-extension-development` command-line option.
 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**. 

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

@@ -37,6 +37,7 @@ For detailed information on how to get started with extensions, see [Get Started
 
 Below is a list of how-tos for you to begin with:
 
+* [How Menus Work](/apidocs-mxsdk/apidocs/web-extensibility-api-11/menu/)
 * [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/)

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

@@ -24,7 +24,7 @@ Extensions can be built on any operating system, as the underlying framework is
 {{% /alert %}}
 
 {{% alert color="info" %}}
-Extension development is only possible by starting Studio Pro with the `--enable-extension-development` feature flag.
+Extension development is only possible enabling the setting in `Extension Development` under `Advanced` in the Studio Pro preferences form, or by starting Studio Pro using the `--enable-extension-development` feature flag.
 {{% /alert %}}
 
 ## Creating Your First Extension
@@ -75,54 +75,47 @@ Before you begin, your extension will have to get an instance of the Studio Pro
 
 In the source code, you should see the following:
 
-1. Line 6 gets an instance of the Studio Pro API by calling `getStudioProApi`.
+1. We get an instance of the Studio Pro API by calling `getStudioProApi`.
 
     ```typescript
     export const component: IComponent = {
         async loaded(componentContext) {
             const studioPro = getStudioProApi(componentContext);
 
-2. Line 7 adds a menu:
+2. We add a menu that opens a tab:
 
     ```typescript
     await studioPro.ui.extensionsMenu.add({
         menuId: "myextension.MainMenu",
         caption: "MyExtension Menu",
         subMenus: [
-            { menuId: "myextension.ShowMenu", caption: "Show tab" },
+            {
+                menuId: "myextension.ShowMenu",
+                caption: "Show tab",
+                // Open a tab when the menu item is clicked
+                action: async () => {
+                    await studioPro.ui.tabs.open(
+                        {
+                            title: "MyExtension tab"
+                        },
+                        {
+                            componentName: "extension/myextension",
+                            uiEntrypoint: "tab"
+                        }
+                    )
+                }
+            }
         ],
     });
     ```
 
-3. Line 16 opens a tab.
-
-    ```typescript
-    // Open a tab when the menu item is clicked
-    studioPro.ui.extensionsMenu.addEventListener(
-        "menuItemActivated",
-        (args) => {
-            if (args.menuId === "myextension.ShowMenu") {
-                studioPro.ui.tabs.open(
-                    {
-                        title: "MyExtension Tab"
-                    },
-                    {
-                        componentName: "extension/myextension",
-                        uiEntrypoint: "tab",
-                    }
-                );
-            }
-        }
-    );
-    ```
-
-4. If you navigate to `build-extension.mjs`, you can choose the directory to which the extension will be installed to after being built by changing line 6:
+3. If you navigate to `build-extension.mjs`, you can choose the directory to which the extension will be installed to after being built by changing line 6:
 
      ```typescript
      const appDir = "C:\\TestApps\\AppTestExtensions"
      ```
 
-5. The file `.vscode\launch.json` specifies the launch configuration and enables debugging. The following lines specify how Studio Pro will be run:
+4. The file `.vscode\launch.json` specifies the launch configuration and enables debugging. The following lines specify how Studio Pro will be run:
 
      ```json
      …

content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/app-explorer-api.md

@@ -12,53 +12,46 @@ This how-to describes how to interact with the App Explorer in Studio Pro. In th
 
 Before starting this how-to, make sure you have completed the following 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. 
-* Make sure you are familiar with command registration, as described in [Register a Command Using Web API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/command-api/).
+* Read up on how menus work in the Extensibility API [here](/apidocs-mxsdk/apidocs/web-extensibility-api-11/menu/)
+* 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.
 
 ## Creating a Context Menu
 
 {{% alert color="info" %}}
 Use the full name of the document type to specify which type of document a menu should belong to (for example, `Microflows$Microflow` for microflows or `Pages$Page` for pages). For more information about these document type names, see [Access a Mendix Model Using Web API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/model-api/).
 {{% /alert %}}
 
-The code below does the following:
-
-1. Registers a command through the [Command API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/command-api/).
-2. Attaches the `commandId` to the new menu. 
-3. Uses the `appExplorer` API's `addContextMenu` method to add the menu to all `Microflow` document nodes.
+The code below uses the `appExplorer` API's `addContextMenu` method to add the menu to all `Microflow` document nodes. When this menu is clicked, the clicked document's ID will be sent as an argument through the `DocumentContext` argument parameter of the menu.
 
 ```typescript
-import { ComponentContext, IComponent, Menu, StudioProApi, getStudioProApi } from "@mendix/extensions-api";
+import { ComponentContext, DocumentContext, IComponent, Menu, getStudioProApi } from "@mendix/extensions-api";
 
 const extensionId = "myextension";
 
 export const component: IComponent = {
     async loaded(componentContext: ComponentContext) {
         const studioPro = getStudioProApi(componentContext);
 
-        const commandId = `${extensionId}.microflow.command`;
-        const menuId = `${commandId}.menu`;
+        const menuId = `${extensionId}.microflow.menu`;
 
-        await studioPro.app.commands.registerCommand<{ documentId: string }>(commandId, async (args: { documentId: string }) => {
+        const action = async (args: DocumentContext) => {
             await studioPro.ui.notifications.show({
-                title: `Microflow command executed`,
+                title: `Microflow action executed`,
                 message: `You clicked a context menu for a Microflow! (${args.documentId})`,
                 displayDurationInSeconds: 4
             });
-        });
+        };
 
-        const microflowMenu: Menu = { caption: `Microflow command menu`, menuId, commandId };
+        const microflowMenu: Menu<DocumentContext> = { caption: `Microflow menu`, menuId, action };
 
         await studioPro.ui.appExplorer.addContextMenu(microflowMenu, "Microflows$Microflow");
     }
-}
+};
 ```
 
-The payload of the command must be an object containing a document Id (`{ documentId: string }`). Registering the command requires the exact type of the payload, or your extension will not compile. The `documentId` will be the Id of the document the menu is attached to (in this scenario, the exact `Microflow` node in the App Explorer).
+The `DocumentContext` payload for the menu action is an object containing a document Id (`{ documentId: string }`). When creating a menu for the `appExplorer`'s `addContextMenu` method, the `DocumentContext` should be used as the context of your menu. The `documentId` will be the Id of the document the menu is attached to (in this scenario, the exact `Microflow` node in the App Explorer).
 
-{{% alert color="warning" %}}
-The command must be registered before creating the menu.
-{{% /alert %}}
+As explained in the [menu documentation](/apidocs-mxsdk/apidocs/web-extensibility-api-11/menu/), the `DocumentContext` is not necessary in order to add your menu to Studio Pro, but if it is not used, the menu will never receive the ID of the clicked document when it gets clicked.
 
 ## Extensibility Feedback
 

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

@@ -193,7 +193,7 @@ To register a new document type, follow the steps below:
     import parseArgs from "minimist"
 
     const outDir = `dist/myextension`
-    const appDir = "/Users/petar.vukmirovic/Mendix/App-Guide-Test-Blob"
+    const appDir = "/Users/<USERNAME>/Mendix/App-Guide-Test-Blob"
     const extensionDirectoryName = "extensions"
 
     const entryPoints = [

content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/custom-blob-document-api.md

@@ -51,34 +51,23 @@ export const component: IComponent = {
         await studioPro.ui.extensionsMenu.add({
             menuId: menuId,
             caption: "Show modal dialog",
-        });
+            action: async () => {
+                const result = await studioPro.ui.dialogs.showModal(
+                    {
+                        title: "Modal Dialog",
+                        contentSize: { height: 170, width: 400 }
+                    },
+                    {
+                        componentName: "extension/myextension",
+                        uiEntrypoint: "dialog"
+                    }
+                );
 
-        // Open a modal dialog when the menu item is clicked
-        studioPro.ui.extensionsMenu.addEventListener(
-            "menuItemActivated",
-            async (args) => {
-                if (args.menuId === menuId) {
-                    const result = await studioPro.ui.dialogs.showModal(
-                        {
-                            title: "Modal Dialog",
-                            contentSize: { height: 170, width: 400 },
-                        },
-                        {
-                            componentName: "extension/myextension",
-                            uiEntrypoint: "dialog",
-                        }
-                    );
-
-                    if (result !== null)
-                        await studioPro.ui.messageBoxes.show(
-                            "info",
-                            JSON.stringify(result)
-                    );
-                }
+                if (result !== null) await studioPro.ui.messageBoxes.show("info", JSON.stringify(result));
             }
-        );
+        });
     }
-}
+};
 ```
 
 ## Filling the Dialog With Content