Merge pull request #11132 from mendix/qt-review

Review Extensibility APIs

Author: quinntracy

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

@@ -2,18 +2,18 @@
 title: "Using the App Explorer API"
 linktitle: "App Explorer API"
 url: /apidocs-mxsdk/apidocs/web-extensibility-api-11/app-explorer-api/
-description: "Describes how to interact with the App Explorer in Studio Pro by creating a context menu for microflows."
+description: "Describes how to use the App Explorer API in Studio Pro to create a context menu for microflows."
 ---
 
 ## Introduction
 
-This how-to describes how to interact with the App Explorer in Studio Pro. In this example, you create a menu that displays for each microflow in the App Explorer.
+This how-to describes how to interact with the App Explorer in Studio Pro. In this example, you create a context menu that displays for each microflow in the App Explorer.
 
 ## Prerequisites
 
-{{% alert="info" %}}
+{{% alert color="info" %}}
 If you are using Studio Pro 11.0–11.5 and your extension includes menus, your existing menu code will not work when you upgrade to Studio Pro 11.6. To restore full functionality and support, upgrade to Extensibility API 11.6 and follow the steps in the [Migration Guide](/apidocs-mxsdk/apidocs/web-extensibility-api-11/migration-guide/).
-{{% /alert%}}
+{{% /alert %}}
 
 Before starting this how-to, complete the following prerequisites:
 
@@ -26,7 +26,7 @@ Before starting this how-to, complete the following prerequisites:
 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 uses the `appExplorer` API `addContextMenu` method to add the menu to all `Microflow` document nodes. When you click this menu, the document ID is sent as an argument through the `DocumentContext` argument parameter of the menu.
+The code below uses the `appExplorer` API `addContextMenu` method to add the context menu to all `Microflow` document nodes. When you click this menu, the document ID is sent as an argument through the `DocumentContext` argument parameter.
 
 ```typescript
 import { ComponentContext, DocumentContext, IComponent, Menu, getStudioProApi } from "@mendix/extensions-api";
@@ -54,12 +54,12 @@ export const component: IComponent = {
 };
 ```
 
