Merge branch 'main' into SITES-15210

AdobeDocs · Jan 9, 2024 · f1cd8c4 · f1cd8c4
2 parents fe0d1ee + f65ce80
commit f1cd8c4
Show file tree

Hide file tree

Showing 6 changed files with 152 additions and 7 deletions.
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -148,7 +148,7 @@ module.exports = {
             path: "/services/aem-cf-editor/api/commons/"
           },
           {
-            title: "Cavas Data",
+            title: "Canvas Data",
             path: "/services/aem-cf-editor/api/data/"
           },
           {
@@ -178,6 +178,10 @@ module.exports = {
           {
             title: "Modal Dialogs",
             path: "/services/aem-cf-editor/api/modal/"
+          },
+          {
+            title: "Custom form element rendering",
+            path: "/services/aem-cf-editor/api/custom-fields/"
           }
         ]
       },

diff --git a/src/pages/services/aem-cf-console-admin/api/action-bar/index.md b/src/pages/services/aem-cf-console-admin/api/action-bar/index.md
@@ -18,6 +18,7 @@ You have the ability to:
 - create multiple buttons from single extension;
 - implement drop-down menu buttons;
 - use any [icon](https://react-spectrum.adobe.com/react-spectrum/workflow-icons.html#available-icons) from React Spectrum;
+- delete default or added by extension buttons;
 
 ## Custom button with callback
 
@@ -47,6 +48,8 @@ const guestConnection = await register({
 });
 ```
 
+The callback is invoked when user clicks on the button and receives list of content fragments selected in the list.
+
 ## Custom button with sub menu
 
 ```js
@@ -92,9 +95,29 @@ const guestConnection = await register({
 
 The callback is invoked when user clicks on the button and receives list of content fragments selected in the list.
 
-<InlineAlert variant="warning" slots="text" />
+## Delete button
+
+```js
+import { register } from "@adobe/uix-guest";
 
-The `getButton` method is deprecated. When defining a single button, use `getButtons` and provide a single-item array.
+// ...
+
+const guestConnection = await register({
+    id: "my.company.extension-with-action-bar-button",
+    methods: {
+        actionBar: {
+            deleteButtons() {
+                return [
+                    {
+                        //The "id" property is the "data-id" property of html button element.
+                        id: "my.company.export-button"
+                    },
+                ];
+            },
+        },
+    },
+});
+```
 
 ## API Reference
 
@@ -116,3 +139,9 @@ The `getButton` method is deprecated. When defining a single button, use `getBut
 | label    | `string`                     | ✔️  | Button label that will be visible on UI                                                                      |
 | icon     | `string`                     |    | Name of a [React-Spectrum workflow icon](https://react-spectrum.adobe.com/react-spectrum/workflow-icons.html#available-icons) |
 | onClick  | `callback(selections): void` |  ✔️ | A callback for a button `onClick` event. Receives list of content fragments selected in the list             |
+
+### Delete button API
+
+| Field    | Type                                                                        | Required | Description                                                                  |
+|----------|-----------------------------------------------------------------------------| ------ |------------------------------------------------------------------------------|
+| id       | `string`                                                                    | ✔️  | "id" is a "data-id" attribute of the button (please use browser developer console to find actual value). |
diff --git a/src/pages/services/aem-cf-console-admin/api/header-menu/index.md b/src/pages/services/aem-cf-console-admin/api/header-menu/index.md
@@ -19,6 +19,7 @@ You have the ability to:
 - implement drop-down menu buttons;
 - use different [variations](https://spectrum.adobe.com/page/button/#Options) of buttons from React Spectrum;
 - use any [icon](https://react-spectrum.adobe.com/react-spectrum/workflow-icons.html#available-icons) from React Spectrum;
+- delete default or added by extension buttons;
 
 ## Custom button with callback
 
@@ -48,6 +49,8 @@ const guestConnection = await register({
 });
 ```
 
+The `onClick` callback is invoked when a user clicks on the button. It does not receive any arguments.
+
 ## Custom button with sub menu
 
 ```js
@@ -93,9 +96,28 @@ const guestConnection = await register({
 
 The `onClick` callback is invoked when a user clicks on the button. It does not receive any arguments.
 
-<InlineAlert variant="warning" slots="text" />
+## Delete button
+
+```js
+import { register } from "@adobe/uix-guest";
 
-The `getButton` method is deprecated. When defining a single button, use `getButtons` and provide a single-item array.
+// ...
+
+const guestConnection = await register({
+    id: "my.company.extension-with-header-menu-button",
+    methods: {
+        headerMenu: {
+            deleteButtons() {
+                return [
+                    {
+                        id: "my.company.export-button"
+                    },
+                ];
+            },
+        },
+    },
+});
+```
 
 ## API Reference
 
@@ -118,3 +140,9 @@ The `getButton` method is deprecated. When defining a single button, use `getBut
 | label    | `string`                                                                    | ✔️  | Button label that will be visible on UI                                                                     |
 | icon     | `string`                                                                    |    | Name of a [React-Spectrum workflow icon](https://react-spectrum.adobe.com/react-spectrum/workflow-icons.html#available-icons) |
 | onClick  | `callback(): void`                                                          |  ✔️ | A callback for a button `onClick` event                                                                     |
+
+### Delete button API
+
+| Field    | Type                                                                        | Required | Description                                                                  |
+|----------|-----------------------------------------------------------------------------| ------ |------------------------------------------------------------------------------|
+| id       | `string`                                                                    | ✔️  | "id" is a "data-id" attribute of the button (please use browser developer console to find actual value). |
diff --git a/src/pages/services/aem-cf-console-admin/api/modal/index.md b/src/pages/services/aem-cf-console-admin/api/modal/index.md
@@ -25,7 +25,7 @@ const guestConnection = await register({
     {
         //...
     }
-}
+});
 
 guestConnection.host.modal.showUrl({
     title: "Extension Modal",
@@ -40,7 +40,7 @@ import { attach } from "@adobe/uix-guest";
 
 const guestConnection = await attach({
     id: "my.company.extension-with-modal"
-}
+});
 
 guestConnection.host.modal.close();
 ```

diff --git a/src/pages/services/aem-cf-editor/api/custom-fields/index.md b/src/pages/services/aem-cf-editor/api/custom-fields/index.md
@@ -0,0 +1,80 @@
+---
+title: Custom form element rendering - AEM Content Fragments Editor Extensibility
+description: Learn how to customize a form field rendering in AEM Content Fragments Editor
+contributors:
+  - https://github.com/AdobeDocs/uix
+---
+
+# Custom form element rendering
+
+This feature allows third-party developer to build custom input UI for specific fields or types of fields.
+
+## Define override rules
+
+An UIX extension can define a list of override rules, each consisting of a set of RegExp expressions for field name, type, fragment path or/and model path. When a field on the canvas matches one of these expressions, the standard UI is replaced with an iframe, which then renders the custom UI provided by the extension.
+
+```js
+function ExtensionRegistration() {
+    const init = async () => {
+        const guestConnection = await register({
+            id: extensionId,
+            methods: {
+                field: {
+                    getDefinitions: () => {
+                        return [
+                            {
+                                fieldNameExp: '^address_autocomplete$',
+                                url: '/#/address-autocomplete-field',
+                            },
+                        ];
+                    },
+                },
+            },
+        });
+    };
+    init().catch(console.error);
+
+    return <Text>IFrame for integration with Host (AEM)...</Text>;
+}
+```
+
+## Implement custom rendering logic
+
+```js
+function CustomField() {
+...
+    useEffect(() => {
+        const init = async () => {
+            // connect to the host (ie. CF Editor)
+            const conn = await attach({ id: extensionId });
+            setConnection(conn);
+
+            // get model
+            const model = await conn.host.field.getModel();
+
+            // configure validation state subscriber
+            await conn.host.field.onValidationStateChange((state) => setValidationState(state));
+
+            // get default value
+            const defaultValue = await conn.host.field.getDefaultValue();
+        }
+
+        init().catch(console.error);
+    }, []);
+
+    // Custom fileld will be display instead of original one
+    return <TextField defaultValue={value} onChange={(v) => conn.host.field.onChange(v)} ... />;
+}
+```
+
+## API Reference
+
+| Field        | Type      | Required | Description                                                                                                                                                               |
+|--------------|-----------|----------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| url          | `string`  |  ✔️      | URL of the page to load in the iframe that will replace the original field. The URL must have the same origin as the extension declaring the rules for field replacement. |
+| pathExp      | `string`  |          | RegExp for "fragment content" path                                                                                                                                        |
+| modelPathExp | `string`  |          | RegExp for "fragment content model" path                                                                                                                                  |
+| fieldTypeExp | `string`  |          | RegExp for field type                                                                                                                                                     |
+| fieldNameExp | `string`  |          | RegExp for field name                                                                                                                                                     |
+
+At least one valid expression must be specified: `pathExp`, `modelPathExp`, `fieldTypeExp`, or `fieldNameExp`.
diff --git a/src/pages/services/aem-cf-editor/api/index.md b/src/pages/services/aem-cf-editor/api/index.md
@@ -56,3 +56,7 @@ Learn how to use basic methods for navigating within an extension
 [Modal Dialogs](modal)
 
 Learn about modal host API methods that can be used in any extension
+
+[Custom form element rendering](custom-fields)
+
+Learn how to customize a form field rendering