Skip to content

Commit 57c12c9

Browse files
asalloum5asalloum5
authored
Merge branch 'main' into admin-ui-sdk-troubleshooting
2 parents 25fc7e6 + 0a73007 commit 57c12c9

File tree

4 files changed

+190
-162
lines changed

4 files changed

+190
-162
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ module.exports = [
1212
path: "/admin-ui-sdk/configuration.md"
1313
},
1414
{
15-
title: "App development",
16-
path: "/admin-ui-sdk/app-development.md"
15+
title: "App registration",
16+
path: "/admin-ui-sdk/app-registration.md"
1717
},
1818
{
1919
title: "MenuApp component",

‎src/pages/admin-ui-sdk/app-development.md

Lines changed: 0 additions & 157 deletions
This file was deleted.

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

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
---
2+
title: App registration
3+
description: Learn about registering your app in the App Registry
4+
---
5+
6+
# App registration
7+
8+
When the application on App Builder is ready to be published, a registration to the Adobe Registry is required to add a menu in the Admin Panel.
9+
10+
## Add or update the `install.yml` file
11+
12+
Create an `install.yml` file in the root of your project.
13+
14+
Make sure you target the correct `extensionPointId`: `commerce/backend-ui/1`
15+
16+
```yaml
17+
$schema: http://json-schema.org/draft-07/schema
18+
$id: https://adobe.io/schemas/app-builder-templates/1
19+
20+
categories:
21+
- action
22+
- ui
23+
24+
extensions:
25+
- extensionPointId: commerce/backend-ui/1
26+
```
27+
28+
## Create or update the `extension-manifest.json` file
29+
30+
Create or update your project `extension-manifest.json` file so that it is similar to the following:
31+
32+
```json
33+
{
34+
"name": "commerce-first-app",
35+
"displayName": "Commerce First App on App Builder",
36+
"description": "Commerce First App on App Builder",
37+
"platform": "web",
38+
"id": "commerce-first-app",
39+
"version": "1.0.0"
40+
}
41+
```
42+
43+
## Add an `ExtensionRegistration` component
44+
45+
Create an `ExtensionRegistration` component that registers the menu configuration in the App Registry. Use the `adobe/uix-sdk` with the `adobe-uix-guest` dependency. The [UI Extensibility](https://developer.adobe.com/uix/docs/overview/design/) Guide describes this process further.
46+
47+
1. Add the `uix-guest` dependency in the `package.json`.
48+
49+
```json
50+
"@adobe/uix-guest": "^<latest-version>"
51+
```
52+
53+
2. Run `npm install`.
54+
55+
```bash
56+
npm install
57+
```
58+
59+
3. Create an `ExtensionRegistration.js` file as follows:
60+
61+
```javascript
62+
import { register } from '@adobe/uix-guest';
63+
64+
export default function ExtensionRegistration() {
65+
init().catch(console.error);
66+
return <></>;
67+
}
68+
69+
const extensionId = 'commerce-first-app'
70+
71+
const init = async () => {
72+
await register({
73+
id: extensionId,
74+
debug: false,
75+
methods: {
76+
extension: {
77+
getId() {
78+
return 'commerce-first-app';
79+
}
80+
},
81+
menu: {
82+
getItems() {
83+
return [
84+
{
85+
id: 'ext_page',
86+
title: 'First App on App Builder',
87+
action: `uixpage/index/index/uix-ext/${extensionId}`,
88+
parent: 'Magento_Backend::marketing',
89+
},
90+
];
91+
},
92+
},
93+
page: {
94+
getTitle() {
95+
return 'Commerce First App on App Builder';
96+
},
97+
},
98+
},
99+
}
100+
);
101+
};
102+
```
103+
104+
Upon registration, the `extension:getId`, `menu:getItems`, and `page:getTitle` methods should be defined for the app.
105+
106+
In this example, the merchant accesses the custom menu from the **Marketing** menu in the Commerce Admin. The title displayed in the menu is defined in `getItems`, whereas the title displayed on page load is defined in `getTitle`.
107+
108+
## Update the `App.js` routing
109+
110+
Add the following route to your `App.js` file to define the correct routing to your app:
111+
112+
```javascript
113+
<Route path={'index.html'} element={<ExtensionRegistration />} />
114+
```
115+
116+
Make sure that your main page is correctly routed to the index. Here is an example of the first app routing in the `App.js` component:
117+
118+
```javascript
119+
<ErrorBoundary onError={onError} FallbackComponent={fallbackComponent}>
120+
<BrowserRouter>
121+
<Provider theme={lightTheme} colorScheme={'light'}>
122+
<Routes>
123+
<Route path={'index.html'} element={<ExtensionRegistration />} />
124+
<Route index element={<MainPage runtime={props.runtime} ims={props.ims} />} />
125+
</Routes>
126+
</Provider>
127+
</BrowserRouter>
128+
</ErrorBoundary>
129+
```
130+
131+
## Update the `app.config.yaml` file
132+
133+
Update the `app.config.yaml` [configuration file](https://developer.adobe.com/app-builder/docs/guides/configuration/) as follows:
134+
135+
```yaml
136+
extensions:
137+
commerce/backend-ui/1:
138+
$include: ext.config.yaml
139+
```
140+
141+
This file now declares extensions and redirects to an `ext.config.yaml` file.
142+
143+
## Add or update the `ext.config.yaml`
144+
145+
Your extension configuration file should look like this:
146+
147+
```yaml
148+
operations:
149+
view:
150+
- type: web
151+
impl: index.html
152+
actions: actions
153+
web: web-src
154+
runtimeManifest:
155+
packages:
156+
SampleExtension:
157+
license: Apache-2.0
158+
actions:
159+
```
160+
161+
Complete this file with the actions from your app.

‎src/pages/amazon-sales-channel/index.md

Lines changed: 27 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,30 @@
11
---
2-
title: Amazon Sales Channel reference app overview
3-
description:
2+
title: Amazon Sales Channel on App Builder overview
3+
description: Learn how you can use Amazon Sales Channel on App Builder as a reference app to build your own Adobe Commerce apps.
44
---
55

6-
# Amazon Sales Channel reference app overview
6+
# Amazon Sales Channel on App Builder overview
7+
8+
Amazon Sales Channel on App Builder is a flagship reference app developed by Adobe Commerce to accelerate merchant and partner adoption of out-of-process extensibility. This app showcases how Adobe Developer App Builder can create integrations and extensions without modifying the core Commerce application. Amazon Sales Channel on App Builder focuses on demonstrating how to develop key capabilities and extensibility use cases with App Builder. Partners and developers can leverage the application code, best practice guides, and documentation to confidently create their own next-generation extensions and integrations.
9+
10+
The application presents many common use cases for extending Adobe Commerce, including:
11+
12+
* Integration with a 3rd-party system
13+
* Product catalog synchronization
14+
* UI extensibility
15+
16+
Amazon Sales Channel on App Builder is based on an existing PHP extension (Amazon Sales Channel) that was internally developed by Adobe Commerce. This specific integration was chosen because of the breadth of the use cases required, the existing familiarity with connecting to Amazon, and the ability to directly compare how capabilities are implemented between the two free, publicly accessible applications.
17+
18+
<InlineAlert variant="warning" slots="text" />
19+
20+
This app is not intended or supported for production use. While the provided capabilities are robust, they are only to be used as a reference to build your own applications. Merchants looking to connect and synchronize their Amazon store with Commerce should use the existing [Amazon Sales Channel PHP extension](https://marketplace.magento.com/magento-module-amazon.html), which can be acquired through Commerce Marketplace, or implement another integration.
21+
22+
## Supported functionality
23+
24+
Amazon Sales Channel on App Builder connects Adobe Commerce and Amazon to unify and synchronize your selling platforms. This type of integration allows merchants to manage their product and order data from a single, up-to-date experience. The sample app functionality represents only a subset of the original PHP extension's capabilities. We chose this subset of functionality based on the value provided to partners and developers looking to understand and use our next generation extensibility. The central goal of this reference app is build confidence in the App Builder framework and deliver reusable, Commerce-specific patterns for accelerating implementations.
25+
26+
## Merchant documentation
27+
28+
You can use the [existing user guide](https://experienceleague.adobe.com/docs/commerce-channels/amazon/guide-overview.html) as a reference for the app behaviors. Note that Amazon Sales Channel on App Builder does not feature order management, listing and pricing rules, and several other capabilities of the PHP application.
29+
30+
In general, the sample app looks and feels like the PHP extension. However, some capabilities and behaviors are not exactly the same. Partners and developers should view Amazon Sales Channel on App Builder as a learning tool to enable building high-quality, out-of-process app with confidence.

0 commit comments

Comments
 (0)