Merge pull request AdobeDocs#89 from AdobeDocs/kh_sdk-120

Admin SDK UI 1.2.0 docs

Author: keharper

src/data/navigation/sections/admin-ui-sdk.js

@@ -17,15 +17,19 @@ module.exports = [
       pages: [
         {
           title: "menu",
-          path: "admin-ui-sdk/extension-points/menu.md"
+          path: "/admin-ui-sdk/extension-points/menu.md"
+        },
+        {
+          title: "order",
+          path: "/admin-ui-sdk/extension-points/order.md"
         },
         {
           title: "page",
-          path: "admin-ui-sdk/extension-points/page.md"
+          path: "/admin-ui-sdk/extension-points/page.md"
         },
         {
           title: "product",
-          path: "admin-ui-sdk/extension-points/product.md"
+          path: "/admin-ui-sdk/extension-points/product.md"
         }
 
       ]

src/pages/admin-ui-sdk/app-registration.md

@@ -50,7 +50,7 @@ Create an `ExtensionRegistration`  component that registers the menu configurati
 1. Add the `uix-guest` dependency in the `package.json`.
 
    ```json
-   "@adobe/uix-guest": "^0.8.2"
+   "@adobe/uix-guest": "^0.8.3"
    ```
 
 2. Run `npm install`.

src/pages/admin-ui-sdk/configuration.md

@@ -36,6 +36,14 @@ Navigate to **Stores** > Settings > **Configuration** > **Adobe Services** > **A
    bin/magento cache:flush
    ```
 
+## Clean the Admin UI SDK cache
+
+The `admin_ui_sdk` cache type stores Admin customizations.  As you develop these customizations, run the following command to ensure you are seeing the latest changes:
+
+```bash
+bin/magento cache clean admin_ui_sdk
+```
+
 ## Test with a sample app
 
 You can download a sample app from the [Commerce UI test extension repository](https://github.com/magento/app-builder-samples) to gain insight on how the Admin SDK injects menus and pages into the Admin.

src/pages/admin-ui-sdk/extension-points/menu.md

@@ -12,26 +12,34 @@ The `menu` extension point creates a new menu that redirects to the App Builder
 
 ## Example customization
 
-The following example creates the **Marketing** > **First App on App Builder** menu option.
+The following example creates the **Apps** > **First App on App Builder** menu option.
 
 ```javascript
-menu: {
-    getItems() {
-        return [
+      menu: {
+        getItems() {
+          return [
             {
-                id: `${extensionId}`,
-                title: 'First App on App Builder',
-                parent: 'Magento_Backend::marketing'
+              id: `${extensionId}::first`,
+              title: 'First App on App Builder',
+              parent: `${extensionId}::apps`,
+              sortOrder: 1
+            },
+            {
+              id: `${extensionId}::apps`,
+              title: 'Apps',
+              isSection: true
             }
-        ]
-    }
-}
+          ]
+        }
+      }
 ```
 
 ## Parameters
 
 | Field | Type | Required | Description |
 | --- | --- | --- | --- |
 | `id` | string | Yes | A unique ID to identify the application menu in Adobe Commerce Admin. |
+| `isSection` | boolean | No | Indicates whether the menu item is a new section. The default value is `false`. |
 | `parent` | string | No | The parent menu. |
+| `sortOrder` | integer | No | The position of the menu, relative to other menus in the section. A value of `1` indicates the menu will be listed first. If this parameter is not specified, it will be placed randomly.
 | `title`  | string | No | The title to display. |

src/pages/admin-ui-sdk/extension-points/order.md

@@ -0,0 +1,55 @@
+---
+title: order
+description: Customize the orders page in the Adobe Commerce Admin.
+keywords:
+  - App Builder
+  - Extensibility
+---
+
+# order
+
+The `order` extension point enables you to add columns to the grid on the **Sales** > **Orders** page in the Adobe Commerce Admin. This extension point requires a GraphQL Mesh instance to retrieve the data to be added to the custom columns.
+
+You can use the [`aio api-mesh:describe` command](https://developer.adobe.com/graphql-mesh-gateway/gateway/command-reference/#aio-api-meshdescribe) to retrieve the values of the API key and mesh ID. The key is appended to the mesh endpoint URL.
+
+## Example customization
+
+​The following example creates custom columns labeled `First App Column` and `Second App Column`.
+
+```javascript
+order: {
+    getGridColumns() {
+        return {
+            data:{
+                meshId:'MESH_ID',
+                apiKey: 'API_KEY'
+            },
+            properties:[
+                {
+                    label: 'First App Column',
+                    columnId: 'first_column',
+                    type: 'string',
+                    align: 'left'
+                },
+                {
+                    label: 'Second App Column',
+                    columnId: 'second_column',
+                    type: 'integer',
+                    align: 'left'
+                }
+            ]
+        }
+    }
+}
+```
+
+## Parameters
+
+​| Field | Type | Required | Description |
+| --- | --- | --- | --- |
+| `data.apiKey` | string | Yes | The API key assigned to the GraphQL mesh. |
+| `data.meshId` | string | Yes | The ID of the mesh used to retrieve the column data.|
+| `properties.align` | string | Yes | The alignment of the values in the column. One of `left`, `right`, `center`. |
+| `properties.columnId` | string | Yes | The identifier used in the external dataset to identify the column. |
+| `properties.label` | string | Yes | The label of the column to display. |
+| `properties.type` | string | Yes | The data type of the values in the column. Supported values: `boolean`, `date`, `float`, `integer`, `string`.|

src/pages/admin-ui-sdk/extension-points/product.md

@@ -8,9 +8,7 @@ keywords:
 
 # product
 
-The `product` extension point customizes product features in the Adobe Commerce Admin.
-​
-You can customize the following product features:
+The `product` extension point customizes product features in the Adobe Commerce Admin. You can customize the following product features:
 
 * Product grid mass actions
 
@@ -30,13 +28,14 @@ product: {
                     title: 'First App Mass Action',
                     message: 'Are you sure your want to proceed with First App Mass Action on selected products?'
                 },
-                path: 'first-mass-action'
+                path: '#/first-mass-action',
+                productSelectLimit: 1
             },
             {
                 actionId: `${extensionId}::another-first-mass-action`,
                 label: 'Another Mass Action',
                 type: `${extensionId}.another-mass-action`,
-                path: 'another-mass-action'
+                path: '#/another-mass-action'
             }
         ]
     }
@@ -51,5 +50,6 @@ product: {
 | `confirm.message` | string | No | The message displayed on the confirmation dialog for a mass action |
 | `confirm.title` | string | No | The title of a dialog that confirms the mass action |
 | `label` | string | Yes | An Action label to display in the Mass Actions grid |
-| `path` | string | Yes | The relative path in the application to redirect to the action. The URL will be appended with a query of selected `productIds` |
+| `path` | string | Yes | The relative path in the application to redirect to the action. You might need to prepend `#/` to the path to ensure access to the correct page. |
+| `productSelectLimit` | integer | No | Set the maximum number products that can be selected for a mass action. By default, the number is unlimited. |
 | `type` | string | Yes | A unique ID that identifies the type of the action. |

src/pages/admin-ui-sdk/release-notes.md

@@ -8,6 +8,26 @@ keywords:
 
 # Adobe Commerce Admin UI SDK release notes
 
+## Version 1.2.0
+
+### Release date
+
+October 18, 2023
+
+### Enhancements
+
+* Created the [`order` extension point](extension-points/order.md), which adds columns to the order grid. <!-- CEXT-2272 -->
+
+* Added the [`admin_ui_sdk` cache type](configuration.md#clean-the-admin-ui-sdk-cache). When enabled, Commerce caches customizations to the Admin. <!-- CEXT-2377 -->
+
+* Added the `isSection` and `sortOrder` parameters to the [`menu` extension point](extension-points/menu.md). The `isSection` parameter allows you to define a menu section, while `sortOrder` defines the placement of a menu item. <!-- CEXT 2249, CEXT-2289 -->
+
+* Added the `productSelectLimit` parameter for mass actions in the [`product` extension point](extension-points/product.md). <!-- CEXT-2357 -->
+
+### Bug fixes
+
+* Minimized the number of calls needed to build a menu. <!-- CEXT-2396 -->
+
 ## Version 1.1.2
 
 ### Release date
@@ -16,7 +36,7 @@ October 6, 2023
 
 ### Enhancements
 
-Fixed security cross-site scripting (XSS) and password hash security vulnerabilities.
+Fixed cross-site scripting (XSS) and password hash security vulnerabilities.
 
 ## Version 1.1.1