Skip to content
Open
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
5 changes: 4 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -30,4 +30,7 @@ cypress/videos
cypress/screenshots

# lerna
lerna-debug.log
lerna-debug.log

# cursor
.cursor
11 changes: 10 additions & 1 deletion src/pages/admin-ui-sdk/app-registration.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,24 @@ keywords:

Your app must be correctly configured with Adobe App Registry to use the Admin UI SDK to create a custom UI in Commerce. You must perform the following steps before submitting your app to be published.

<InlineAlert variant="info" slots="text1" />

These registration steps are required for all deployment types.

## Code layout best practices

We recommend using the following code layout for your project:
Recommended project structure:

```text
├── src/
│ └── commerce-backend-ui-1/
│ ├── actions/
│ │ └── registration/
│ │ └── index.js
│ ├── web-src/
│ │ ├── App.js
│ │ ├── ExtensionRegistration.jsx
│ │ └── ...
│ └── ext.config.yaml
├── install.yaml
├── extension-manifest.json
Expand Down
21 changes: 17 additions & 4 deletions src/pages/admin-ui-sdk/configuration.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,28 @@ The Adobe Commerce Admin UI SDK allows you to use a local server to view and tes

## General configuration

Navigate to **Stores** > Settings > **Configuration** > **Adobe Services** > **Admin UI SDK** screen. The Admin UI SDK is disabled by default. To enable it, set the **Enable Admin UI SDK** field to **Yes**.
Configure the Admin UI SDK from the Commerce Admin by navigating to **Stores** > Settings > **Configuration** > **Adobe Services** > **Admin UI SDK**.

![Admin UI SDK general configuration](../_images/admin-ui-sdk/configuration/general.png)

The **General configuration** section enables the Admin UI SDK and refreshes registrations when changes are made.
### Enable and configure the Admin UI SDK

The [**Configure extensions**](./eligible-extensions-config.md) button allows you to select the workspace and eligible extensions for the Commerce instance.
Set to **Yes** to enable the Admin UI SDK. Disabled by default.

The **Refresh registrations** button reloads all registrations from the App Builder registry. It is typically used when changes are made to the registration on the App Builder application side or when a new app is added and published, to reflect these changes in the Admin.
* <Edition name="saas" /> **SaaS** - Toggle to **Yes**. No additional installation required.
* <Edition name="paas" /> **PaaS / On-Premises** - Install the Admin UI SDK using Composer (versions `2.4.5-2.4.7`) before enabling. Version `2.4.8+` is pre-installed.

After enabling the Admin UI SDK, configure your IMS credentials and select extensions using the [**Configure extensions**](./eligible-extensions-config.md) button, which allows you to:

* Select your App Builder workspace
* Choose which extensions display in the Admin
* View eligible extensions from your organization

The **Refresh registrations** button reloads extension registrations from App Builder. Use this button when:

* An extension registration changes in App Builder
* A new app or version is published
* Extensions are not appearing as expected

## Database logging configuration

Expand Down
8 changes: 8 additions & 0 deletions src/pages/admin-ui-sdk/extension-points/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,14 @@ This section describes how to use existing extension points in any Adobe Develop

The [Adobe Commerce Samples repository](https://github.com/adobe/adobe-commerce-samples/tree/main/admin-ui-sdk) contains samples for different extension points of the Adobe Commerce Admin UI SDK. Use these samples to gain insight on how the Admin SDK injects menus and pages into the Admin.

<InlineAlert variant="info" slots="text1" />

Review the README.md in each sample repository for prerequisites, deployment steps, and known issues.

<Edition name="saas" />

Extensions render only if your app is **published** in Adobe Developer Console. Draft apps do not display. See [Publish your app](../publish.md).

## Shared contexts

The `sharedContext` constant is available only when a mass action, menu, or order view button performs a redirection to an iFrame page. For mass actions, `sharedContext` contains a set of selected IDs, the Commerce base URL, the client ID, an IMS token, and the IMS org ID, as shown below.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -56,3 +56,9 @@ product: {
## Sample code

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

<InlineAlert variant="warning" slots="text1, text2" />

This sample requires two separate App Builder projects.

Both parts are interdependent and must be configured and deployed together. See the `README.md` file for setup instructions.
12 changes: 12 additions & 0 deletions src/pages/admin-ui-sdk/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,18 @@ The Adobe Commerce Admin UI SDK enables an App Builder developer to extend the [

Many types of apps will use this SDK. It represents a one-to-many approach for supporting Out of Process UI Extensibility. Application developers, internal adopters, and merchants using Out of Process Extensibility no longer have to rely on purely headless applications. Instead, they can now build and use secure and authenticated UIs directly from the Commerce Admin panel.

## Use cases

Partners and merchants can use the Admin UI SDK to build extensions that enhance the Commerce Admin, such as:

* **Build custom reporting dashboards** - Create interactive analytics and business intelligence views for sales data, inventory metrics, and customer insights.

* **Integrate third-party systems** - Connect to ERP, CRM, or warehouse management systems for data sync and operations management.

* **Automate workflows** - Develop custom workflows and approval processes for order management, content publishing, or inventory updates.

* **Enhance product management** - Add specialized product configuration interfaces, bulk editing tools, or custom attribute management.

## Architecture

The following diagram shows the architecture of the Admin UI SDK.
Expand Down
26 changes: 23 additions & 3 deletions src/pages/admin-ui-sdk/installation.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,17 +9,37 @@ keywords:

# Install or update Adobe Commerce Admin UI SDK

Adobe Commerce as a Cloud Service (SaaS) automatically includes the Adobe Commerce Admin UI SDK. All you need to do is enable it. For Adobe Commerce on Cloud and on-premises (PaaS) projects, the SDK is installed automatically on Adobe Commerce version 2.4.8 and later. You must install it manually on older versions.
The installation process varies by deployment type:

* <Edition name="saas" /> **Adobe Commerce as a Cloud Service (SaaS)** - Pre-installed. Enable in the Admin panel only.

* <Edition name="paas" /> **Adobe Commerce on Cloud Infrastructure (PaaS) and On-Premises** - Pre-installed on version `2.4.8+`. Manual Composer installation required for versions `2.4.5-2.4.7`.

<InlineAlert variant="info" slots="text1" />

Magento Open Source is not supported.

[Admin configuration and testing](./configuration.md) describes how to enable and configure the Admin UI SDK.

## Install the Admin UI SDK
## Enable the Admin UI SDK on Adobe Commerce as a Cloud Service (SaaS)

<Edition name="saas" />

The Admin UI SDK is pre-installed. No Composer installation or CLI access required.

To enable:

1. Navigate to **Stores** > **Configuration** > **Services** > **Adobe Developer App Builder**.

1. Enable the **Admin UI SDK** toggle.

1. Save the configuration.

## Install the Admin UI SDK on Cloud Infrastructure (PaaS) and On-Premises

<Edition name="paas" />

This section describes the basic steps to install the Admin UI SDK on Adobe Commerce 2.4.5 to 2.4.7. It is installed automatically on version 2.4.8 and later.
For Adobe Commerce 2.4.5-2.4.7, manual installation is required. Version 2.4.8+ includes the SDK pre-installed.

Adobe Commerce has the following software requirements:

Expand Down
11 changes: 11 additions & 0 deletions src/pages/admin-ui-sdk/troubleshooting.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,17 @@ 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.

## Platform-specific issues

| Platform | Issue | Resolution |
| --- | --- | --- |
| **SaaS** | App not rendering | Ensure the app is **published** in Adobe Developer Console. Verify the Production workspace status is "Published". |
| **SaaS** | Extensions not visible | Verify the Admin UI SDK toggle is enabled in **Stores** > **Configuration** > **Services** > **Adobe Developer App Builder**. |
| **PaaS / On-Premises** | 404 error for extension | Verify the Admin UI SDK module installation via Composer. Run `bin/magento module:status Magento_CommerceBackendUix` and ensure `bin/magento setup:upgrade` was executed. |
| **PaaS / On-Premises** | Extension not loading | Complete all post-installation commands: `bin/magento setup:upgrade`, `bin/magento indexer:reindex`, and `bin/magento cache:clean`. |
| **All** | "No Extensions Found" error | Validate the registration output from `/admin-ui-sdk/registration` action. Ensure `require-adobe-auth` is `true` in `ext.config.yaml`. |
| **All** | IMS authentication issues | Verify the organization ID in App Builder matches Commerce configuration. Run `bin/magento admin:adobe-ims:info` to see your organization ID. |

## Eligible extensions screens is empty

* **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.
Expand Down