Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update Admin UI SDK documentation for 1.4.0 release #160

Merged
merged 6 commits into from
Mar 19, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions src/data/navigation/sections/admin-ui-sdk.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,16 @@ module.exports = [
title: "Extension points",
path: "/admin-ui-sdk/extension-points/index.md",
pages: [
{
title: "customer",
path: "/admin-ui-sdk/extension-points/customer/index.md",
pages: [
{
title: "grid columns",
path: "/admin-ui-sdk/extension-points/customer/grid-columns.md"
}
]
},
{
title: "menu",
path: "/admin-ui-sdk/extension-points/menu.md"
Expand Down
59 changes: 25 additions & 34 deletions src/pages/admin-ui-sdk/configuration.md
Original file line number Diff line number Diff line change
Expand Up @@ -77,24 +77,7 @@ You can download a sample app from the [Commerce UI test extension repository](h
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': '*'
});
let json_response;

console.log(url.parse(req.url,true).pathname);
if (url.parse(req.url,true).pathname == "/config") {
json_response = {
baseUrl: "https://localhost.adobe.io:9090/",
apiKey: "apiKey",
auth: {
schema: "Bearer",
imsToken: "dummyToken"
},
imsOrg: "imsOrg",
version: 1,
service: "commerce",
extensionPoint: "backend-ui"
}
} else {
json_response = [{
const json_response = {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will people upgrading to 1.4.0 need to make these updates?

Is a sample server.js file provided? If yes, it might be better to point to it rather than trying to keep this up to date.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The non updated version will still work as expected. I agree it's better to have a file that we update in the repository, let me double check if we already publish it, if not I can do so.

"name": "test-extension",
"title": "Test extension",
"description": "No",
Expand All @@ -111,9 +94,8 @@ You can download a sample app from the [Commerce UI test extension repository](h
"supportEmail": "test@adobe.com",
"appId": "4a4c7cf8-bd64-4649-b8ed-662cd0d9c918"
},
"status": "PUBLISHED" }]
}
//console.log(json_response);
"status": "PUBLISHED"
}
res.end( JSON.stringify(json_response) );
}).listen(9090);
```
Expand All @@ -126,23 +108,32 @@ You can download a sample app from the [Commerce UI test extension repository](h

1. Make sure you have access to the localhost server configuration by entering the following URL in your browser:

`https://localhost:9090/config`
`https://localhost:9090/`

The browser displays a JSON file similar to the following:

```json
{
"baseUrl":"https://localhost:9090/",
"apiKey":"apiKey",
"auth":{
"schema":"Bearer",
"imsToken":"dummyToken"
},
"imsOrg":"imsOrg",
"version":1,
"service":"commerce",
"extensionPoint":"backend-ui"
}
[
{
"name": "test-extension",
"title": "Test extension",
"description": "No",
"icon": "no",
"publisher": "aQQ6300000008LEGAY",
"endpoints": {
"commerce/backend-ui/1": {
"view": [{
"href": "https://localhost:9080/index.html"
}]
}
},
"xrInfo": {
"supportEmail": "test@adobe.com",
"appId": "4a4c7cf8-bd64-4649-b8ed-662cd0d9c918"
},
"status": "PUBLISHED"
keharper marked this conversation as resolved.
Show resolved Hide resolved
}
]
```

1. Run your extension locally.
Expand Down
120 changes: 120 additions & 0 deletions src/pages/admin-ui-sdk/extension-points/customer/grid-columns.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
---
title: customer grid columns
description: Customize the customers page in the Adobe Commerce Admin.
keywords:
- App Builder
- Extensibility
---

# customer grid columns

