From 0cd9e6dea21ac4ba3bb82c7b0e6c1730eeb4ec35 Mon Sep 17 00:00:00 2001 From: Valerii Naida Date: Tue, 7 Nov 2023 08:58:41 -0600 Subject: [PATCH 1/5] feat: Custom form element rendering in Content Fragment Editor (#62) * feat: Custom form element rendering in Content Fragment Editor * feat: Custom form element rendering in Content Fragment Editor -- update menu links * feat: Custom form element rendering in Content Fragment Editor -- update header types --- gatsby-config.js | 10 +-- .../aem-cf-editor/api/custom-fields/index.md | 80 +++++++++++++++++++ src/pages/services/aem-cf-editor/api/index.md | 4 + 3 files changed, 89 insertions(+), 5 deletions(-) create mode 100644 src/pages/services/aem-cf-editor/api/custom-fields/index.md diff --git a/gatsby-config.js b/gatsby-config.js index 999a3fa7..bb20647f 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -144,7 +144,7 @@ module.exports = { path: "/services/aem-cf-editor/api/commons/" }, { - title: "Cavas Data", + title: "Canvas Data", path: "/services/aem-cf-editor/api/data/" }, { @@ -174,13 +174,13 @@ 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/" } ] }, - { - title: "Code Generation", - path: "/services/aem-cf-editor/code-generation/" - }, ] }, plugins: [ 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 new file mode 100644 index 00000000..e874889f --- /dev/null +++ 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 IFrame for integration with Host (AEM)...; +} +``` + +## 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 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 index 1e0b59e1..b0de91e6 100644 --- 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 From 93bc2f20ed80aa5611263a87e629cade85f80cbb Mon Sep 17 00:00:00 2001 From: Volodymyr Zaiets Date: Tue, 21 Nov 2023 10:09:05 -0600 Subject: [PATCH 2/5] Add "delete buttons" documentation (#60) --- .../api/action-bar/index.md | 31 +++++++++++++++++++ .../api/header-menu/index.md | 31 +++++++++++++++++++ 2 files changed, 62 insertions(+) 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 index c57cd990..b5ed6403 100644 --- 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 @@ -90,6 +91,30 @@ const guestConnection = await register({ }); ``` +## Custom button with sub menu + +```js +import { register } from "@adobe/uix-guest"; + +// ... + +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" + }, + ]; + }, + }, + }, +}); +``` + The callback is invoked when user clicks on the button and receives list of content fragments selected in the list. @@ -116,3 +141,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. (Use browser developer console) | 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 index a2dc3d69..bf50380b 100644 --- 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 @@ -91,6 +92,30 @@ const guestConnection = await register({ }); ``` +## Delete button + +```js +import { register } from "@adobe/uix-guest"; + +// ... + +const guestConnection = await register({ + id: "my.company.extension-with-header-menu-button", + methods: { + headerMenu: { + deleteButtons() { + return [ + { + id: "my.company.export-button" + }, + ]; + }, + }, + }, +}); +``` + + The `onClick` callback is invoked when a user clicks on the button. It does not receive any arguments. @@ -118,3 +143,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. (Use browser developer console) | From f15e4edf98549e3ef381cb61bf7b4160f205f44d Mon Sep 17 00:00:00 2001 From: Volodymyr Kublytskyi Date: Tue, 21 Nov 2023 11:11:00 -0600 Subject: [PATCH 3/5] Minor fixes for buttons docs. --- .../api/action-bar/index.md | 27 ++++++++++++++++--- .../api/header-menu/index.md | 13 ++++----- 2 files changed, 29 insertions(+), 11 deletions(-) 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 index b5ed6403..238223b1 100644 --- 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 @@ -91,6 +91,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 @@ -117,9 +119,28 @@ const guestConnection = await register({ The callback is invoked when user clicks on the button and receives list of content fragments selected in the list. - +## 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: { + actionBar: { + deleteButtons() { + return [ + { + id: "my.company.export-button" + }, + ]; + }, + }, + }, +}); +``` ## API Reference @@ -146,4 +167,4 @@ The `getButton` method is deprecated. When defining a single button, use `getBut | Field | Type | Required | Description | |----------|-----------------------------------------------------------------------------| ------ |------------------------------------------------------------------------------| -| id | `string` | ✔️ | "id" is a "data-id" attribute of the button. (Use browser developer console) | +| 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 index bf50380b..c7732345 100644 --- 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 @@ -49,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 @@ -92,6 +94,8 @@ const guestConnection = await register({ }); ``` +The `onClick` callback is invoked when a user clicks on the button. It does not receive any arguments. + ## Delete button ```js @@ -115,13 +119,6 @@ const guestConnection = await register({ }); ``` - -The `onClick` callback is invoked when a user clicks on the button. It does not receive any arguments. - - - -The `getButton` method is deprecated. When defining a single button, use `getButtons` and provide a single-item array. - ## API Reference ### Button API @@ -148,4 +145,4 @@ The `getButton` method is deprecated. When defining a single button, use `getBut | Field | Type | Required | Description | |----------|-----------------------------------------------------------------------------| ------ |------------------------------------------------------------------------------| -| id | `string` | ✔️ | "id" is a "data-id" attribute of the button. (Use browser developer console) | +| id | `string` | ✔️ | "id" is a "data-id" attribute of the button (please use browser developer console to find actual value). | From c75bdcb86231f7ccd20b684c10d4a547e4b65332 Mon Sep 17 00:00:00 2001 From: Volodymyr Kublytskyi Date: Tue, 21 Nov 2023 11:24:38 -0600 Subject: [PATCH 4/5] Removed section duplication. --- .../api/action-bar/index.md | 29 ++----------------- 1 file changed, 3 insertions(+), 26 deletions(-) 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 index 238223b1..3fbd34e3 100644 --- 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 @@ -48,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 @@ -93,7 +95,7 @@ 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 +## Delete button ```js import { register } from "@adobe/uix-guest"; @@ -117,31 +119,6 @@ const guestConnection = await register({ }); ``` -The callback is invoked when user clicks on the button and receives list of content fragments selected in the list. - -## Delete button - -```js -import { register } from "@adobe/uix-guest"; - -// ... - -const guestConnection = await register({ - id: "my.company.extension-with-header-menu-button", - methods: { - actionBar: { - deleteButtons() { - return [ - { - id: "my.company.export-button" - }, - ]; - }, - }, - }, -}); -``` - ## API Reference ### Button API From 80dc8b20b0c137b146ddacd630574f482c136718 Mon Sep 17 00:00:00 2001 From: Iryna Lagno Date: Tue, 5 Dec 2023 10:29:21 -0600 Subject: [PATCH 5/5] Update index.md --- src/pages/services/aem-cf-console-admin/api/modal/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 index afba3434..8446fb53 100644 --- 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(); ```