diff --git a/gatsby-config.js b/gatsby-config.js index 999a3fa7..f230b5cb 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -19,7 +19,7 @@ module.exports = { path: "/", }, { - title: "Overview", + title: "Getting started", path: "/overview/" }, { @@ -27,7 +27,7 @@ module.exports = { path: "/guides/" }, { - title: "Extensible Services", + title: "Extensible services", menu: [ { title: "AEM Content Fragments Console", @@ -87,6 +87,20 @@ module.exports = { title: "UI Extension Publication and Management", path: "/guides/publication/" }, + { + title: "Experiment with AEM Labs", + path: "/guides/aem-labs/", + pages: [ + { + title: "Getting Started", + path: "/guides/aem-labs/getting-started/" + }, + { + title: "Feature Highlights", + path: "/guides/aem-labs/feature-highlights/" + }, + ] + }, // Services { title: "Extensible Services", diff --git a/src/pages/guides/aem-labs/feature-highlights/1st-party-extension.png b/src/pages/guides/aem-labs/feature-highlights/1st-party-extension.png new file mode 100644 index 00000000..4076ba27 Binary files /dev/null and b/src/pages/guides/aem-labs/feature-highlights/1st-party-extension.png differ diff --git a/src/pages/guides/aem-labs/feature-highlights/byo-extension.png b/src/pages/guides/aem-labs/feature-highlights/byo-extension.png new file mode 100644 index 00000000..8ac52e44 Binary files /dev/null and b/src/pages/guides/aem-labs/feature-highlights/byo-extension.png differ diff --git a/src/pages/guides/aem-labs/feature-highlights/config-action.png b/src/pages/guides/aem-labs/feature-highlights/config-action.png new file mode 100644 index 00000000..9873f71b Binary files /dev/null and b/src/pages/guides/aem-labs/feature-highlights/config-action.png differ diff --git a/src/pages/guides/aem-labs/feature-highlights/configuration.png b/src/pages/guides/aem-labs/feature-highlights/configuration.png new file mode 100644 index 00000000..e87b370f Binary files /dev/null and b/src/pages/guides/aem-labs/feature-highlights/configuration.png differ diff --git a/src/pages/guides/aem-labs/feature-highlights/copy-link.png b/src/pages/guides/aem-labs/feature-highlights/copy-link.png new file mode 100644 index 00000000..d35ee8bf Binary files /dev/null and b/src/pages/guides/aem-labs/feature-highlights/copy-link.png differ diff --git a/src/pages/guides/aem-labs/feature-highlights/index.md b/src/pages/guides/aem-labs/feature-highlights/index.md new file mode 100644 index 00000000..852b9037 --- /dev/null +++ b/src/pages/guides/aem-labs/feature-highlights/index.md @@ -0,0 +1,61 @@ +--- +title: AEM Labs feature highlights +description: Explore the features of AEM Labs +contributors: + - AdobeDocs/uix +--- +# AEM Labs Feature Highlights + +## Navigate Extensions +[AEM Labs](https://experience.adobe.com/aem/extension-manager) provides a centralized listing of extensions, accessible when you select a specific program and environment. This listing gives a comprehensive view of all available extensions for your organization, complete with their statuses, such as `Published` or `Draft`. +![List extensions](list.png) + +## Enabling/Disabling Extensions +[AEM Labs](https://experience.adobe.com/aem/extension-manager) gives the ability to enable or disable extensions on a per-instance basis. This means you can easily turn extensions on or off for specific AEM instances, granting you the flexibility to adapt features as needed. The process is straightforward – just toggle a switch in the extensions view. +![Enable extension](toggle.png) + +## Access Experimental Features +[AEM Labs](https://experience.adobe.com/aem/extension-manager) opens the door for developers to access AEM innovations through 1st-party extensions crafted by Adobe. These extensions bear the distinct label `Developed by Adobe`. +![1st-party extension](1st-party-extension.png) +This means you can confidently explore and experiment with the latest features and enhancements, ensuring you stay at the forefront of AEM's capabilities without compromising the core releases. + +## Configuring Extension Parameters +[AEM Labs](https://experience.adobe.com/aem/extension-manager) simplifies the process of adjusting extension configurations, specifically web parameters, without the need for repetitive extension deployments. Here's how to configure extension parameters: + +1. Click `Gears` icon in the `Action` column + ![Configure the extension](config-action.png) +3. Click `Add variable` button +4. Define the `Key` and corresponding `Value` for your parameter. + ![Configuration screen](configuration.png) +5. With your parameters configured, you can now access these values using the [UIX SDK](https://github.com/adobe/uix-sdk) within your extension. + +This streamlined process allows you to fine-tune your extension settings without the hassle of repeated deployments, putting control and customization in your hands. + +## Extension Preview and Sharing +[AEM Labs](https://experience.adobe.com/aem/extension-manager) provides a safe playground to preview extensions before enabling them for the entire environment and the ability to easily share these previews. + +### Preview Extensions +To preview extensions without installing them, simply click the preview icon found in the `Action` column. This action will open the Content Fragment Console, allowing you to explore the extension within the selected environment. +![Preview extension](preview.png) + +### Share with Teammates +You can easily share these previews with your team by selecting `Copy shareable link` from the `Action` column. +![Copy link](copy-link.png) + +When your teammates open the link, they'll be prompted to choose a program and environment for previewing the selected extension. +![Preview share](preview-share.png) + +This collaborative feature ensures that your team can collectively evaluate and experiment with extensions before making them fully operational. + +## BYO (Bring Your Own) Extensions +With [AEM Labs](https://experience.adobe.com/aem/extension-manager), you can register your extensions into the system and start using them, regardless of where they were initially deployed. Here's how to bring your own extensions into [AEM Labs](https://experience.adobe.com/aem/extension-manager): + +1. Open [AEM Labs home page](https://experience.adobe.com/aem/extension-manager). From there, click on the `Bring Your Own Extension` option. +2. Fill out the required fields, with a particular focus on providing the `Extension URL`. +![BYO extension](byo-extension.png) + +An important note to keep in mind: Your extension can be hosted anywhere, as long as it utilizes the [UIX SDK Guest library](https://github.com/adobe/uix-sdk#usage---guests). + +This flexibility ensures that you can seamlessly incorporate your own extensions into the AEM environment, enhancing your experience with your unique tools and features. + + diff --git a/src/pages/guides/aem-labs/feature-highlights/list.png b/src/pages/guides/aem-labs/feature-highlights/list.png new file mode 100644 index 00000000..0437333d Binary files /dev/null and b/src/pages/guides/aem-labs/feature-highlights/list.png differ diff --git a/src/pages/guides/aem-labs/feature-highlights/preview-share.png b/src/pages/guides/aem-labs/feature-highlights/preview-share.png new file mode 100644 index 00000000..fd6f28c3 Binary files /dev/null and b/src/pages/guides/aem-labs/feature-highlights/preview-share.png differ diff --git a/src/pages/guides/aem-labs/feature-highlights/preview.png b/src/pages/guides/aem-labs/feature-highlights/preview.png new file mode 100644 index 00000000..29d011d7 Binary files /dev/null and b/src/pages/guides/aem-labs/feature-highlights/preview.png differ diff --git a/src/pages/guides/aem-labs/feature-highlights/toggle.png b/src/pages/guides/aem-labs/feature-highlights/toggle.png new file mode 100644 index 00000000..e02bd1bf Binary files /dev/null and b/src/pages/guides/aem-labs/feature-highlights/toggle.png differ diff --git a/src/pages/guides/aem-labs/getting-started/home-page.png b/src/pages/guides/aem-labs/getting-started/home-page.png new file mode 100644 index 00000000..db96554a Binary files /dev/null and b/src/pages/guides/aem-labs/getting-started/home-page.png differ diff --git a/src/pages/guides/aem-labs/getting-started/index.md b/src/pages/guides/aem-labs/getting-started/index.md new file mode 100644 index 00000000..c0a60763 --- /dev/null +++ b/src/pages/guides/aem-labs/getting-started/index.md @@ -0,0 +1,58 @@ +--- +title: Getting started with AEM Labs +description: Instructions on how to access AEM Labs +contributors: + - AdobeDocs/uix +--- +# Getting Started with AEM Labs +This guide will walk you through the initial steps to get started with AEM Labs. You will learn how to access the AEM Labs platform and understand the role-based permissions to ensure a smooth start. + +## Accessing AEM Labs +To access AEM Labs, follow these steps: + +1. **URL**: Open your web browser and navigate to the https://experience.adobe.com/aem/extension-manager + +2. **Login**: Use your organization's login credentials to sign in. If you do not have login credentials, contact your system administrator to obtain the necessary access. + +3. **Home Page**: After successfully logging in, you will be directed to the AEM Labs home page. Here, you'll find some useful information and extension statistics for your organization. +![Home Page](home-page.png) + +## Role-Based Permissions +AEM Labs utilizes role-based permissions to control access to various features and functionalities. Here are the defined roles and their associated permissions: + +- **Customer**: An enterprise customer who discovers AEM extensions. + +- **Developer**: A user in a customer organization who develops and tests AEM extensions. + +- **System Administrator**: An enterprise admin who manages the enterprise org and can install extensions on production environments. + +## Permissions Matrix +### Production Environments + +| Action | Customer | Developer | System Administrator| +|---|---|---|---| +| Can see the list of available extensions | ✅ | ✅ | ✅ | +| Can enable/disable extensions | ❌ | ❌ | ✅ | +| Can configure extensions | ❌ | ❌ | ✅ | +| Can preview extensions | ✅ | ✅ | ✅ | +| Can add BYO extensions | ❌ | ✅ | ✅ | + +### Non-production Environments +By non-production we mean `dev`, `stage` and `rde` environments. + +| Action | Customer | Developer | System Administrator| +|---|---|---|---| +| Can see the list of available extensions | ✅ | ✅ | ✅ | +| Can enable/disable extensions | ❌ | ✅ | ✅ | +| Can configure extensions | ❌ | ✅ | ✅ | +| Can preview extensions | ✅ | ✅ | ✅ | +| Can add BYO extensions | ❌ | ✅ | ✅ | + +## Extensions Listing +Once you're on the [AEM Labs](https://experience.adobe.com/aem/extension-manager) home page, you can explore the list of AEM programs and environments available for your organization. Go ahead and select a program and an environment to display the available extensions. + +For a deep dive inot AEM Labs' capabilities, head to the [Feature Highlights](feature-highlights) section. + +## Contact and Support + +If you encounter issues, need assistance, or want to provide feedback, please use `Beta Feedback` button, located in the top bar on the [AEM Labs' home page](https://experience.adobe.com/aem/extension-manager) or email us at uix@adobe.com. diff --git a/src/pages/guides/aem-labs/index.md b/src/pages/guides/aem-labs/index.md new file mode 100644 index 00000000..315b89ae --- /dev/null +++ b/src/pages/guides/aem-labs/index.md @@ -0,0 +1,20 @@ +--- +title: Explore AEM Labs +description: Explore, enable and configure UI Extensions +contributors: + - AdobeDocs/uix +--- +# Welcome to AEM Labs +AEM Labs is a playground, designed for developers seeking creative freedom within AEM. Within AEM Labs, you have the can to enable or disable extensions on a per-instance basis, access Adobe's first-party extensions, and much more. + + + +[Getting Started](getting-started) + +Instructions on how to access AEM Labs + + + +[Feature Highlights](feature-highlights) + +Explore the features of AEM Labs diff --git a/src/pages/guides/index.md b/src/pages/guides/index.md index 9267f6ab..d269e0eb 100644 --- a/src/pages/guides/index.md +++ b/src/pages/guides/index.md @@ -44,3 +44,9 @@ Learn how to implement, test and deploy your own UI Extensions with Adobe App Bu [UI Extension Publication and Management](publication) Know how to bring your extension to users and manage it + + + +[Experiment with AEM Labs](aem-labs) + +Explore, enable and configure UI Extensions diff --git a/src/pages/index.md b/src/pages/index.md index c7c183be..52958ed1 100644 --- a/src/pages/index.md +++ b/src/pages/index.md @@ -9,37 +9,37 @@ contributors: # UI Extensibility -UI Extensibility allows 3rd party developers to customize and add their own logic to Adobe Experience Cloud services. +UI Extensibility allows 3rd-party developers to customize and add their own logic to Adobe Experience Cloud services. ## Break the Ice -UI extensions are JavaScript applications built with [Adobe App Builder](https://developer.adobe.com/app-builder/docs/overview/) that may be embedded in UI Applications running under [Adobe Experience Cloud](https://experience.adobe.com/) unified shell. Adobe UI Services and UI Extensions implement a two-way communication protocol that allows to exchange of data, invoking actions, and rendering additional visual blocks. +UI extensions are JavaScript applications built with [Adobe App Builder](https://developer.adobe.com/app-builder/docs/overview/) that can be embedded in UI Applications running under [Adobe Experience Cloud](https://experience.adobe.com/) unified shell. Adobe UI Services and UI Extensions implement a two-way communication protocol that enables the exchange of data, the invocation of actions, and the rendering of additional visual blocks. -## Get to Know +## Getting started -[Why I Need It](overview/reason) +[What are UI Extensions?](overview/app-builder) -Know why UI Extensibility may be a good solution for you +Learn how UI Extensibility and App Builder are related to each other -[How It Works](overview/design) +[What UI extensions can do?](overview/reason) -Explore how UI Extensibility works +Know why UI Extensibility may be a good solution for you -[How to Get Access](guides/get-access) +[How it works?](overview/design) -Discover what is needed to use UI Extensibility +Explore how UI Extensibility works -[App Builder and UI Extensibility](overview/app-builder) +[How to get access?](guides/get-access) -Learn how UI Extensibility and App Builder are related to each other +Discover what is needed to use UI Extensibility @@ -47,43 +47,55 @@ Learn how UI Extensibility and App Builder are related to each other Find answers to most frequent questions about UI Extensibility -## Discover +## Guides -### Learn How to Create UI Extensions +### Learn how to create UI extensions -[UI Extensions Development Flow Overview](guides/development-flow/) +[Create a new UI extension](guides/development-flow/) -Know what to expect when create UI Extension. +Know what to expect when create UI Extension -[AEM Content Fragments Console Extensions Development Guide](services/aem-cf-console-admin/) +[AEM Content Fragments console extension development guide](services/aem-cf-console-admin/) -Get started with the development of extensions for AEM Content Fragments Console. +Get started with the development of extensions for AEM Content Fragments console -[AEM Content Fragments Console Developer Videos and Samples](https://experienceleague.adobe.com/docs/experience-manager-learn/cloud-service/developing/extensibility/content-fragments/overview.html) +[AEM Content Fragments editor extension development guide](services/aem-cf-editor/) -View helpful videos and step by step instructions on building extensions for AEM Content Fragments Console. +Get started with the development of extensions for AEM Content Fragments editor -### Explore What to Extend +### Explore extensible services -[AEM Content Fragments Console Extension Points](services/aem-cf-console-admin/api/) +[AEM Content Fragments console extension points](services/aem-cf-console-admin/api/) -Learn extensibility possibilities in AEM Content Fragments Console. +Learn extensibility options in AEM Content Fragments console + + + +[AEM Content Fragments editor extension points](services/aem-cf-editor/api/) + +Learn extensibility options in AEM Content Fragments editor ### Publish -[UI Extensions Management Guide](guides/publication/) +[UI extensions publication guide](guides/publication/) + +Know how to deploy and publish UI Extensions for your organization + +### Experiment + +[AEM Labs guide](guides/aem-labs/) -Know how to deploy and publish UI Extensions for your organization. +Navigate your UI Extensions and create a unique setup for your AEM instance ## Collaborate