The `customer grid columns` extension point enables you to add columns to the grid on the **Customers** > **All Customers** page in the Adobe Commerce Admin. This extension point requires an [API Mesh](https://developer.adobe.com/graphql-mesh-gateway/gateway) for Adobe Developer App Builder 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
customer: {
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'
}
]
}
}
}
```

### Sample API Mesh configuration file

The following sample mesh configuration file defines the external source that contains the data to populate in the custom columns.

```json
{
"meshConfig": {
"sources": [
{
"name": "customers",
"handler": {
"JsonSchema": {
"baseUrl": "https://www.example.com",
"operations": [
{
"type": "Query",
"field": "customers",
"path": "/graphql",
"method": "GET",
"responseSchema": "./schema.json"
}
]
}
}
}
]
}
}
```

### Sample schema file

This sample `schema.json` file is referenced in the mesh configuration file. It defines the response of the external `customerGridColumns` query that fetches column data.

```json
{
"$schema": "http://json-schema.org/draft-04/schema#",
"type": "object",
"properties": {
"customerGridColumns": {
"type": "object",
"patternProperties": {
"^0": {
"type": "object",
"properties": {
"first_column": {
"type": "string"
},
"second_column": {
"type": "integer"
},
"third_column": {
"type": "integer"
}
}
}
}
}
},
"required": [
"customerGridColumns"
]
}
```

## 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`. Date values must be ISO 8601-compliant. |
13 changes: 13 additions & 0 deletions src/pages/admin-ui-sdk/extension-points/customer/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
---
title: Customer extension points
description: Learn how to make modifications to the Customers page in the Adobe Commerce Admin.
keywords:
- App Builder
- Extensibility
---

# Customer extension points

The Adobe Commerce Admin UI SDK enables you to make modifications to the following elements on the **Customer** > **All Customers** page in the Adobe Commerce Admin:

