Admin configuration and testing
The Adobe Commerce Admin UI SDK allows you to use a local server to view and test your Admin customizations before you submit your app to the Adobe Marketplace.
Navigate to Stores > Settings > Configuration > Adobe Services > Admin UI SDK screen.
General configuration
The General configuration section enables the Admin UI SDK and refreshes registrations when changes are made.
The Admin UI SDK is disabled by default. To enable it, set the Enable Admin UI SDK field to Yes.
The Refresh registrations
button reloads all registrations from the registries. 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.
Database logging configuration
The Database logging configuration section allows you to save Admin UI SDK log entries for the specified retention period.
To save logs, set the Enable Logs field to Yes. By default, this field is set to No.
Set the minimum log level to save. Any logs at this level or higher will be stored. By default, the minimum level is set to Warning.
Set the retention period for logs to be cleaned from the database. This field specifies the number of days. By default, the retention period is set to 1 day.
Sandbox testing
The sandbox testing option provides an environment to test your applications using the Admin UI SDK in a real-world setting. This option will retrieve Production workspace registrations that match the chosen statuses. This environment can be shared with colleagues for collaborative testing before publishing the application.
Select Yes from the Enable testing menu.
Set the Testing mode to Staging.
Select all app statuses to load.
Local testing
When you enable the local service, all calls are automatically redirected to the local server, instead of connecting to Adobe's App Registry. The values you specify must match the contents of your local server.js
file.
Select Yes from the Enable testing menu.
Set the Testing mode to
Local testing
.Set the Local Server Base URL that points to your localhost, including the port.
The Mock Admin IMS Module menu determines whether to send mock or real authentication credentials for the Adobe Identity Management Service (IMS). Ensure this value is set to Yes for early-stage testing. Set the value to No when you are ready to test with real credentials.
Set the Mock IMS Token. In the sample
server.js
file, this value is set todummyToken
.Set the Mock IMS Org ID. In the sample
server.js
file, this value is set toimsOrg
.Save your configuration.
Configuration
You can download a sample app from the Adobe Commerce Samples repository to gain insight on how the Admin SDK injects menus and pages into the Admin.
Run the following command to clone and sync the repository:
Copied to your clipboardgit clone git@github.com:adobe/adobe-commerce-samples.gitChange directories to the cloned repository's root directory.
Create a
server.js
file in<repoRootDir>/admin-ui-sdk
to define a local server:Copied to your clipboardconst http = require('https');const fs = require('fs');const url = require('url');const options = {key: fs.readFileSync('key.pem'),cert: fs.readFileSync('cert.pem')};console.log('Server will listen at : https://localhost ');http.createServer(options, function (req, res) {res.writeHead(200, {'Content-Type': 'application/json','Access-Control-Allow-Origin': '*','Access-Control-Allow-Headers': '*'});console.log(url.parse(req.url,true).pathname);const json_response = [{"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"}]res.end( JSON.stringify(json_response) );}).listen(9090);Generate the
key.pem
certificate in the same directory.Copied to your clipboardopenssl genpkey -algorithm RSA -out key.pem -pkeyopt rsa_keygen_bits:2048Generate the
cert.pem
certificate in the same directory.Copied to your clipboardopenssl req -new -x509 -key key.pem -out cert.pem -days 365Run the local server:
Copied to your clipboardnode server.jsMake sure you have access to the localhost server configuration by entering the following URL in your browser:
https://localhost:9090
The browser displays a JSON file similar to the following:
Copied to your clipboard[{"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"}]
Custom menu example
Change directories to
<repoRootDir>/admin-ui-sdk/menu/custom-menu
.Run the following command to load dependencies.
Copied to your clipboardnpm installSelect your App Builder project.
Copied to your clipboardaio console project selectSelect the App Builder workspace.
Copied to your clipboardaio console workspace selectSync the App Builder project details.
Copied to your clipboardaio app useBuild your solution.
Copied to your clipboardaio app buildRun your custom menu extension locally.
Copied to your clipboardaio app runConfirm that the Apps section appears on the main menu and the First App on App Builder option appears in the Apps menu in the Admin. Click First App on App Builder and confirm that the Fetched orders from Adobe Commerce page opens.
Test using project workspaces
Use the following steps to test a specific workspace from your project:
Deploy the app to the workspace.
Copied to your clipboardaio app deployAfter deployment, the command displays the URL to your app workspace under
To view your deployed application:
Change the values of the
name
andhref
fields in thejson_response
section of theserver.js
file to point to your workspace.Copied to your clipboard{"name": "app_name","title": "Test extension","description": "No","icon": "no","publisher": "aQQ6300000008LEGAY","endpoints": {"commerce/backend-ui/1": {"view": [{"href": "https://<app_workspace_url>/index.html"}]}},"xrInfo": {"supportEmail": "test@adobe.com","appId": "4a4c7cf8-bd64-4649-b8ed-662cd0d9c918"},"status": "PUBLISHED"}You can add multiple workspaces to the server to test several applications at once.