-The `DocumentContext` payload for the menu action is an object containing a document ID (`{ documentId: string }`). When you create a menu for the `appExplorer` `addContextMenu` method, use the `DocumentContext` as the context of your menu. The `documentId` is the ID of the document the menu is attached to (in this example, 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 you create a menu for the `appExplorer` `addContextMenu` method, use `DocumentContext` as the context of your menu. The `documentId` is the ID of the document the menu is attached to (in this example, the specific `Microflow` node in the App Explorer).
 
-As explained in the [menu documentation](/apidocs-mxsdk/apidocs/web-extensibility-api-11/menu/), the `DocumentContext` is not necessary to add your menu to Studio Pro. However, if you do not use it, the menu will not receive the clicked document ID.
+As explained in the [menu documentation](/apidocs-mxsdk/apidocs/web-extensibility-api-11/menu/), `DocumentContext` is not required to add your menu to Studio Pro. However, if you do not use it, the menu will not receive the clicked document ID.
 
 ## Extensibility Feedback
 
-If you would like to provide additional feedback, you can complete a small [survey](https://survey.alchemer.eu/s3/90801191/Extensibility-Feedback).
+If you would like to provide additional feedback, you can complete a short [survey](https://survey.alchemer.eu/s3/90801191/Extensibility-Feedback).
 
 Any feedback is appreciated.

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

@@ -7,21 +7,21 @@ description: "Describes how to introduce a new document type and set up a custom
 
 ## Introduction
 
-This how-to describes how to introduce a new document type and set up a custom editor for users to edit documents of that type.
+This how-to describes how to introduce a new document type and set up a custom editor that allows users to edit documents of that type.
 
 ## Prerequisites
 
 Before starting this how-to, make sure you have completed the following prerequisites:
 
-* [Get Started with the Web Extensibility API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/getting-started/).
+* [Get Started with the Web Extensibility API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/getting-started/)
 
 ## Custom Document Model
 
 Studio Pro allows you to extend its metamodel by adding custom document types. These documents can store arbitrary data that can be serialized as strings. When you register an editor (a user-defined UI component) for a specific document type, documents of that type appear in the UI alongside built-in document types such as constants, Java actions, and pages. They appear in the **New Document** and **Find Advanced** dialogs, context menus for adding documents, the App Explorer, and other UI elements that display Studio Pro documents. You can register custom editors to appear as tabs or as modal dialogs.
 
 ## Registering a New Document Type
 
-To register a new document type, follow these steps:
+To register a new document type, do the following:
 
 1. Generate a new extension named `myextension` as described in [Get Started with the Web Extensibility API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/getting-started/).
 2. Replace the contents of `src/main/index.ts` with the code below:
@@ -64,7 +64,7 @@ To register a new document type, follow these steps:
     export const personDarkThemeIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAWdJREFUSIm1ljFuwkAQRd/giFTkABS5gMsolBRcIFBwCOTGNUfgDtDRJ9yDioaCKlJ8B0dYmyLjZGLtrh0Jj7SyNPP3f894dtbinHP0aIM+yQHuYkERuQdegDnwBIw1VABH4BV4c86VQRIXMGABXADXsi7AIsjjIR4AG0NwAnIgBUa6UvWdDG4DDLoI1OQlkAFJJMtEMWUtEhXQstTksxCxR2hmRP6UCwMamppnXcnN/sx8k6FPYGlqHixLRCAx32RZ++05mOtz65y7Btsu3I1XYNvgwmZwJty1XbNINYOzL4MxgIg8/Pftjb1bLmgZFSJSiAgiMvHEJhorYhxWoAY+Gt9RnyvP3lUDY/f+ipr67fmuX258U6ACPoEd8Kxrp74KmBp8rhz7H58JetsUWCtRcwZVwLqtTTsdNM3kAHzoOtg3V0z8oCmov1FhwP0NO93U77g2Qje5cETJvHaLKzMqcAvr/a/iC+JcVEP5CMhEAAAAAElFTkSuQmCC';
     ```
 
-4. Add another file `src/model/PersonInfo.ts` in the same directory: 
+4. Add another file, `src/model/PersonInfo.ts`, in the same directory: 
 
     ```typescript
     export type PersonInfo = {
@@ -245,13 +245,13 @@ To register a new document type, follow these steps:
 
 ### Register the Document Type
 
-In `src/main/index.ts`, you register a new document type. After you register the document type, you can perform all CRUD operations on it. However, the document type does not appear in the UI until you also register an editor. 
+In `src/main/index.ts`, you register a new document type. After you register the document type, you can perform all create, read, update, and delete (CRUD) operations on it. However, the document type does not appear in the UI until you also register an editor. 
 
 Optionally, you can provide a `readableTypeName` to display a user-friendly name in logs and the Studio Pro UI instead of the full type name. You can also customize how the document contents serialize to a string. By default, the API uses `JSON.stringify` for serialization and `JSON.parse` for deserialization.
 
 ### Register the Editor
 
-The next call to the Studio Pro API in `src/main/index.ts` registers an editor for the document type. This call does the following:
+The next call to the Studio Pro API in `src/main/index.ts` registers an editor for the document type. This does the following:
 
 * Registers the `editor` entry point of the extension to the document type, so the editor appears when users interact with the document in Studio Pro (for example, through the **App Explorer** or **Find Results**)
 * Displays the editor as a tab, though you can also configure it to display as a modal dialog
@@ -273,6 +273,6 @@ The highlighted text in `build-extension.mjs` and `manifest.json` shows the chan
 
 ## 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).
+If you would like to provide us with additional feedback, you can complete a short [survey](https://survey.alchemer.eu/s3/90801191/Extensibility-Feedback).
 
 Any feedback is appreciated.

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

@@ -12,9 +12,9 @@ It also describes how to show a progress dialog that follows a sequence of steps
 
 ## Prerequisites
 
-{{% alert="info" %}}
+{{% alert color="info" %}}
 If you are using Studio Pro 11.0–11.5 and your extension includes menus, your existing menu code will not work when you upgrade to Studio Pro 11.6. To restore full functionality and support, upgrade to the Extensibility API 11.6 and follow the steps in the [Migration Guide](/apidocs-mxsdk/apidocs/web-extensibility-api-11/migration-guide/).
-{{% /alert%}}
+{{% /alert %}}
 
 Before starting this how-to, complete the following prerequisites:
 
@@ -23,11 +23,11 @@ Before starting this how-to, complete the following prerequisites:
 
 ## Opening a Modal Dialog
 
-Create a menu item to open the dialog inside the `loaded` event in the main entry point (`src/main/index.ts`). For more information, see [Create a Menu Using Web API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/menu-api/).
+To open a modal dialog, create a menu item inside the `loaded` event in the main entry point (`src/main/index.ts`). For more information, see [Create a Menu Using Web API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/menu-api/).
 
-In a listener event called `menuItemActivated`, the `studioPro.ui.dialogs.showModal(<dialogInfo>, <uiSpec>)` call opens a new dialog. The parameters are:
+In the `menuItemActivated` listener event, call `studioPro.ui.dialogs.showModal(<dialogInfo>, <uiSpec>)` to open a new dialog. The parameters are:
 
-* `<dialogInfo>` – An object containing the `title` of the dialog, which is shown in the title bar of your dialog in Studio Pro. It also contains the `contentSize` object, where you can provide `height` and `width` dimensions for the dialog.
+* `<dialogInfo>` – An object containing the `title` of the dialog (shown in the title bar of your dialog in Studio Pro) and the `contentSize` object, where you can provide `height` and `width` dimensions for the dialog.
 * `<uiSpec>` – An object containing two required properties and one optional property:
 
     * `componentName` – The name of the extension prefixed with `extension/`. For example, `extension/myextension`.
@@ -40,7 +40,7 @@ When the `showModal` method is called, it returns a `Promise` of `unknown` or `n
 In the example below, the dialog contains a form where an object is modified and then returned when the dialog closes.
 {{% /alert %}}
 
-An example of the main entry point (`src/main/index.ts`) to open a modal dialog called *My Extension Dialog* looks similar to the following:
+The following example shows the main entry point (`src/main/index.ts`) that opens a modal dialog:
 
 ```typescript
 import { IComponent, getStudioProApi } from "@mendix/extensions-api";
@@ -74,7 +74,7 @@ export const component: IComponent = {
 };
 ```
 
-## Filling the Dialog With Content
+## Filling the Dialog with Content
 
 In the previous example, the `uiEntryPoint` property of the `<uispec>` object has the value `dialog`. This value must match the one in the manifest. The following example shows the dialog under the `ui` property:
 
@@ -197,8 +197,7 @@ In the previous example, the `uiEntryPoint` property of the `<uispec>` object ha
 
 The `dialogId` property is retrieved from the query parameters of the web page. This value is generated when the dialog API is first called. It is then passed back to the web content so the `close` or `closeWithResult` methods can be called successfully. The dialog API needs this ID to close the correct dialog.
 
-This simple form contains two text boxes for `firstName` and `lastName`. When you submit the form, it closes the dialog and passes the content of the object modified by the form.
-The form also contains a **Close** button, which calls the `close` method without any extra data, except the required `dialogId`.
+This form contains two text boxes for `firstName` and `lastName`. When you submit the form, it closes the dialog and passes the content of the object modified by the form. The form also contains a **Close** button, which calls the `close` method without any extra data, except the required `dialogId`.
 
 After you build and install the extension in Studio Pro, the dialog opens when you click the menu and displays the web content from the `dialog.tsx` file.
 
@@ -220,11 +219,11 @@ You can modify the dimensions of a dialog using the `update` method. To do this,
 </button>
 ```
 
-You can also modify the dialog's dimensions while it is open.
+You can modify the dialog's dimensions while it is open.
 
 ## Showing a Progress Dialog {#process-dialog}
 
- To show a progress dialog, call the method `studioPro.ui.dialogs.showProgressDialog(<title>, <steps>)`. The parameters are:
+To show a progress dialog, call the method `studioPro.ui.dialogs.showProgressDialog(<title>, <steps>)`. The parameters are:
 
 * `<title>` – A string that is displayed in the title bar of the dialog.
 * `<steps>` – An array of `ProgressDialogStep` objects, which run in the same order provided in the array. A `ProgressDialogStep` object contains the following properties:
@@ -247,7 +246,7 @@ The `FailedProgressStepResult` object contains the following properties:
 * `stepTitle` – The title of the step that failed, causing the whole process to fail.
 * `error` – A string that describes the error or exception that occurred during step execution.
 
-The following example creates a menu to show the modal progress dialog and runs three steps inside the `loaded` event in the main entry point (`src/main/index.ts`).
+The following example creates a menu to show the modal progress dialog and runs three steps inside the `loaded` event in the main entry point (`src/main/index.ts`):
 
 ```typescript
 import { ComponentContext, IComponent, ProgressDialogStep, getStudioProApi } from "@mendix/extensions-api";
@@ -332,10 +331,11 @@ const step: ProgressDialogStep = {
 ```
 
 When running, the progress dialog looks like this:
+
 {{< figure src="/attachments/apidocs-mxsdk/apidocs/extensibility-api/web/dialogs/sample-progress-dialog.png" alt="Sample progress dialog showing three steps" width="300" >}}
 
 ## Extensibility Feedback
 
-If you would like to provide additional feedback, you can complete a small [survey](https://survey.alchemer.eu/s3/90801191/Extensibility-Feedback).
+If you would like to provide additional feedback, you can complete a short [survey](https://survey.alchemer.eu/s3/90801191/Extensibility-Feedback).
 
 Any feedback is appreciated.

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

@@ -2,11 +2,12 @@
 title: "Create a Dockable Pane Using Web API"
 linktitle: "Dockable Pane"
 url: /apidocs-mxsdk/apidocs/web-extensibility-api-11/dockable-pane-api/
+description: "Describes how to create and manage a dockable pane using the web extensions API in Studio Pro."
 ---
 
 ## Introduction
 
-This how-to describes creating and managing a dockable pane using the web extensions API. A dockable pane is a web view that can be docked and moved within the Studio Pro user interface. Examples of dockable panes in Studio Pro include the following:
+This how-to describes how to create and manage a dockable pane using the web extensions API. A dockable pane is a web view that can be docked and moved within Studio Pro. Examples of dockable panes in Studio Pro include the following:
 
 * Marketplace
 * Errors
@@ -15,12 +16,12 @@ This how-to describes creating and managing a dockable pane using the web extens
 
 ## Prerequisites
 
-{{% alert="info" %}}
+{{% alert color="info" %}}
 If you are using Studio Pro 11.0–11.5 and your extension includes menus, your existing menu code will not work when you upgrade to Studio Pro 11.6. To restore full functionality and support, upgrade to the Extensibility API 11.6 and follow the steps in the [Migration Guide](/apidocs-mxsdk/apidocs/web-extensibility-api-11/migration-guide/).
-{{% /alert%}}
+{{% /alert %}}
 
 * This how-to uses the app created in [Get Started with the Web Extensibility API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/getting-started/). Complete that how-to before starting this one.
-* Be familiar with creating menus as described in [Create a Menu Using Web API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/menu-api/).
+* Familiarize yourself with creating menus as described in [Create a Menu Using Web API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/menu-api/).
 
 ## Creating a Dockable Pane
 
@@ -100,7 +101,7 @@ Alter the `build-extension.mjs` and `manifest.json` files to bind to the correct
 
 ### Altering `build-extension.mjs`
 
-Instruct esbuild to produce JavaScript modules that correspond to `src/ui/tab.tsx` and `src/ui/dockablepane.tsx`. To do this, change the call to `entryPoints.push` in line 16:
+Instruct esbuild to produce JavaScript modules that correspond to `src/ui/tab.tsx` and `src/ui/dockablepane.tsx`. To do this, change the call to `entryPoints.push` on line 16:
 
 ```typescript
 entryPoints.push({
@@ -157,7 +158,7 @@ else {
 }
 ```
 
-This ensures esbuild considers these two `.tsx` files as entrypoints and produces JavaScript modules in the `dist` folder corresponding to the name in `out`.
+This ensures that esbuild considers these two `.tsx` files as entry points and produces JavaScript modules in the `dist` folder corresponding to the name in `out`.
 
 ### Altering `src/manifest.json`
 
@@ -285,6 +286,6 @@ The `loaded` method should now look like this:
 
 ## Extensibility Feedback
 
-If you would like to provide additional feedback, you can complete a small [survey](https://survey.alchemer.eu/s3/90801191/Extensibility-Feedback)
+If you would like to provide additional feedback, you can complete a short [survey](https://survey.alchemer.eu/s3/90801191/Extensibility-Feedback)
 
 Any feedback is appreciated.