* Add custom [columns](grid-columns.md) to the customer grid.
36 changes: 36 additions & 0 deletions src/pages/admin-ui-sdk/extension-points/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -35,5 +35,41 @@ const getGuestConnection = async () => {
getGuestConnection().then((guestConnection) => {
guestConnection.sharedContext.get('selectedIds')
})
```

The `path` parameter for a `productMassAction` specifies where to redirect the mass action UI.

## Mass actions without iFrames

When a mass action `displayIframe` parameter is set to `false`, you must account for additional factors.

### Mass action request headers

| Header | Description |
| --- | --- |
| `X-Request-ID` | A unique UUID v4 generated when the request is sent as a unique identifier. |
| `Content-Type` | The request content type is `application/json`. |
| `Accept` | The request accepts a response type of `application/json`. |
| `Authorization` | The request is authenticated using an IMS token generated for the organization attached to the Commerce instance. |
| `x-gw-ims-org-id` | The organization ID. |

### Application failures

Commerce expects application responses to contain the error status and message.
Commerce logs the error and displays an error banner notification to the user.

### Connection interruption failures

By default, Commerce waits 10 seconds for a response, though the extension point can customize this value.
When the timeout is reached, Commerce:

- Logs a 408 timeout status and error message.
- Displays an error banner notification.
- Sends the `admin_ui_sdk_mass_action_request_failed` event. The application can subscribe to this event to take action, such as rolling back updates in Commerce.

The application can access details of the failed request using the GET `V1/adminuisdk/massaction/<requestId>` REST API. The token used to authenticate the request must have access to the Admin UI SDK. The call returns an error message if the request ID was not found or if it associated with a successful action.

### Recommendations

- Use bulk update in Commerce to avoid inconsistency issues in case of failures.
- Event and REST API responses contain the list of selected IDs for a request. It is the application's responsibility to monitor updates or failures in Commerce.
10 changes: 9 additions & 1 deletion src/pages/admin-ui-sdk/extension-points/order/mass-action.md
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,13 @@ order: {
title: 'Another Orders Mass Action',
type: `${extensionId}.another-mass-action`,
path: '#/another-mass-action'
},
{
actionId: `${extensionId}::update-mass-action`,
label: 'Update Mass Action',
path: 'api/v1/web/SampleExtension/update-orders',
displayIframe: false,
timeout: 15
}
]
}
Expand All @@ -54,4 +61,5 @@ order: {
| `title` | string | No | An optional page title for the action. If not specified, the label is used.
| `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. |
| `orderSelectLimit` | integer | No | Set the maximum number of orders 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 action. |
| `displayIframe` | boolean | No | Indicates whether an iFrame will be displayed at the relative path. The default value is `true`. [Mass actions without iFrames](../index.md#mass-actions-without-iframes) provides additional details. |
| `timeout` | integer | No | Only relevant when `displayIframe` is set to `false`. Timeout by seconds to the request sent to application. Default value is 10 seconds. |
12 changes: 9 additions & 3 deletions src/pages/admin-ui-sdk/extension-points/product/mass-action.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ product: {
{
actionId: `${extensionId}::first-mass-action`,
label: 'First App Mass Action',
type: `${extensionId}.first-mass-action`,
confirm: {
title: 'First App Mass Action',
message: 'Are you sure your want to proceed with First App Mass Action on selected products?'
Expand All @@ -34,9 +33,15 @@ product: {
{
actionId: `${extensionId}::another-first-mass-action`,
label: 'Another Mass Action',
type: `${extensionId}.another-mass-action`,
title: 'Another Products Mass Action',
path: '#/another-mass-action'
},
{
actionId: `${extensionId}::update-mass-action`,
label: 'Update Mass Action',
path: 'api/v1/web/SampleExtension/update-products',
displayIframe: false,
timeout: 15
}
]
}
Expand All @@ -54,4 +59,5 @@ product: {
| `title` | string | No | An optional page title for the action. If not specified, the label is used. |
| `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. |
| `displayIframe` | boolean | No | Indicates whether an iFrame will be displayed at the relative path. The default value is `true`. [Mass actions without iFrames](../index.md#mass-actions-without-iframes) provides additional details. |
| `timeout` | integer | No | Only relevant when `displayIframe` is set to `false`. The number of seconds to wait for a response to a request sent to the application. Default value is 10 seconds. |
30 changes: 22 additions & 8 deletions src/pages/admin-ui-sdk/troubleshooting.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,9 @@ keywords:

In this comprehensive troubleshooting guide, we'll help you navigate through common challenges and provide solutions to get you back on track. We'll walk you through the troubleshooting process, empowering you to resolve problems efficiently and effectively.

## App menu is missing in the Commerce Admin

It's common to have the App menu missing from the Commerce Admin menu when:

* **The app is not correctly published in App Builder.** Go to the App project in the developer console and check that the Production workspace has a status of Published. If this is not the case, request an approval to publish and test again once the application in Approved.
## Configured extension points are not displayed in Commerce Admin

* **The latest changes are not correctly deployed and published.** Make sure to deploy the latest changes using `aio app deploy` in the correct `org/project/workspace`.

* **The `Magento_AdminAdobeIms`module has not been enabled.** Run the following command from the Adobe Commerce command line to check the status of this module.
* **The `Magento_AdminAdobeIms` module has not been enabled.** Run the following command from the Adobe Commerce command line to check the status of this module.

`bin/magento module:status Magento_AdminAdobeIms`

Expand All @@ -28,6 +22,26 @@ It's common to have the App menu missing from the Commerce Admin menu when:

[Configure the Commerce Admin Integration with Adobe ID](https://experienceleague.adobe.com/docs/commerce-admin/start/admin/ims/adobe-ims-config.html#) provides additional information about setting up Adobe Identity Management Service (IMS) on Adobe Commerce.

* **The application is published in a different organization.** Run the following command from the Adobe Commerce command line to check the organization ID used to enable the `Magento_AdminAdobeIms` module.

`bin/magento admin:adobe-ims:info`

The response will contain the needed info.

```terminal
Client ID:
Organization ID:
Client Secret configured
```

* **The app is not correctly published in App Builder.** Go to the App project in the developer console and check that the Production workspace has a status of Published. If this is not the case, [request an approval to publish](./publish.md) and test again once the application in Approved.

* **The latest changes are not correctly deployed and published.** Make sure you deploy the latest changes using the `aio app deploy` command in the correct `org/project/workspace`.

## App menu is missing in the Commerce Admin

It's common to have the App menu missing from the Commerce Admin menu when:

* **The registration of the menu is not correct.** Make sure that you defined the correct `menu` method with a `getItems` function that returns an array of the menus to register.

* To make sure your registration is correctly deployed, navigate in your browser to `<appURL>/index.html`. You can find your application URL in your project workspace in the Adobe developer console.
Expand Down
Loading