Browse the following tutorials based on the technology used. Accordion (V1) Carousel (V1) Container (V1) Tabs. The delivery of the JSON data is delegated downward to each component (from page, to paragraph, to component, and so on). Provides hybrid support out-of-the-box. The importance of this configuration is explored later. Create your first React Single Page Application (SPA) that is editable in Adobe Experience Manager AEM with the WKND SPA. Select the desired Stock Configuration from the dropdown list and click Accept to activate the configuration. Also included are AEM WCM Components - React Core implementation and AEM WCM Components - Spa editor - React Core implementation. Next, replace the Button Id metric in your workspace that displays the ID of a Call to Action (CTA) button with the classification. Hosted by Adobe engineers, this series can serve as a great guide to gain a deeper understanding of the AEM SPA Editor SDK at a low level. Deploy the starter project to a local instance of AEM. 4’s SPA Editor and the Content Services framework are great tools to deliver the power of AEM’s content management capabilities through a SPA-driven solution. Please join us to learn more about the SPA Editor in this. Learn how multiple views in the SPA are supported using AEM Pages and the SPA Editor SDK. Navigate to the root of the project /aem-guides-wknd-spa and deploy the project to AEM using Maven: $ cd . Learn to use modern front-end tools, like a webpack dev server, to rapidly develop the SPA against the AEM JSON model API. The delivery of the JSON data is delegated downward to each component (from page, to paragraph, to component, and so on). An Experience Fragment is a grouped set of components that when combined creates an experience. A classic Hello World message. I can see bannerText prop in CRXD, but it is missing from the JSON model and never arrives to. sdk. With AEM’s SPA Editor, creating rich experiences does not mean you have to forgo the drag and drop, seamless WYSIWYG offering we’ve grown to know and love for the. Understand how the source code for a Single Page Application (SPA) written in React can be integrated with an Adobe Experience Manager (AEM) Project. js + Headless GraphQL API + Remote SPA Editor; Next. I am trying to setup an SPA in AEM using Angular with PWA features supported. Certification. Next. 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. Last update: 2023-10-02. With a traditional AEM component, an HTL script is typically required. Gem Sessions. 5. Browse content. Deploy the starter project to a local instance of AEM. Experience League. Learn how multiple views in the SPA are supported using AEM Pages and the SPA Editor SDK. Walks through the implementation of a Single Page Application, written using React JS, that can be edited within Adobe Experience Manager. Content populating the editable React components, must be exposed via AEM pages that extend the SPA Page component . In order to use the SPA Editor you must be using Sling Models that can export JSON. See the document SPA Editor Overview for an summary of this communication model. This chapter walks through the creation of an AEM project that contains necessary configurations: AEM WCM Core Components proxies; AEM Remote SPA Page proxy;. See LICENSE for more information. If ineffective combinations are exposed,. Single page applications (SPAs) can offer compelling experiences for website users. . Introduction. Know the requirements for building a fully editable SPA for AEM. SPA Editor Overview; Getting Started with the AEM SPA Editor and Angular; Getting Started with the AEM SPA Editor and ReactBy using AEM SPA (Single Page Application) Editor, developers can easily build web sites using SPA Framework and authors can seamlessly edit content within AEM. Adobe Experience Manager, the leading solution for content management, features a decoupled, modular architecture and provides extensible capabilities that empower marketers to build fantastic experiences for any channel. Last update: 2023-11-17. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. The SPA Editor offers a comprehensive solution for supporting SPAs within AEM. Learn how to generate an Adobe Experience Manager (AEM) Maven project as a starting point for a React application integrated with the AEM SPA Editor. Congratulations, you have just created your first AEM SPA Editor Project! The SPA is quite simple. Dynamic Model to Component Mapping for SPAs explains the dynamic model to component mapping and how it works within SPAs in AEM. And was successfully able to launch WKND site within AEM SPA Editor. The changes made to the Header are currently only visible through the webpack dev server. This project provides the Angular components to get you started with integrating with the AEM Site Editor. This multi-part tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. The implementation of this component illustrates the steps needed to create a net-new AEM component that is compatible with the AEM SPA Editor. In the next few chapters more functionality is added. This allows developers to place SPA Editor-compatible components into the SPA views, and allow users to author the components’ content in AEM SPA Editor. Courses Recommended courses Tutorials Certification Events Instructor-led training Browse content library View all learning options. This article presents an example of how to adapt a simple, existing React component to work with the AEM SPA Editor. This article gives a comprehensive overview of the SPA Editor and how it works included detailed workflows of interaction of the SPA Editor within AEM. Once an SPA is loaded into the SPA Editor, the JavaScript components of the SPA are mapped to Experience Manager editing dialogs, enabling content authors to make changes to the SPA using the editor. js application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries. Understand how the source code for a Single Page Application (SPA) written in Angular can be integrated with an Adobe Experience Manager (AEM) Project. Learn how to create a SPA using the React JS framework with AEM's SPA Editor. As Single-Page Application (SPA) make the overall visitor experience more interactive, they are gaining popularity, even for content-centric experiences. Too much customization would be required to use AEM in a hybrid approach. Courses. Any documentation for in-context editable content? A. AEM’s SPA Editor provides authors the ability to edit content for a Single Page Application or SPA. SPA Editor Overview goes into more depth into the communication model between AEM and the SPA. Adobe Experience Manager Sites & More. Learn how to extend the JSON Model for an existing Core Component to be used with the AEM SPA 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. Select Adobe Experience Manager as a Cloud Service and assign one or both of the new profiles to the user. In this chapter, a new AEM project is deployed, based on the AEM Project Archetype. You can then use GraphQL with the SPA Editor. Together, a SPA hosted on a different domain can be made editable in AEM. By implementing specific interfaces, Sling Models provide the information necessary to the SPA. This tutorial builds upon the WKND GraphQL App , a React app that consumes AEM Content Fragment content over AEM’s GraphQL APIs, however does not provide any in. SPA - single page application an alternative to a multi-page website. The. Book a Treatment. AEM 6. A classic Hello World message. WKND SPA Project is a step-by step tutorial implementing a simple SPA project in AEM. This project was generated with Angular CLI version 6. 0 it’s possible to only deliver content to specific. You can run the demo in a few minutes. They allow you to prepare content ready for use in multiple locations/over multiple channels, ideal for headless delivery. Objective. On the Adobe Experience Manager product page, it is described as: “Edit and manage single-page applications. Earlier I raised a question on Hello World Tutorial @Getting Started - 315808A simple weather component is built. 0. Sling Models are annotation driven Java™ “POJOs” (Plain Old Java™ Objects) that facilitate the mapping of data from the JCR to Java™ variables. The delivery of the JSON data is delegated downward to each component (from page, to paragraph, to component, etc. Create your first React Single Page Application (SPA) that is editable in Adobe Experience Manager AEM with the WKND SPA. The authoring environment of AEM provides various mechanisms for organizing and editing your content. 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. Learn how to create a custom weather component to be used with the AEM SPA Editor. The course covers the end-to-end development of a Single-Page Application (SPA) using the Adobe Experience Manager (AEM) SPA framework in React JS, allowing content authors to. $ mvn clean install . $ cd aem-guides-wknd-spa. 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. To resolve this issue, make a static resource hosted by the Remote SPA use absolute paths that include the Remote SPA’s origin. The page is now editable on AEM with a. Build the project. Content populating the editable React components, must be exposed via AEM pages that extend the SPA Page component . To enable the author to use the AEM SPA Editor to edit the content of an SPA, there are requirements that the SPA must fulfill, which are described in this document. . In this session, you will have access to the. Level 6 29-12-2022 15:50 PST. Disclaimer: As the solution gets updated frequently, these answers might become outdated. Initially, it will be in React but Angular is also planned (although it might be a good month later). Update Policies in AEM. 2. 20220616T174806Z-220500</aem. AEM Sites as a Cloud Service, AEM Sites 6. So here is the more detailed explanation. Developers using either React frameworks create. 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. Understanding how to extend an existing component is a powerful. AEM provides AEM React Editable Components v2, an Node. Learn to use Angular routing to navigate between. AEM components, that maps to editable React components, must implement AEM’s Component Exporter framework - such as AEM. 5-SNAPSHOT. You will also learn how to use out of the box AEM React Core. Dynamic Model to Component Mapping for SPAs explains the dynamic model to component mapping and how it works within SPAs in AEM. SPA Editor detects rendered components and generates overlays. To resolve this issue, make a static resource hosted by the Remote SPA use absolute paths that include the Remote SPA’s origin. If the SPA page component inherits from the. That being said, there is an approach mentioned for AEM 6. When using the AEM React Editable Components with a SPA Editor-based React app, the AEM ModelManager SDK, as the SDK: Retrieves content from AEM. Understand the SPA model routing options available when using the SPA Editor. Content populating the editable React components, must be exposed via AEM pages that extend the SPA Page component . All it requires is a rendered HTML. The implementation of this component illustrates the steps needed to create a net-new AEM component that is compatible with the AEM SPA Editor framework. Create the Sling Model. Experience Manager fast tracks new apps and digital experience development using a scalable, cloud-native CMS using open, extensible APIs. They allow you to prepare content ready for use in multiple locations/over multiple channels, ideal for headless delivery. 5 Learn how to load, pass parameters to page request, and fire a Target call from your site page using a Launch Rule. Component mapping enables users to make dynamic updates to SPA components within the AEM SPA Editor, similar to traditional AEM authoring. See LICENSE for more information. Also, as mentioned in this article Integrate a SPA | Getting Started with the AEM SPA Editor and Angular | Adobe Experience Manager I was able. Getting Started with the AEM SPA Editor and React. Enable CORS in development. Happy Learning!When using the AEM React Editable Components with a SPA Editor-based React app, the AEM ModelManager SDK, as the SDK: Retrieves content from AEM. As mentioned above, there are certain technical implications of enabling AEM component to function in the context of AEM SPA Editor. NOTE. content subproject AEM SPA Model Manager is installed and initialized. AEM comes with several layers already implemented for page authoring; including for example, edit, preview, annotate. SPA Editor loads. 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. WKND SPA Project is a step-by step tutorial implementing a simple SPA project in AEM. AEM React Editable Components work with both SPA Editor or Remote SPA React apps. See the AEM documentation for a complete overview of Page Editor. Why a SPA? By being faster, fluid, and more like a native application, a SPA becomes an attractive experience not only for the visitor of the. 386 likes · 3 talking about this · 875 were here. The Angular app is developed and designed to be deployed with AEM’s SPA Editor, which maps Angular. NOTE The SPA Editor is the recommended solution for projects that require SPA framework based client-side rendering (for example, React or Angular). AEM components, that maps to editable React components, must implement AEM’s Component Exporter framework - such as AEM Core WCM Components . An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. This tutorial explains. SPA Editors are more powerful in AEM 6. AEM provides AEM React Editable Components v2, an Node. Learn how to create a SPA using the React JS framework with AEM’s SPA Editor. The. This guide covers how to build out your AEM instance. Add the corresponding resourceType from the project in the component’s editConfig node. I have searched in the AEM documentation but unable find anything related to AEM SPA Editor with PWA features. Q. The React app should contain one. Learn how multiple views in the SPA are supported using AEM Pages and the SPA Editor SDK. Sling Models are annotation driven Java™ “POJOs” (Plain Old Java™ Objects) that facilitate the mapping of data from the JCR to Java™ variables. With a traditional AEM component, an HTL script is typically required. This allows developers to place SPA Editor-compatible components into the SPA views, and allow users to author the components’ content in AEM SPA Editor. For authoring AEM content for Edge Delivery Services, click here. The SPA Editor is the recommended solution for projects that require SPA framework based client-side rendering (for example, React or Angular). Requirements. The Adventure Detail SPA route is defined as /adventure/:slug where slug is a unique identifier property on the Adventure Content Fragment. External SPA with Editable Areas: In this design, the SPA is hosted outside of AEM, the developer keeps control over the app by only enabling authoring in restricted areas of the app. Tutorials by framework. Hence difficult to manage. 5 which can be used for XF where SPA app consumes JSON which is provided by. Option 3: Leverage the object hierarchy by customizing and extending the container component. js application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries. The Adventure Detail SPA route is defined as /adventure/:slug where slug is a unique identifier property on the Adventure Content Fragment. The <Page> component has logic to dynamically create React components based on the. Learn how Experience Manager as a Cloud Service works and what the software can do for you. You will also learn how to use out of the box AEM React Core Components. The tagged content node’s NodeType must include the cq:Taggable mixin. The mapping can be done with Sling Mapping defined in /etc/map. Sling Models are annotation driven Java™ “POJOs” (Plain Old Java™ Objects) that facilitate the mapping of data from the JCR to Java™ variables. SPA Blueprint. AEM components, that maps to editable React components, must implement AEM’s Component Exporter framework - such as AEM. The Angular app is developed and designed to be deployed with AEM’s SPA Editor, which. It is independent of frameworks, rendering engines, and data sources - thus providing all the freedom the developers are seeking and making it truly universal. AEM provides AEM React Editable Components v2, an Node. Please join us to learn more about the SPA Editor in this. 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. As Single-Page Application (SPA) make the overall visitor experience more interactive, they are gaining popularity, even for content-centric experiences. 8+. ). x Dispatcher Cache Tutorial; AEM 6. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. The Single Page Application (SPA) Editor of Adobe Experience Manager (AEM) Sites allows in-context authoring (wysiwyg editing) of content that is delivered headless as JSON and rendered in the browser with JavaScript frameworks like React or Angular. Deploy the starter project to a local instance of AEM. These configurations are managed and deployed via an AEM Project. RemotePage and SPA Editor 2. api> Previously, after project creation, it was like this: <aem. js-based SDK that allows the creation of React components, that support in-context component editing using AEM SPA Editor. And I was able to setup the SPA using Angular in AEM. Tutorials. For those reading this thread - this content is coming. With the Bulk Editor, you can add, modify, delete, filter, and export the rows, save modifications, and import a set of rows. 08-09-2023 10:26 PDT. 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. The AEM SPA Editor leverages AEM Content Services to deliver the entire content of the page as a JSON model. Recommended courses. Understand how the source code for a Single Page Application (SPA) written in React can be integrated with an Adobe Experience Manager (AEM) Project. With a traditional AEM component, an HTL script is typically required. The below video demonstrates some of the in-context editing features with the WKND SPA. js App. Learn to use modern front-end tools, like a webpack dev server, to rapidly develop the SPA against the AEM JSON model API. There are several steps to onboarding your AEM app and instrumenting it to use the Universal Editor. Overview Single page applications (SPAs) can offer the user a rich, dynamic experience that reacts and behaves in familiar ways, often just like a native application. Include Adobe SPA SDK Packages. Content Fragments are used in AEM to create and manage content for the SPA. Understand the structure of a new AEM SPA Editor project built from a Maven archetype. Adobe Experience Manager (AEM) 6. Dynamic Model to Component Mapping for SPAs explains the dynamic model to component mapping and how it works within SPAs in AEM. By implementing specific interfaces, Sling Models provide the information necessary to the SPA. Now that the external SPA is part of your AEM project, it must be configured within AEM. A good example of an experience fragment is aA multi-part tutorial on how to develop for the AEM SPA Editor. From the command line navigate into the aem-guides-wknd-spa. A simple weather component will be built. A simple weather component is built. AEM SPA editor - FAQ by Niek Raaijmakers Abstract Answering the most commonly asked questions about the SPA editor Today I am going to answer some FAQ that I get a lot from customers, that are not addressed in the latest post / archetype updates. . Now the key feature of the AEM SPA Editor is that it supports in-context authoring. The implementation of this component illustrates the steps needed to create a net-new AEM component that is compatible with the AEM SPA Editor. Option 2: Share component states by using a state library such as NgRx. Also included are AEM WCM Components - React Core implementation and AEM WCM Components - Spa editor - React Core implementation. This content will be added to the AEM Weekend tutorial. The React app should contain one instance of the <Page. SPA Editor persists edits with a POST request to the server. The Mavice team has added a new Vue. The delivery of the JSON data is delegated downward to each component (from page, to paragraph, to component, etc. Covers foundation topics like project setup, component mapping, front end development tools, and application routing. 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 moreAEM’s SPA Editor provides authors the ability to edit content for a Single Page Application or SPA. Create your first React SPA in AEM by Adobe Docs Abstract Welcome to a multi-part tutorial designed for developers new to the SPA Editor feature in Adobe Experience Manager (AEM). AEM lets you have a responsive layout for your pages by using the Layout Container component. 5. Learn how to create a SPA using the React JS framework with AEM's SPA Editor. 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. Learn how AEM can go beyond a pure headless use case, with options for in-context authoring and experience management. 0 or later is required to use the SPA server-side rendering features as described in this document. Using an AEM dialog, authors can set the location for the weather to be displayed. Single page applications (SPAs) can offer compelling experiences for website users. Learn how to extend an existing Core Component to be used with the AEM SPA Editor. Experience LeagueLevel 1. The authoring environment of AEM provides various mechanisms for organizing and editing your content. The SPA Editor communicates with the SPA using JSON. Learn to use Angular routing to navigate between different views. ) to render content from AEM Headless. 7767. Instead of continually planning for upgrades and monitoring site traffic. 8+ and set up the environment variable. Since the SPA renders the component, no HTL script is needed. 0 or later is required to use the SPA server-side rendering features as described in this document. SPA Editor - AEM native editor for SPA’s Headless - a pattern where you leverage API or GrapgQL to get data from server Widget - a component of a web page with clientside experience, it has basic HTML, and javascript turns into the interactive experience when loaded. This module provides a React implementation for the containers in the AEM core components. Adobe Experience Manager (AEM) 6. AEM components, that maps to editable React components, must implement AEM’s Component Exporter framework - such as AEM. 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. Component mapping enables users to make dynamic updates to SPA components within the AEM SPA Editor, similar to traditional AEM authoring. The mapping can be done with Sling Mapping defined in /etc/map. To allow the page to be authored, a client library named cq. 5. Content populating the editable React components, must be exposed via AEM pages that extend the SPA Page component . js v14+ npm v7+ Java™ 11 Maven 3. Developers using the React framework create a SPA and then map areas of the SPA to AEM components, allowing authors to use familiar AEM Sites editing tools. Written by Suren Konathala. The Open Weather API and React Open Weather components are used. These configurations are managed and. Understanding how to add properties and content to an. g React or Angular). 4 and below) in the SPA Editor. User. It is recommended to use the SPA Editor if your project requires a SPA framework-based client-side rendering (e. And you can learn how the whole thing works in about an hour and a half. 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. Map the SPA URLs to AEM Pages. CBlocks - SPA Support. 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. Understand the SPA model routing options available when using the SPA Editor. To enable the author to use the AEM SPA Editor to edit the content of an SPA, there are requirements that the SPA must fulfill, which are described in this document. Using an AEM dialog, authors can set the location for the weather to be displayed. The mapping can be done with Sling Mapping defined in /etc/map. Deploy SPA updates to AEM. For you devs we've created a minimal demo project and a tutorial. zip or greater aem-guides-wknd-graphql source code This tutorial. Next, deploy the updated SPA to AEM and update the template policies. This tutorial walks through the implementation of a Angular application for a fictitious lifestyle brand, the WKND. The TagID is added to the content node’s cq:tags property and resolves to a node of type cq:Tag. The Translation Configuration UI makes it easier to manage various translation rules and guards against typos when editing XML directly. js-based SDK that allows the creation of React components, that support in-context component editing using AEM SPA Editor. Use the withMappable. js with a fixed, but editable Title component. Documentation AEM GEMs events SPA Editor SDK Deep Dive - Part 2 - Angular. See the article Editing an External SPA within AEM for more details on editable, external SPAs in AEM. . This tutorial is an introduction to SPA development to be used with AEM's SPA Editor JS SDK. 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. Wrap the React app with an initialized ModelManager, and render the React app. Understand the SPA model routing options available when using the SPA Editor. This allows developers to place SPA Editor-compatible components into the SPA views, and allow users to author the components’ content in AEM SPA Editor. Learn how to map React components to Adobe Experience Manager (AEM) components with the AEM SPA Editor JS SDK. Component mapping enables users to make dynamic updates to SPA components within the AEM SPA Editor, similar to traditional AEM authoring. 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. Start by creating the components that will make up the composite component, that is, components for the image and its text. Objective. Contributions are welcome! Read the Contributing Guide for more information. It makes it easy to manage your marketing content and assets. In this chapter, a new AEM project is deployed, based on the AEM Project Archetype. Understand the structure of a new AEM SPA Editor project built from a Maven archetype. The AEM project is bootstrapped with a very simple starting point for the Angular SPA. The delivery of the JSON data is delegated downward to each component (from page, to paragraph, to component, and so on). This multi-part tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. The SPA Editor is the recommended solution for projects that require SPA framework based client-side rendering (for example, React or Angular). The SPA is implemented using: Maven AEM Project Archetype; Mavice Maven AEM Project. From the command line navigate into the aem-guides-wknd-spa. Next Steps. Learn how to create a custom weather component to be used with the AEM SPA Editor. This document describes the general contract that any SPA framework should fulfill (that is, the kind of AEM support layer) so you can implement editable SPA components within AEM. Configure AEM for SPA Editor. AEM SPA editor - FAQ by Niek Raaijmakers Abstract Answering the most commonly asked questions about the SPA editor Today I am going to answer some FAQ that I get a lot from customers, that are not addressed in the latest post / archetype updates. 6+ Git macOS only prerequisites Xcode or Xcode command line tools aem-guides-wknd. Learn to use the delegation patter for extending Sling Models and features of Sling. What you will build. What you will build. This component is able to be added to the SPA by content authors. In the IDE, open the ui. Click the plus button under the Select products heading to begin product selection. For publishing from AEM Sites using Edge Delivery Services, click here. 4 SP2 release, Adobe has come up with ‘SPA Editor’ – supporting below capabilities: With SPA editor, Adobe has introduced a thin layer called SPA Editor JS SDK, which is a collection of open-source JavaScript libraries that provide a framework for allowing authors to edit the contents of a Single Page Application. Last update: 2023-10-03. So, I would really appreciate if someone could guide me on how to add PWA features in AEM SPA editor using Angular or provide sample implementation so that it could help me setting up my environment. While the SPA codebase is managed outside of AEM, an AEM project is required to setup supporting configuration and content requirements. Accommodating Existing SPAs. Being an interpreter between AEM and the SPA, the PageModelManager is meant to accompany the SPA. Join us to learn more about the SPA Editor in this introduction. App uses React v16. Introduced in AEM 6. Deploy the starter project to a local instance of AEM. From signature packages to individual treatments, it is time to disconnect and rejuvenate your body, mind, and soul. And the demo project is a great base for doing a PoC. AEM’s SPA Editor provides authors the ability to edit content for a Single Page Application or SPA. Repeat these steps for the users on your team that you would like to receive notifications. It is fully supported by Adobe, and it continues to be enhanced and expanded. Using an AEM dialog, authors can set the location for the weather to be displayed. 5. The tutorial is designed to work with AEM as a Cloud Service and is backwards compatible with AEM 6. content subprojectPrerequisites. Fluid A multi-part tutorial on how to develop for the AEM SPA Editor.