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

Fix some info in the doc and add missing parts for Admin UI SDK #268

Merged
merged 9 commits into from
Sep 3, 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
2 changes: 1 addition & 1 deletion src/data/navigation/sections/admin-ui-sdk.js
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ module.exports = [
path: "/admin-ui-sdk/extension-points/order/index.md",
pages: [
{
title: "get custom fees",
title: "custom fees",
path: "/admin-ui-sdk/extension-points/order/custom-fees.md"
},
{
Expand Down
7 changes: 4 additions & 3 deletions src/pages/admin-ui-sdk/app-registration.md
Original file line number Diff line number Diff line change
Expand Up @@ -75,13 +75,14 @@ Create an `ExtensionRegistration` React component that registers the menu config
await register({
id: extensionId,
methods: {
...
}
}
)
}
```

The extension ID should be the same as the one defined in the `extension-manifest.json`.

You must populate the `methods` section with calls to fetch menus, pages, and other entities to be displayed in the Admin. [Extension Points](extension-points/index.md) provides reference information and examples.

## Update the `App.js` routing
Expand All @@ -96,14 +97,14 @@ Make sure that your main page is correctly routed to the index. Here is an examp

```javascript
<ErrorBoundary onError={onError} FallbackComponent={fallbackComponent}>
<BrowserRouter>
<HashRouter>
<Provider theme={lightTheme} colorScheme={'light'}>
<Routes>
<Route path={'index.html'} element={<ExtensionRegistration />} />
<Route index element={<MainPage runtime={props.runtime} ims={props.ims} />} />
</Routes>
</Provider>
</BrowserRouter>
</HashRouter>
</ErrorBoundary>
```

Expand Down
43 changes: 27 additions & 16 deletions src/pages/admin-ui-sdk/extension-points/banner-notification.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,9 @@ keywords:

The `bannerNotification` extension point defines the contents of banner notifications that display when customizing a mass action or order view button.

## Example mass action customizations
## Mass action customizations

### Example

The following example defines success and error messages for multiple mass actions.

Expand Down Expand Up @@ -44,22 +46,27 @@ bannerNotification: {
}
```

## Parameters
### Parameters

| Field | Type | Required | Description |
| --- | --- | --- | --- |
`customer.actionId` | Yes | The `actionId` of a customer mass action.
where banner notification will be customized. It should be the same one that is defined in the customer mass action extension point.
`customer.successMessage` | No | The success message to display when mass action is successful. A default message is displayed if this parameter is not defined.
`customer.errorMessage` | No | The error message to display when mass action fails. A default message is displayed if this parameter is not defined.
`customer.actionId` | string | Yes | The `actionId` of a customer mass action where a banner notification will be customized. It must match an ID that is defined in the customer mass action extension point.
`customer.successMessage` | string | No | The success message to display when a mass action is successful. A default message is displayed if this parameter is not defined.
`customer.errorMessage` | string | No | The error message to display when a mass action fails. A default message is displayed if this parameter is not defined.
`order.actionId` | string | Yes | The `actionId` of an [order mass action](./order/mass-action.md).
`order.successMessage` | No | The success message to display when mass action is successful. A default message is displayed if this parameter is not defined.
`order.errorMessage` | No | The error message to display when mass action fails. A default message is displayed if this parameter is not defined.
`product.actionId` | Yes | The `actionId` of a [product mass action](./product/mass-action.md).
`product.successMessage` | No | The success message to display when mass action is successful. A default message is displayed if this parameter is not defined.
`product.errorMessage` | No | The error message to display when mass action fails. A default message is displayed if this parameter is not defined.
`order.successMessage` | string | No | The success message to display when a mass action is successful. A default message is displayed if this parameter is not defined.
`order.errorMessage` | string | No | The error message to display when a mass action fails. A default message is displayed if this parameter is not defined.
`product.actionId` | string | Yes | The `actionId` of a [product mass action](./product/mass-action.md).
`product.successMessage` | string | No | The success message to display when a mass action is successful. A default message is displayed if this parameter is not defined.
`product.errorMessage` | string | No | The error message to display when a mass action fails. A default message is displayed if this parameter is not defined.

### Sample code

The Adobe Commerce Extensibility Code Samples repository demonstrates how to customize [mass action banner notifications](https://github.com/adobe/adobe-commerce-samples/tree/main/admin-ui-sdk/banner-notification/custom-mass-actions).

## Example order view button customization
## Order view button customization

### Example

The following example defines success and error messages for a custom order view button.

Expand All @@ -77,10 +84,14 @@ bannerNotification: {
}
```

## Parameters
### Parameters

| Field | Type | Required | Description |
| --- | --- | --- | --- |
`buttonId` | Yes | A `buttonId` defined in an order view button extension point.
`successMessage` | No | The success message to display when the view button notification is successful. A default message is displayed if this parameter is not defined.
`errorMessage` | No | The error message to display when the view button notification fails. A default message is displayed if this parameter is not defined.
`buttonId` | string | Yes | A `buttonId` defined in an order view button extension point.
`successMessage` | string | No | The success message to display when the view button notification is successful. A default message is displayed if this parameter is not defined.
`errorMessage` | string | No | The error message to display when the view button notification fails. A default message is displayed if this parameter is not defined.

### Sample code

The Adobe Commerce Extensibility Code Samples repository demonstrates how to customize [order view button banner notifications](https://github.com/adobe/adobe-commerce-samples/tree/main/admin-ui-sdk/banner-notification/custom-order-view-button).
Original file line number Diff line number Diff line change
Expand Up @@ -118,3 +118,7 @@ This sample `schema.json` file is referenced in the mesh configuration file. It
| `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. |

## Sample code

The Adobe Commerce Extensibility Code Samples repository demonstrates how to customize [customer grid columns](https://github.com/adobe/adobe-commerce-samples/tree/main/admin-ui-sdk/customer/custom-grid-columns).
3 changes: 2 additions & 1 deletion src/pages/admin-ui-sdk/extension-points/customer/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,4 +10,5 @@ keywords:

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.
* Add [custom columns](grid-columns.md) to the customer grid.
* Add [custom mass actions](mass-action.md) to the customer grid.
Original file line number Diff line number Diff line change
Expand Up @@ -60,3 +60,7 @@ customer: {
| `customerSelectLimit` | integer | No | Set the maximum number of customers that can be selected for a mass action. By default, the number is unlimited. |
| `displayIframe` | boolean | No | Indicates whether an iFrame will be displayed at the relative path. The default value is `true`. [Mass actions without iFrames](../../extension-points/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. |

## Sample code

The Adobe Commerce Extensibility Code Samples repository demonstrates how to customize [customer mass actions](https://github.com/adobe/adobe-commerce-samples/tree/main/admin-ui-sdk/customer/custom-mass-action).
6 changes: 4 additions & 2 deletions src/pages/admin-ui-sdk/extension-points/menu.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ The `menu` extension point creates a new menu that redirects to the App Builder

When you implement a menu that uses an iFrame, use a [`sharedContext`](./index.md#shared-contexts) to read the IMS token.

Each application is limited to one section and one menu. To implement multiple menus, you must create a separate application for each menu.

## Example customization

The following example creates the **Apps** > **First App on App Builder** menu option.
Expand Down Expand Up @@ -40,11 +42,11 @@ The following example creates the **Apps** > **First App on App Builder** menu o

| Field | Type | Required | Description |
| --- | --- | --- | --- |
| `id` | string | Yes | A unique ID to identify the application menu in Adobe Commerce Admin. |
| `id` | string | Yes | A unique ID to identify the application menu in Adobe Commerce Admin. The input allowed is uppercase and lowercase letters (a-z, A-Z), digits (0-9), forward slash (/), colons (:), and underscores (_). |
| `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. |
| `title` | string | No | The title to display in the menu bar. For the page title of the menu, check the [page extension point](./page.md). |

## Sample code

Expand Down
10 changes: 7 additions & 3 deletions src/pages/admin-ui-sdk/extension-points/order/custom-fees.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
---
title: Order get custom fees
title: Order custom fees
description: Retrieve custom fees applied to orders in the Adobe Commerce Admin.
keywords:
- App Builder
- Extensibility
---

# Order get custom fees
# Order custom fees

The `order get custom fees` extension point displays one or more customized fees or discounts on the following locations:
The `order custom fees` extension point displays one or more customized fees or discounts on the following locations:

* The Orders Total section of the Create Order page and related pages in the Admin.
* Invoice pages in the Admin.
Expand Down Expand Up @@ -54,3 +54,7 @@ order: {
`orderMinimumAmount` | float | No | The minimum amount of the order to apply the fee/discount. Default value: `0`.
`applyFeeOnLastInvoice` | boolean | No | Whether to apply the fee/discount to the last invoice. If `false`, the fee/discount will be applied to the first invoice. Default value: `false`.
`applyFeeOnLastCreditmemo` | boolean | No | Whether to refund the fee/discount to the last credit memo. If `false`, the fee/discount will be refunded to the first credit memo. Default value: `true`.

## Sample code

The Adobe Commerce Extensibility Code Samples repository demonstrates how to customize [order custom fees](https://github.com/adobe/adobe-commerce-samples/tree/main/admin-ui-sdk/order/custom-fees).
7 changes: 4 additions & 3 deletions src/pages/admin-ui-sdk/extension-points/order/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ keywords:

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

* Add custom [columns](grid-columns.md) to the order grid.
* Create a custom [mass action](mass-action.md).
* Add a custom [button](view-button.md).
* Add [custom columns](grid-columns.md) to the order grid.
* Add [custom mass actions](mass-action.md) to the order grid.
* Add [custom buttons](view-button.md) to the order grid.
* Add [custom fees](custom-fees.md) to the order grid.
4 changes: 2 additions & 2 deletions src/pages/admin-ui-sdk/extension-points/product/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,5 +10,5 @@ keywords:

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

* Add custom [columns](grid-columns.md) to the product grid.
* Create a custom [mass action](mass-action.md).
* Add [custom columns](grid-columns.md) to the product grid.
* Add [custom mass actions](mass-action.md) to the product grid.
18 changes: 12 additions & 6 deletions src/pages/admin-ui-sdk/installation.md
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ This method installs the SDK on a cloud instance.
1. Update your `composer.json` file:

```bash
composer require "magento/module-commerce-backend-uix": ">=1.0"
composer require "magento/commerce-backend-sdk": ">=1.0"
```

1. Update dependencies and install the extension:
Expand All @@ -55,7 +55,7 @@ This method installs the SDK on a cloud instance.
The `composer update` command updates all dependencies. If you do not want to update all dependencies at the same time, use this command instead:

```bash
composer update magento/module-commerce-backend-uix
composer update magento/commerce-backend-sdk
```

1. Commit and push your changes.
Expand All @@ -67,7 +67,7 @@ This method installs the SDK on an On-premises instance.
1. Add the SDK module to the `require` section of the `composer.json` file:

```bash
composer require "magento/module-commerce-backend-uix": ">=1.0"
composer require "magento/commerce-backend-sdk": ">=1.0"
```

1. Update dependencies and install the extension:
Expand All @@ -79,7 +79,7 @@ This method installs the SDK on an On-premises instance.
The `composer update` command updates all dependencies. If you do not want to update all dependencies at the same time, use this command instead:

```bash
composer update magento/module-commerce-backend-uix
composer update magento/commerce-backend-sdk
```

1. Upgrade Adobe Commerce:
Expand All @@ -88,6 +88,12 @@ This method installs the SDK on an On-premises instance.
bin/magento setup:upgrade
```

1. Refresh indexes:

```bash
bin/magento indexer:reindex
```

1. Clear the cache:

```bash
Expand All @@ -105,11 +111,11 @@ Use the following procedure to update patch versions of the SDK, such as from V1
1. Run the following command to update the SDK:

```bash
composer update magento/module-commerce-backend-uix
composer update magento/commerce-backend-sdk
```

1. Run the following commands to upgrade Adobe Commerce and clear the cache.

```bash
bin/magento setup:upgrade && bin/magento cache:clean
bin/magento setup:upgrade && bin/magento indexer:reindex && bin/magento cache:clean
```
16 changes: 14 additions & 2 deletions src/pages/admin-ui-sdk/publish.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,24 @@ keywords:

After you have tested your app locally, you are ready to submit your app for approval. Once the app has been approved, it will be available in the Adobe App Registry. The Admin UI SDK can then be able to fetch the information it needs to create the app UI in Adobe Commerce.

## Publish the application

During the testing phase, an administrator of your enterprise organization performs the approvals. At this point, your app is not public.

[Publishing Your First App Builder Application](https://developer.adobe.com/app-builder/docs/getting_started/publish_app/) in the _App Builder Getting Started_ guide describes how to publish your app. Deploy your app to your Production workspace, then use the following steps:

1. Perform all testing. If any changes need to be made to your app, update your code and redeploy. Repeat these steps until you have completed all testing.

1. Submit for publishing approval on your Adobe Developer Console.

1. Your app must be approved by an enterprise organization administrator. Your administrator uses the My Exchange panel in the Developer Console to perform this task. Upon approval, the app is published and available for use by employees within your enterprise organization. Adobe Commerce can now find the app in the App Registry."
1. Your app must be approved by an enterprise organization administrator. Your administrator uses the [Adobe Exchange Manage panel](https://exchange.adobe.com/manage) to perform this task. Upon approval, the app is published and available for use by employees within your enterprise organization. Adobe Commerce can now find the app in the App Registry.

1. Perform additional testing if needed.

## Update an already published application

To update an already published application, you must revoke it and go through the approval process again.

1. Ask an enterprise organization administrator to revoke your published application in the [Adobe Exchange Manage panel](https://exchange.adobe.com/manage). Note that once revoked, your application will no longer be public.

1. Perform all testing. If any changes need to be made to your app, ask the administrator to reject the app within the My Exchange utility. Update your code and resubmit your app for approval. Repeat these steps until you have completed all testing.
1. Deploy new changes to your application in the Production workspace and follow the same steps to publish the application.
6 changes: 6 additions & 0 deletions src/pages/admin-ui-sdk/troubleshooting.md
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,12 @@ In this comprehensive troubleshooting guide, we'll help you navigate through com

* **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`.

* Check the `system.log` file to ensure the issue related to the Admin UI SDK is detected. Run the following command to check the file:

```bash
more var/log/system.log | grep -i "Admin UI SDK"
```

## App menu is missing in the Commerce Admin

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