Added missed pages for RTE coloroicker, cf-editor/cf-admin navigation host API method, advanced modals dialogs docs. #55
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,97 @@ | ||
| --- | ||
| title: Modal dialogs - AEM Content Fragments Console Extensibility | ||
| description: Learn about modal host API methods that can be used in any extension | ||
| contributors: | ||
| - https://github.com/AdobeDocs/uix | ||
| --- | ||
|
|
||
| # Modal dialogs | ||
|
|
||
| Describes basic methods for using modals dialogs within an extension. | ||
|
|
||
| The AEM instance (host instance) provides an API for showing modal dialogs with custom UI defined by an extension. These modals can be triggered by a click on the button or other events. Modal API is defined in the `modal` namespace. | ||
|
|
||
| Content of the modal is rendered in an iframe with source defined by extension. Before showing modal you should create a page which renders Modal UI. This UI should use Adobe Spectrum UI library to provide consistent experience to the user. | ||
|
|
||
| ## An example of opening and closing a modal | ||
|
|
||
| In order to display modal dialog extension must call `showUrl` method in `modal` namespace. | ||
|
|
||
| ```js | ||
| import { register } from "@adobe/uix-guest"; | ||
|
|
||
| const guestConnection = await register({ | ||
| id: "my.company.extension-with-modal", | ||
| { | ||
| //... | ||
| } | ||
| } | ||
|
|
||
| guestConnection.host.modal.showUrl({ | ||
| title: "Extension Modal", | ||
| url: "/index.html#/modal", // absolute or relative path | ||
| }) | ||
| ``` | ||
|
|
||
| Modal may be closed by `close` method | ||
|
|
||
| ```js | ||
| import { attach } from "@adobe/uix-guest"; | ||
|
|
||
| const guestConnection = await attach({ | ||
| id: "my.company.extension-with-modal" | ||
| } | ||
|
|
||
| guestConnection.host.modal.close(); | ||
| ``` | ||
|  | ||
|
|
||
| ## API Reference | ||
|
|
||
| ### Modal API Request Object | ||
|
|
||
| The `modal.showUrl` and `modalInstance.set` methods accept a `ModalRequest` object. | ||
|
|
||
| | Property | Type | Required | Default | Description | | ||
| |-----------------|-------------------------------------------|----------|-----------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | ||
| | `url` | `string` | ✔️ | | URL of the page to load in the dialog frame. The URL must have the same origin as the extension making the modal request. | | ||
| | `title` | `string` | ✔️ | | Title of the modal to display. | | ||
| | `height` | `string` <br /> `number` <br /> `"auto"` | | `auto` | A number of pixels, a CSS value, or the string `auto`. The `auto` keyword will grow or shrink the modal to the height of the document in the iframe every time the guest document resizes, to a minimum of 20% and a maximum of 75% of window height. In fullscreen mode, this is ignored. | | ||
| | `width` | `string` <br /> `number` <br /> `"auto"` | | `auto` | A number of pixels, a CSS value, or the string `auto`. The `auto` keyword will grow or shrink the modal to the width of the document in the iframe every time the guest document resizes, to a minimum of 20% and a maximum of 75% of window width. In fullscreen mode, this is ignored. | | ||
| | `fullscreen` | `boolean` | | `false` | Display the dialog as large as possible. It will overlay most of the application, leaving small borders to indicate overlay. If true, any "width" and "height" parameters will be ignored. | | ||
| | `isDismissable` | `boolean` | | `true` | Show the dismiss button, so a user can close the modal no matter what state it is in. If an extension disables this, it must provide its own UI control which calls `modal.close()`. | | ||
| | `loading` | `boolean` | | `false` | Preserve the progress spinner that displays before the modal contents load. When `false` or unset, the modal will show a progress spinner until the guest in the iframe is connected, and then display the frame contents. If the `modal.showUrl()` call sets `{ loading: true }`, the spinner will continue displaying after the guest has connected, until the guest calls `modal.set({ loading: false })`. A modal which needs to do data fetching or layout adjustment after connecting should set `{ loading: true }` and then dismiss it from the modal when its UI is ready. | | ||
|
|
||
| ### Modal API | ||
|
|
||
| The modal API is available to all extensions at the host.modal property. | ||
|
|
||
| #### `modal.showUrl(request: ModalRequest): Promise<ModalInstanceApi>` | ||
|
|
||
| Any guest's GuestServer may call `modal.showUrl` to open a modal dialog. The provided `ModalRequest` object must have a `url` of the page to be displayed inside the modal. Typically this is another page or route in the calling extension app. | ||
|
|
||
| If another modal is displaying and it belongs to a different extension, it rejects. | ||
|
|
||
| #### `modal.close(): Promise<void>` | ||
|
|
||
| Close the current modal. If the current modal doesn't belong to the calling extension, it rejects. | ||
|
|
||
| ### Modal Instance API | ||
|
|
||
| This API is returned to the GuestServer and also shared with the modal that loads inside the frame. A GuestServer loaded in a modal must call `set` instead of `showUrl`. | ||
|
|
||
| #### `modal.set(request: ModalRequest): Promise<void>` | ||
|
|
||
| Modify the currently displaying modal. GuestUI frames running inside the modal may call this method to change their dimensions, or to change other parameters. | ||
|
|
||
| #### `modal.close(): Promise<void>` | ||
|
|
||
| Close the modal. | ||
|
|
||
| ### Resizing | ||
|
|
||
| When `height` and/or `width` are set to `"auto"`, the modal will attempt to resize whenever the displayed page changes size. This is to make the content of the iframe behave, as much as possible, like they're part of the content flow of the host application. | ||
|
|
||
| - ⚠️ Resizes are detected every 100ms. | ||
| - ⚠️ Height is limited to between 20% and 75% of page height, and width is similarly limited. | ||
| - ⚠️ **If the page sets certain kinds of relative dimensions on its body elements, such as `99vh` or `101vmin`, it can cause slow expansion or contraction of the displayed frame.** Those measurements change as the outer document resizes the inner document, which triggers a loop. Remedy this by using other units to define the outside of your app. | ||
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| --- | ||
| title: Navigation - AEM Content Fragments Console Extensibility | ||
| description: Learn about navigation host API methods that can be used in any extension | ||
| contributors: | ||
| - https://github.com/AdobeDocs/uix | ||
| --- | ||
|
|
||
| # Navigation | ||
|
|
||
| Describes basic methods for navigating within an extension. | ||
|
|
||
| ## API to open Content Fragment from an extension | ||
|
|
||
| <InlineAlert variant="warning" slots="text" /> | ||
|
There was a problem hiding this comment. Please remove reference to feature toggle (see Slack comment) |
||
|
|
||
| The Content Fragment will only open in the headless editor if the `AemFeatures.ACTION_OPEN_NEW_EDITOR` feature is enabled for the AEM instance. | ||
|
|
||
| ```js | ||
| import { useEffect } from "react"; | ||
| import { Text } from "@adobe/react-spectrum" | ||
| import { extensionId } from "./Constants" | ||
| import { register } from "@adobe/uix-guest"; | ||
|
|
||
| function ExtensionRegistration() { | ||
| useEffect(() => { | ||
| const init = async () => { | ||
| const registrationConfig = { | ||
| id: extensionId, | ||
| methods: { | ||
| actionBar: { | ||
| getButtons() { | ||
| return [ | ||
| { | ||
| id: "example.open_in_editor", | ||
| label: "UIX Open In Editor", | ||
| icon: 'Export', | ||
| variant: "primary", | ||
| onClick: (selections) => { | ||
| console.log("UIX Open In Editor has been pressed."); | ||
| console.log(selections[0].id); | ||
| // or any other content fragment path | ||
|
|
||
| guestConnection.host.navigation.openEditor(selections[0].id); | ||
| }, | ||
| }, | ||
| ]; | ||
| }, | ||
| }, | ||
| }, | ||
| }; | ||
| const guestConnection = await register(registrationConfig); | ||
| } | ||
| init().catch(console.error) | ||
| }, []); | ||
| return <Text>IFrame for integration with Host (AEM)...</Text> | ||
| } | ||
|
|
||
| export default ExtensionRegistration; | ||
| ``` | ||
|
|
||
|  | ||
|
|
||
| **API Reference** | ||
|
|
||
| | Field | Type | Required | Default | Description | | ||
| |------------------------|-----------|--------|-----------|-------------------------------------------------------| | ||
| | fragmentPath | `string` | ✔️ | | The path of the CF to be open. | | ||
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Column width: nice to fix, but not critical for PR merge and content delivery
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
At this moment, it seems there is no quick solution to this problem (due to gatsby mdx parser plugin). In the future, we may provide a detailed description of the fields below the table.