Learn how to use an Adobe Experience Manager (AEM) Maven project as a starting point for an Angular application integrated with the AEM SPA Editor. Learn how AEM can go beyond a pure headless use case, with options for in-context authoring and experience management. 5 with multi-site management. Ensure only the components which we’ve provided SPA implementations for are allowed:In this video, we discuss three approaches for using AEM and Target, and help you understand what works best for your organization. Step 5: wait for this complete. Integrate AEM Author service with Adobe Target. You should see something like this: Hi All, I have created project using archetype 23 for frontEndModule as react. Level 4. 7. See the document SPA Editor Overview for an summary of this communication model. Experience Fragments are not yet supported(6. 5 can make it possible. Option 3: Leverage the object hierarchy by customizing and extending the container component. Congratulations, you have just created your first AEM SPA Editor Project! The SPA is quite simple. Learn how to map React components to Adobe Experience Manager (AEM) components with the AEM SPA Editor JS SDK. Experience Fragment is enabled in SPA editor. What’s new in Experience Manager 6. View the source code on GitHub. For publishing from AEM Sites using Edge Delivery Services, click here. Understand the SPA model routing options available when using the SPA Editor. 5 new features: Searching, browsing, and editing content from a single space and designing campaigns using media from Adobe collections; View basic characteristics about files directly through Photoshop, InDesign, Illustrator, and the ability to find similar media using Adobe Sensei; Learn how to use an Adobe Experience Manager (AEM) Maven project as a starting point for an Angular application integrated with the AEM SPA Editor. content subprojectCustom buttons can be added to the RTE toolbar in the Content Fragment Editor using the rte extension point. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Use AEM React Core Components to implement a dynamic navigation that is driven by the AEM page hierarchy. 5 the GraphiQL IDE tool must be manually installed. The. You will also learn how to use out of the box AEM React Core. Build React Application with AEM SPA Editor. Feel comfortable using AEM to design your own components from scratch. The SPA Editor offers a comprehensive solution for supporting SPAs within AEM. Tap Home and select Edit from the top action bar. Page property to be available in the edit view (for example, View / Edit) Properties option): Name: cq:hideOnEdit. Sling Models are annotation driven Java™ “POJOs” (Plain Old Java™ Objects) that facilitate the mapping of data from the JCR to Java™ variables. Learn how to create a SPA using the React JS framework with AEM's SPA Editor. This Next. language: en: Language code (ISO 639-1) to create the content structure from (e. What you will buildWhen using the AEM React Editable Components with a SPA Editor-based React app, the AEM ModelManager SDK, as the SDK: Retrieves content from AEM. Adobe Experience Manager as a Cloud Service’s Cross-Origin Resource Sharing (CORS) facilitates non-AEM web properties to make browser-based client-side calls to AEM’s GraphQL APIs, and other AEM Headless resources. You can also extend, this Content Fragment core component. First, explore adding an editable “fixed component” to the SPA. We are planning to migrate our AEM site to SPA/SPA Editor/React. HI cqsapientu69896437 Did you find a solution for your question? JaideepBrar : is there any document to refer for using XF in SPA. The Angular app is developed and designed to be. Browse the following tutorials based on the technology used. For more complicated cases,. Not only that, but the latest version was tweaked from. Stop the webpack dev server. With the Bulk Editor, you can add, modify, delete, filter, and export the rows, save modifications, and import a set of rows. The component uses the fragmentPath property to reference the actual. Learn how the latest innovations in Adobe Experience Manager 6. js application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries. The completed SPA, deployed to AEM, can be dynamically authored with traditional in. To create a UI module renderer, create a Class object that contains the logic that renders the UI module. Understanding how to add properties and content to an existing component is a powerful technique to expand the capabilities of an AEM SPA Editor implementation. The following AEM features are not yet supported by the SPA Editor: Target mode; ContextHub; Inline image editing; Edit configs (eg. en, deu). Understand the structure of a new AEM SPA Editor project built from a Maven archetype. Learn how to create a SPA using the React JS framework with AEM’s SPA Editor. This is a critical configuration when using SPA Editor, since only AEM Components that have mapped SPA component counterparts are render-able by the SPA. Since the SPA renders the component, no HTL script is needed. Custom Exporter API - You can expose a custom JSON API for the page component and expose the data on it. react”) in my case and run the following command from CMD (start your CMD in admin mode). g. This is a critical configuration when using SPA Editor, since only AEM Components that have mapped SPA component counterparts are render-able by the SPA. 5. (FYI, the Co. Internationalize your components and dialogs so that their UI strings can be presented in different languages. New Single Page Application (SPA) Editor. Availability: Cloud Service, 6. Prior to the release of Adobe Experience Manager 6. 4 SP2. It is fully supported by Adobe, and it continues to be enhanced and expanded. 5 2. Wrap the React app with an initialized ModelManager, and render the React app. SPA Introduction and Walkthrough. This user guide contains videos and tutorials helping you maximize your value from AEM. Please join us to learn more about the SPA Editor in this. I'm migrating a fully functional Angular SPA into AEM 6. phychem_ad. Ensure an instance of AEM is running locally on port 4502. AEM container components use policies to dictate their allowed components. AEM React Editable Components work with both SPA Editor or Remote SPA React apps. html or cf# from the page URL) 4. Last update: 2023-09-26. In the context of the SPA Editor, Sling Models expose a component’s content through the JSON model through a feature using the Sling Model Exporter. In AEM 6. Hybrid and SPA with AEM; Enabling JSON Export for a Component; SPA Introduction and Walkthrough; SPA WKND Tutorial; Getting Started using React; Getting Started using Angular; SPA Deep Dives; Developing SPAs for AEM; SPA Editor Overview; SPA Blueprint; SPA Page Component; Dynamic Model to Component Mapping; Model. It allows front-end developers to develop such SPA like they are used to, while having non-technical authors to edit the content in-place. 8+ and set up the environment variable. These are a set of re-usable UI. In the IDE, open the ui. The tutorial covers the. Learn how to create a SPA using the React JS framework with AEM's SPA Editor. AEM Headless SPA deployments. Install Java 1. This version of AEM supports the following capabilities. zip. In the IDE, open the ui. The React app should contain one instance of the <Page. AEM React Editable Components work with both SPA Editor or Remote SPA React apps. 5 (on-premise) and have a couple of questions: 1) Do we get any improvements with regards to SPA/SPA Editor/React eco system by upgrading to AEM 6. Created for: Beginner. 5, to fit into multiple layouts, you needed multiple sizes of each image in your design to suit each target screen size. This multi-part tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. A “Hello World” Text component displays, as this was automatically added when generating the project from the AEM Project archetype. I'm not able to - 322742The AEM SPA Editor leverages AEM Content Services to deliver the entire content of the page as a JSON model. Learn how to create a SPA using the React JS framework with AEM's SPA Editor. 3. AEM provides the Content Fragment core component - a component that lets you include content fragments on your pages. Locate the Layout Container editable area beneath the Title. The changes made to the Header are currently only visible through the webpack dev server. The PredicateEvaluator is part of the cq-search artifact so it must be added to your Maven pom. To resolve this issue, make a static resource hosted by the Remote SPA use absolute paths that include the Remote SPA’s origin. To resolve this issue, make a static resource hosted by the Remote SPA use absolute paths that include the Remote SPA’s origin. By implementing specific interfaces, Sling Models provide the information necessary to the SPA. Deploy SPA updates to AEM. These are a set of re-usable UI components that map to. Custom Exporter API - You can expose a custom JSON API for the page component and expose the data on it. For example: AEM is accessed via: SPA is accessed via Since AEM and the SPA are accessed from different domains, web browsers enforce security policies such as cross. Check my youtube video: - 322742With AEM 6. 5, below 2 new features is available 1) Use Template Editor to edit and configure the AEM editable parts of the SPA 2) Use Multi-site Management to create country, franchise or white-labeled SPA experiences@macman2013 Did some more digging, and we'll have to push off updating the SPA Tutorial to use v2 for a couple reasons:. zip. Deep-dive into key innovations such as Single-Page Application (SPA) Editor, Content & Experience fragments, In-context editing, and many more. $ mvn clean install -PautoInstallSinglePackage Hi All, I have created project using archetype 23 for frontEndModule as react. Build React Application with AEM SPA Editor. The SPA is implemented using: Maven AEM Project Archetype. 8+. If you refer to We Retail Journal example, the related client lib config is defined in the file - 322742Learn how to quickly create an AEM site using a site template. BaseModuleRenderer class and then registering it with ContextHub. You would need to migrate the HTL script(s) and create. Locate the Layout Container editable area beneath the Title. Navigate to the Software Distribution Portal > AEM as a Cloud Service. 5 as part of Adobe Summit 2019( April 2019). AEM’s SPA Editor provides authors the ability to edit content for a Single Page Application or SPA. In the previous two chapters, we mapped editable component content from the SPA’s Home view to corresponding Remote SPA root page in AEM at /content/wknd-app/us/en/. Components that are designed for internationalization enable UI strings to be externalized, translated, then imported to the repository. Also included are AEM WCM Components - React Core implementation and AEM WCM Components - Spa editor - React Core implementation. Headless CMS - only JSON API delivery. Let’s get into the details. 5. Build websites faster with AEM Headless and App Builder; Adobe Experience Manager as a Cloud Service: 2021 review and 2022 outlook; 2020. This multi-part tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. Option 1: Centralize the logic and broadcast to the necessary components for example, by using a util class as a pure object-oriented solution. 3-SNAPSHOT. The AEM SPA Editor SDK was introduced with AEM 6. Stop the webpack dev server. Read Full Blog The tutorial is designed to work with AEM as a Cloud Service and is backwards compatible with AEM 6. Step 5: wait for this complete. The above modules make up the AEM SPA Editor JS SDK and provide the functionality to make it possible to map SPA Components to AEM Components. Developers want to be able to build sites using SPA frameworks and authors want to seamlessly edit content within AEM for a site built using such frameworks. Deploy the starter project to a local instance of AEM. The AEM Headless Client for JavaScript is used to execute the GraphQL persisted queries that power the app. Map SPA components to AEM components | Getting Started with the AEM SPA Editor and React | Adobe Experience Manager Overview 1 - Defining Content. 12. Above the Strings and Translations table, click Add. They must be explicitily allowed (enabled). (SPA) Editor, Content & Experience fragments, In-context editing, and many more. In Edit mode, add the Card component to the Layout Container: Drag and drop an image from the Asset finder onto the Card component: Open the Card component dialog and notice the addition of a Text Tab. Build a React JS app using GraphQL in a pure headless scenario. Navigate to the root of the project /aem-guides-wknd-spa and deploy the project to AEM using Maven: $ cd . $ mvn clean install . ; Type: cq:RolloutConfig; Add the following properties to this node: Name: jcr:title Type: String Value: An identiying title that will appear in the UI. Navigate to the root of the project /aem-guides-wknd-spa and deploy the project to AEM using Maven: $ cd . 6. This multi-part tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. 3. The multi-line text field is a data type of Content Fragments that enables authors to create rich text content. 5 can make it possible. Congratulations, you have just created your first AEM SPA Editor Project! The SPA is quite simple. Single page applications (SPAs) can offer compelling experiences for website users. In this video, we discuss three approaches for using AEM and Target, and help you understand what works best for your organization. This tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. For example: AEM is accessed via: SPA is accessed via Since AEM and the SPA are accessed from different domains, web browsers enforce security policies such as cross. Editable sections for authors to insert components in-context. AEM Headless App Templates. 5 (SP4) first ? Or is it more dependent on the GitHub p. Learn how AEM can go beyond a pure headless use case, with options for in-context authoring and experience management. Integrate a SPA - Learn how the SPA source code is integrated with the AEM Project and understand tools available to rapidly develop the SPA. Created for: Developer. The mapping can be done with Sling Mapping defined in /etc/map. 5 General Availability was announced April 9th, 2 weeks after Summit, continuing its momentum from last year of an early release. Author in-context a portion of a remotely hosted React application. AEM provides AEM React Editable Components v2, an Node. Every part of the Bulk Editor (or components derived from the Bulk Editor) can be configured. Due to the availability of the Editable templates we can have runtime CSS ataached. Populates the React Edible components with AEM’s content. This document will guide you through these steps. The completed SPA, deployed to AEM, can be dynamically authored with traditional in-line editing tools of AEM. Developers want to be able to build sites using SPA frameworks and authors want to seamlessly edit content within AEM for a site built using such frameworks. Include the Universal Editor core library. 5 which can be used for XF where SPA app consumes JSON which is provided by. 4. Adventures are retrieved from AEM as content fragments using AEM Headless GraphQL API. For the SPA-editor you will not be able to re-use traditional AEM components as-is. Bulk editing of page properties lets you edit the properties of multiple pages at once. For AEM to load the Remote SPA in the SPA Editor, mappings between the SPA’s routes and the AEM Pages used to open and author content must be established. In AEM 6. Developers using the framework of their choice (React or Ang. That being said, there is an approach mentioned for AEM 6. Locate the Layout Container editable area right above the Itinerary. Developer. Learn how to use an Adobe Experience Manager (AEM) Maven project as a starting point for an Angular application integrated with the AEM SPA Editor. This tutorial walks through the implementation of a Angular application for a fictitious lifestyle brand, the WKND. 5 instance somehow authoring UI of SPA pages appears to be broken: I cannot change edit mode while on a page and Content Finder. The. AEM container components use policies to dictate their allowed components. js with a fixed, but editable Title component. Users can complete the tutorial using React or Angular frameworks. 5 feature has made it easy for developers to build websites easily by using the SPA Framework. Experience Manager tutorials. Open a new command line and check if the installation was performed properly by running this command: java -version. Create your first React Single Page Application (SPA) that is editable in Adobe Experience Manager AEM with the WKND SPA. Adobe Experience Manager (AEM) is the leading experience management platform. AEM 6. Experience LeagueStep 4: Move inside the SPA project folder (“aem-guides-wknd-spa. The SPA Editor offers a comprehensive solution for supporting SPAs within AEM. Next. Click on “Create Activity” button and select “Experience Targeting”. This tutorial. Learn how to bootstrap a remote SPA for AEM SPA Editor compatibility. An AEM project is required to setup-supporting configuration and content requirements to allow AEM SPA Editor to author a Remote SPA. The SPA Editor offers a comprehensive solution for. 3. x. Integrate AEM Author service with Adobe Target. Enter the following values on the Text tab: Card Path - choose a page beneath the SPA homepage. The Angular app is developed and designed to be deployed with AEM’s SPA Editor, which maps Angular components to AEM components. Content populating the editable React components, must be exposed via AEM pages that extend the SPA Page component . Type: Boolean. to gain points, level up, and earn exciting badges like the newThe above modules make up the AEM SPA Editor JS SDK and provide the functionality to make it possible to map SPA Components to AEM Components. Type: Boolean. Developer. To resolve this issue, make a static resource hosted by the Remote SPA use absolute paths that include the Remote SPA’s origin. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. When I install our project's bundles which use uber-jar 6. npm module; Github project; Adobe documentation; For more details and code. Gain valuable insights by. Image. Page content is retrieved from AEM as page model using Sling JSON Exporter and can be edited in AEM Remote SPA Editor. Select Edit from the mode-selector. Learn about AEM Gems, a series of technical deep dives delivered by Adobe Experience Manager experts. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Ensure you adjust them to align to the requirements of your project. Adobe Experience Manager as a Cloud Service’s Cross-Origin Resource Sharing (CORS) facilitates non-AEM web properties to make browser-based client-side calls to AEM’s GraphQL APIs, and other AEM Headless resources. 0. Content populating the editable React components, must be exposed via AEM pages that extend the SPA Page component . 5 ready for the world - translation integration & best practices; 2019. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. After reading this document, you should: Understand the basic function of the SPA Editor. In the context of the SPA Editor, Sling Models expose a component’s content through the JSON model through a feature using the Sling Model Exporter. react. SPA Editor Overview. 5 Sites - Support for react and Angular - SPA Editor-> A better experiences built with SPA Javascript frameworks - SPA Editor for in-context editing, composition, configuration and layout the experiences. ) to render content from AEM Headless. Create your first Angular Single Page Application (SPA) that is editable in Adobe Experience Manager, AEM with the WKND SPA. This chapter walks through the creation of an AEM project that contains necessary configurations: AEM WCM Core Components proxies; AEM Remote SPA Page proxy;. Locate the Layout Container editable area right above the Itinerary. With its new version, Adobe Experience Manager brings together a host of new features and enhancements. These configurations are managed and deployed via an. Learn how the latest innovations in Adobe Experience Manager 6. This page gives an overview of how SPA support is structured in AEM, how the SPA Editor works, and how the SPA framework and AEM keep in synch. Deploy the updated SPA to AEM to see the changes. 5. PWAs allow a seamless experience even if the network is lost or unstable. With a traditional AEM component, an HTL script is typically required. In the Activity URL provide the URL pointing to the We. This tutorial explains. Learn how to create a SPA using the React JS framework with AEM's SPA Editor. Add the necessary OSGi configuration. From the AEM Start screen, navigate to Tools > General > GraphQL. 5. AEM GraphQL API with Content Fragments - Sample Content and Queries; Hybrid and SPA AEM Development. Not only that, but the latest version was tweaked from. This chapter walks through the creation of an AEM project that contains necessary configurations: AEM WCM Core Components proxies; AEM Remote SPA Page proxy;. This is a critical configuration when using SPA Editor, since only AEM Components that have mapped SPA component counterparts are render-able by the SPA. In the next few chapters more functionality is added. js) Remote SPAs with editable AEM content using AEM SPA Editor. Next. AEM Headless single-page app (SPA) deployments involve JavaScript-based applications built using frameworks such as React or Vue, that consume and interact with content in AEM in a headless manner. Create your first React SPA in AEM by Adobe Abstract Welcome to a multi-part tutorial designed for developers new to the SPA Editor feature in Adobe Experience Manager (AEM). I am using SPA Editor of AEM 6. . 8+ and set up the environment variable. The importance of this configuration is explored later. A project template for AEM-based applications. This is a critical configuration when using SPA Editor, since only AEM Components that have mapped SPA component counterparts are render-able by the SPA. Objective. Understanding how to add properties and content to an existing component is a powerful technique to expand the capabilities of an AEM SPA Editor implementation. See the NPM package @adobe/aem-spa-page-model-manager. I am using SPA Editor of AEM 6. Learn how to bootstrap a remote SPA for AEM SPA Editor compatibility. This multi-part tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. 5 the GraphiQL IDE tool must be manually installed. $ cd aem-guides-wknd-spa. Two artifacts are available for backwards compatibility: AEM as a Cloud Service - use wknd-spa-react. x. Experience Fragments are not yet supported(6. 5. Select Edit from the mode-selector in the top right of the Page Editor. Edit the component and enter the text: Page 1 using the RTE and the H2 element. This is your 24 hour, developer access token to the AEM as a Cloud Service environment. Single page applications (SPAs) can offer compelling experiences for website users. SPA (Single Page Application) Editor By using AEM SPA (Single Page Application) Editor, developers can easily build web sites using SPA Framework and authors can seamlessly edit content within AEM. 2. Include the Universal Editor core library. For an overview of how a simple SPA in AEM is structured and how it works, see the getting started guide for both React and Angular. Enter the following values on the Text tab: Card Path - choose a page beneath the SPA homepage. all. 0Adobe Experience Manager 6. json (Root page Model JSON) is initiated from React code - index. all-1. AEM GraphQL API with Content Fragments - Sample Content and Queries; Hybrid and SPA AEM Development. This tutorial walks through the implementation of a Angular application for a fictitious lifestyle brand, the WKND. Adobe Experience Manager (AEM) is a robust solution for content management, spreading from text and encompassing media too. The latest version of AEM is Adobe Experience Manager 6. react. The goal for this multi-part tutorial is to teach a developer how to implement an Angular application to work with the SPA Editor feature of AEM. 4. ). With a traditional AEM component, an HTL script is typically required. SPA Editor Project. Ensure only the components which we’ve provided SPA implementations for are allowed:Adobe Experience Manager 6. Learn to use the delegation patter for extending Sling Models and features of Sling Resource. The completed SPA, deployed to AEM, can be dynamically authored with traditional in-line editing. The SPA Editor offers a comprehensive solution for supporting SPAs. CTA Text - “Read More”. Download Java 1. SPA Editors are more powerful in AEM 6. js + Headless GraphQL API + Remote SPA Editor; Next. Experience LeagueLearn how to bootstrap a remote SPA for AEM SPA Editor compatibility. The mapping can be done with Sling Mapping defined in /etc/map. Next Steps. AEM container components use policies to dictate their allowed components. 0 (either apis or apis-with-deprecations type) to a clean AEM 6. The mapping can be done with Sling Mapping defined in /etc/map. For example: AEM is accessed via: SPA is accessed via Since AEM and the SPA are accessed from different domains, web browsers enforce security policies such as cross-origin resource sharing. 1. In a real-world scenario the development activities are. 0+ 8, 11:Create your first React Single Page Application (SPA) that is editable in Adobe Experience Manager AEM with the WKND SPA. 5 can we build a website with React, Core and custom components and ability to add them to a SPA Editor? surenk. Hybrid CMS - both JSON API and Page delivery. Deploy the starter project to a local instance of AEM. When your website. This is done using the appropriate node properties: Page property to be available in the create view (for example, Create Page wizard): Name: cq:showOnCreate. Configure AEM for SPA Editor. The React a. Developers want to be able to build sites using SPA frameworks and authors want to seamlessly edit content within AEM for a site built using such frameworks. Add Adobe Target to your AEM web site. 0. 5 following are the changes that I observed as part of SPA Editor. Page property to be available in the edit view (for example, View / Edit) Properties option): Name: cq:hideOnEdit. So problem i am facing is how do i configure the components added in the XF. These are sample apps and templates based on various frontend frameworks (e. 5. The AEM Brackets Extension provides a smooth workflow to edit AEM components and client libraries. . The following configurations are examples. For a step-by-step guide to. 0 includes new features, key customer-requested enhancements, and performance, stability, and security improvements, that are released since the initial availability of 6. The AEM Headless quick setup gets you hands-on with AEM Headless using content from the WKND Site sample project, and a sample React App (a SPA) that consumes the content over AEM Headless GraphQL APIs. In the context of the SPA Editor, Sling Models expose a component’s content through the JSON model through a feature using the Sling Model Exporter. listeners)The SPA Editor brings the easy-to-use capabilities of the AEM Page Editor back to SPA built with JavaScript frameworks like React or Angular. Select Edit from the mode-selector in the top right of the Page Editor. This is the same framework used to translate other AEM content, such as Pages, Experience Fragments, Assets, and Forms. For publishing from AEM Sites using Edge Delivery Services, click here. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. . But Adobe has now introduced a SPA editor with AEM 6. Tap the checkbox next to My Project Endpoint and tap Publish. Bootstrap the SPA. Angular. 8+ - use wknd-spa-react. Single-Page Application Editor AEM 6. I am using SPA Editor of AEM 6. Experience LeagueStep 4: Move inside the SPA project folder (“aem-guides-wknd-spa. The mapping can be done with Sling Mapping defined in /etc/map. 0). The above modules make up the AEM SPA Editor JS SDK and provide the functionality to make it possible to map SPA Components to AEM Components. Adobe Experience Manager Sites & More. Experience Manager 6. This page gives an overview of how SPA support is structured in AEM, how the. This tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. Understanding how to add properties and content to an existing component is a powerful technique to expand the capabilities of an AEM SPA Editor implementation. H2 2021 SPA Editor 2. Image. You will also learn how to use out of the box AEM React Core. Using the SPA Editor with AEM Sites by Adobe Docs Abstract Video overview of authoring content for a Single Page Application in AEM Sites. What you will buildAEM Sites as a Cloud Service, AEM Sites 6. We have AEM project which was created with AEM architype 22 for AEM - React SPA. 5 is most definitely the SPA support. Hi ivana , can you please elaborate this - 'add the required client library' ? - 322742Deep dive with us into the development of Single-Page-Applications that can be authored using the AEM Page Editor. About. The tutorial is designed to work with AEM as a Cloud Service and is backwards compatible with AEM 6. UI.