Last update: 2023-09-26. AEM must know where the remotely-rendered content can be retrieved. Components are at the core of building an experience in AEM. This journey will help you streamline your front-end. Last update: 2023-08-16. To get your AEM headless application ready for. The HTTP GET requests from the headless app to AEM’s GraphQL APIs must be configured to interact with the correct AEM service, as. In this part of the AEM Headless Developer Journey, learn about headless technology and why you would use it. Navigate to the folder you created previously. This document is intended as a high-level quick start guide for the key page authoring actions in AEM. Learn more about the Project Archetype. In AEM 6. Developer. Install the AEM SDK, add sample content and deploy an application that consumes content from AEM using its GraphQL APIs. Create basic components based on core OOTB components. Core Components The Adaptive Forms Core Components are a set of 24 open-source, BEM-compliant components that are built on the foundation of the Adobe. Content Models are structured representation of content. Then Getting Started with AEM Headless as a Cloud Service described AEM Headless in the context of your own project. 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. Visit the AEM Headless developer resources and documentation. They can be requested with a GET request by client applications. Learn. In this part of the AEM Headless Developer Journey, you can learn how to use GraphQL queries to access the content of your Content Fragments and feed it to your app (headless delivery). For more information on the AEM Headless SDK, see the documentation here. Author in-context a portion of a remotely hosted React application. Target libraries are only rendered by using Launch. From the Component browser panel, drag-drop the Adaptive Forms - Embed (v2) component on the page. Create your first React Single Page Application (SPA) that is editable in Adobe Experience Manager AEM with the WKND SPA. 2 and later. For AEM Forms as a Cloud Service: Access to an AEM Forms as a Cloud Service author instance or a local AEM Forms as a Cloud Service SDK environment. Access Package Manager. Define the structure of the content you will create and serve using AEM's headless capabilities by using Content Fragment Models. A workflow that automates this example notifies each participant when it is time to perform their. Experience Manager Developer Tools for Eclipse is an Eclipse plugin based on the Eclipse plugin for Apache Sling released under the Apache License 2. Deploying a SPA that interacts AEM in a headless manner involves hosting the SPA and making it accessible via a web. Learn about headless technologies, what they bring to the user experience, how AEM supports headless models, and how to implement your own headless development project from A to Z. Headless and AEM; Headless Journeys. Implementing User Guide: Understand how to build and customize experiences using AEM’s powerful features by exploring these development and deployment topics. Tap or click Create. Learn how Experience Manager as a Cloud Service works and what the software can do for you. Tap Adaptive Forms Custom Components Migration and in the Custom Components Migration page, tap Start Migration. They can be used by developers to provide website business users, editors, and administrators with the functionality to adapt their websites to changing business needs (content agility). : Guide: Developers new to AEM and headless: 1. The AEM SDK. Adobe Experience Manager (AEM) components and templates comprise a powerful toolkit. Authoring Basics for Headless with AEM. Headless is a method of using AEM as a source of data, and the primary way of achieving this is by using API and GraphQL for getting data out of AEM. This guide uses the AEM as a Cloud Service SDK. 5. Learn. Guide: Developers new to AEM and headless: 1 hour: Headless Setup: For experienced AEM users who need a short summary of the key AEM headless features, check out this quick start overview. Headless Journeys. Time; Headless Developer Journey: For users new to AEM and headless technologies, start here for a comprehensive introduction to AEM and its headless features from the theory of headless through going live with your first headless project. The AEM Quick Site Creation tool allows non-developers to quickly create a site from scratch by using site templates. : Guide: Developers new to AEM and. Throughout this tutorial, we will guide you through building the Image List component, handling nested references, rendering referenced image assets, and integrating the Universal Editor. Know what necessary tools and AEM configurations are required. My requirement is the opposite i. Permissions and personas can broadly be considered based on the AEM environment Author or Publish. Sample Multi-Module Project. Log into AEM as a Cloud Service and from the main menu select Navigation -> Content Fragments. The SPA Editor offers a comprehensive solution for. A development environment allows your developers to implement, and test AEM applications under the same runtime conditions as the stage and production environments. This GraphQL API is independent from AEM’s GraphQL API to access Content. Connectors User GuideAdobe Experience Manager Assets developer use cases, APIs, and reference material. 4. You struggle to find enough AEM developers for web-based projects but have a strong team of frontend developers. . With CRXDE Lite,. Using the Access Token in a GraphQL Request. This setup establishes a reusable communication channel between your React app and AEM. The main characteristics of a traditional CMS are: Authors generate content with WYSIWYG editors and use predefined templates. Formerly referred to as the Uberjar. The SPA Editor offers a comprehensive solution for supporting SPAs. The complete code can be found on GitHub. The AEM Headless Client for JavaScript is used to execute the GraphQL persisted queries that power the app. Confirm with Create. Along with the configrations and list of dependencies required to render the form, the directory includes the following important content: Navigate to Tools, General, then select GraphQL. from other headless solution to AEM. Define the Title and Description and add a Thumbnail image if required. Author in-context a portion of a remotely hosted React. Start here for a guided journey through the powerful and flexible headless features of. For publishing from AEM Sites using Edge Delivery Services, click here. It is not intended as a getting-started guide. AEM components are still necessary mostly to provide edit dialogs and to export the component model. Implementing User Guide: Understand how to build and customize experiences using AEM’s powerful features by exploring these development and deployment topics. Authoring Concepts. First select which model you wish to use to create your content fragment and tap or click Next. AEM Headless developer is quite popular among enterprises looking to deliver content to the front end by decoupling backend from. Experience Manager Developer Tools for Eclipse is an Eclipse plugin based on the Eclipse plugin for Apache Sling released under the Apache License 2. Every user assigned to an AEM as a Cloud Service product profile has read-only access to Cloud Manager via the Cloud Manager User role. This guide uses the AEM as a Cloud Service SDK. The advanced tutorial illustrates in-depth aspects of working with Content Fragment Models, Content Fragments, and the AEM GraphQL persisted queries, including using the GraphQL. Before you configure front-end pipelines, review the AEM Quick Site Creation Journey for an end-to-end guide through the easy-to-use AEM Quick Site Creation tool. Moving to AEM as a Cloud Service: Understand the transition journey to Cloud. The AEM Headless SDK is available for various platforms: AEM Headless SDK for client-side browsers (JavaScript) AEM Headless SDK for server-side/Node. AEM as a Cloud Service technical documentation - If you already have a firm understanding of AEM and headless technologies, you may want to. This account is available on AEM 6. Enable developers to add. Select your site in the console. AEM Headless Overview; GraphQL. This multi-part tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. Adobe Experience Manager projects can be implemented in both headful and headless models, but the choice is not binary. Enhanced Personalization and Customer Journey MappingThe goal for this multi-part tutorial is to teach a developer who is new to AEM how to implement a website in AEM using the latest standards and technologies. Developer mode is implemented as a side panel to the page editor. With a headless implementation, there are several areas of security and permissions that should be addressed. AEM makes it easy to manage your marketing content and assets. Create a file named . In the second step, you map your UI components or use a public UI components library, such as Google Material UI or Chakra UI to style your forms. API. Learn how the Universal Editor enables what-you-see-is-what-you-get (WYSIWYG) editing of any headless and headful experience. e. Learn how to create a SPA using the React JS framework with AEM's SPA Editor. 5 Deploying User Guide; AEM 6. Understand how to build and customize experiences using AEM’s powerful features by exploring these development and deployment topics. AEM 6. 04. In this optional continuation of the AEM Headless Developer Journey, you learn how AEM can combine headless delivery with traditional full-stack CMS features. Using a REST API. Introduction to AEM Forms as a Cloud Service. This document gives a detailed overview of the various parts that make up AEM and is intended as a technical appendix for a full-stack AEM developer. Understand Headless in AEM; Learn about CMS Headless Development; Getting Started with AEM Headless as a Cloud Service; Path to your first experience using AEM Headless; How to model your content as AEM Content Models; How to access your content via AEM delivery APIs; How to update your content via. . In this part of the AEM Headless Developer Journey, learn about headless technology and why you would use it. Manage GraphQL endpoints in AEM. Each guide builds on the previous, so it is recommended to explore them thoroughly and in order. Developer tools. Browse the following tutorials based on the technology used. Learn how to build next-generation apps using headless technologies in Experience. The authoring environment of AEM provides various mechanisms for organizing and editing your content. This guide focuses on the full headless implementation model of AEM. Errors - When problems occur, details are shown for each. Tap or click the folder that was made by creating your configuration. Ensure that UI testing is activated as per the section Customer Opt-In in this document. They allow you to prepare content ready for use in multiple locations/over multiple channels, ideal for headless delivery. Developers can use the JSON Preview in the Content Fragment editor to show all values of the current Content Fragment that can be returned using the GraphQL API. Confirm and your site is adapted. Confirm with Create. 8+. Connectors User Guide Headless content management is a key development for today’s web design that decouples the frontend, client-side applications from the backend, content management system. Headless Developer Journey; Headless Content Architect Journey; Headless Content Author. Headless features can be used to manage and deliver content to multiple touch-points, while also enabling content authors to edit single page applications. In Projects, tap/click Create to open the Create Project wizard: Select a template and click Next. The following configurations are examples. For an overview of all of the available components in your AEM instance, use the Components Console. Path to Your First Experience Using AEM Headless {#path-to-first-experience} . Understand the steps to implement headless in AEM. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Click on Create Migration Set. 5 in five steps for users who are already familiar with AEM and headless technology. The. The author environment provides the mechanisms for creating, updating, and reviewing this content before. GraphQL is: “…a query language for APIs and a runtime for fulfilling those queries with your existing data. It is not intended as a getting-started guide. This guide provides important information about the latest release of Experience Manager as a Cloud Service, including what is new, deprecated and removed features, and known issues. The GraphQL API. Authoring Environment and Tools. Build a React JS app using GraphQL in a pure headless scenario. cqModel Understand the candidate’s career goal, professional interests, etc. Courses Recommended courses Tutorials Certification Events Instructor-led training Browse content library View all learning options. Next, we’ll use the AEM Headless SDK to retrieve Content Fragment data from AEM’s GraphQL APIs. Headless Developer Journey: Explore this guided journey through the powerful and flexible headless features of AEM to prepare for your first headless project. To determine the correct approach for managing build dependent configurations, reference the AEM Headless app’s framework (for example, React, iOS, Android™, and so on) documentation, as the approach varies by framework. 5. At the beginning of the AEM Headless Content Author Journey the Content Modeling Basics for Headless with AEM covered the basic concepts and terminology relevant to authoring for headless. Headful and Headless in AEM; Headless Experience Management. User. An Experience Fragment is a stand-alone experience that can be re-used across channels and have variations, saving the trouble of repeatedly copying and pasting experiences or parts of experiences. Once created, the Quick Site Creation tool also enables fast customization of the theme and styling of the AEM site (JavaScript, CSS, and static resources). This document provides an overview of the different models and describes the levels of SPA integration. Available for use by all sites. This document provides and overview of the different models and describes the levels of SPA integration. Hence, AEM uses GraphQL to exchange commerce data with Adobe Commerce and with any commerce engine via I/O Runtime. Learn how to build next-generation apps using headless technologies in Experience Manager as a Cloud Service. Front end developer has full control over the app. This multi-part tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. Next, we’ll use the AEM Headless SDK to retrieve Content Fragment data from AEM’s GraphQL APIs. Sign In. Tutorials. Headless CMS with AEM: A Complete Guide You might have already heard about Headless CMS and you may be wondering if you should go “all-in” with this new model. It is the main tool that you must develop and test your headless application before going live. Instead of an out-of-the-box solution, Adobe Developer App Builder provides a common, consistent, standardized development platform for extending Adobe Cloud solutions such as AEM including: Adobe Developer Console — For custom microservice and extension development, letting developers build and manage projects while accessing all the tools. Enable developers to add automation to. ” Tutorial - Getting Started with AEM Headless and GraphQL. You have learned the basics of Headless CMS Authoring, with an introduction to authoring with AEMaaCS and in particular, authoring Content Fragments. The zip file is an AEM package that can be installed directly. Deployment Managers - These users use Cloud Manager to create and run pipelines that deploy the code from the git repositories to your running AEM environments. Implementing User Guide: Understand how to build and customize experiences using AEM’s powerful features. AEM Headless Content Architect Journey Overview; Content Modeling for Headless with AEM - An Introduction; Learn the Content Modeling Basics for Headless with AEM; Learn about Creating. Welcome to the multi-part tutorial for developers looking to augment an existing React-based (or Next. Last update: 2023-07-11. The React app should contain one instance of the <Page> component exported from @adobe/aem-react-editable-components. Headless content management is a key development for today’s web design that decouples the frontend, client-side applications from the backend, content management system. Run the following command to start the SDK: (on Microsoft® Windows) sdk. Provide a Title for your configuration. Headless Developer Journey. Headless and AEM; Headless Journeys. This document gives a detailed overview of the various parts that make up AEM and is intended as a technical appendix for a full-stack AEM developer. x. AEM Headless Developer Journey. A name will be automatically generated based on the title and adjusted according to AEM naming conventions. We believe it is beneficial for any developer involved in an AEM SPA Editor project to complete this tutorial. Translating Headless Content in AEM. AEM Headless APIs allow accessing AEM content from any. The following configurations are examples. The Assets REST API lets you create. SPA Introduction and Walkthrough. The AEM Headless Client for JavaScript is used to execute the GraphQL persisted queries that power the app. Understand Headless in AEM; Learn about CMS Headless Development; Getting Started with AEM Headless as a Cloud Service; Path to your first experience using AEM Headless; How. Developer. Here you can specify: Name: name of the endpoint; you can enter any text. Experience League. Here you can specify: Name: name of the endpoint; you can enter any text. This pattern can be used in any SPA and Widget approach but does make AEM more developer-focused. This endpoint can use all Content Fragment Models from all Sites configurations (defined in the Configuration Browser ). NOTE. The Create new GraphQL Endpoint dialog box opens. Headless Developer Journey: Explore this guided journey through the powerful and flexible headless features of AEM to prepare for your first headless project. The tasks described in the Headless Getting Started Guides are necessary for a basic end-to-end demonstration of AEM’s headless capabilities. Tap or click Create -> Content Fragment. js) Remote SPAs with editable AEM content using AEM SPA Editor. Connectors User GuideAEM devs, join us on Nov 6 (EMEA, LATAM, NA) & Nov 15 (APAC) for Adobe Developers Live. React is the most favorite programming language amongst front-end developers ever since its release in 2015. . The following tools should be installed locally: JDK 11; Node. To get your AEM headless application ready for launch, follow the best. js) Remote SPAs with editable AEM content using AEM SPA Editor. This guide covers how to build out your AEM instance. The Core Components and the AEM Project Archetype make it simple to get started with a tool set of ready-made, robust components. In this chapter, we replace the Home view’s title, “Current Adventures”, which is hard-coded text in Home. For users new to AEM and headless technologies, start here for a comprehensive introduction to AEM and its headless features from the theory of headless through going live with your first headless project. You also add or delete users and what group they belong to. Adobe Creative Cloud provides creative teams with an ecosystem of solutions and services to help them. If you are new to either AEM or headless, see Adobe’s Headless Documentation Journeys for an end-to-end introduction to both headless and how AEM supports it. Preview URLs, using URL expressions, are set on the Content Fragment Model’s Properties. In the future, AEM is planning to invest in the AEM GraphQL API. ). The following AEM documentation includes everything from essential guides for those new to the content management system (CMS) to videos, tutorials, and further learning resources to get the most out of AEM 6. We’ll guide you through configuring your React app to connect to AEM Headless APIs using the AEM Headless SDK. Tests for running tests and analyzing the. Click Create and Content Fragment and select the Teaser model. Wrap the React app with an initialized ModelManager, and render the React app. Granite UI. It also serves as a best-practice guide to several AEM features. Navigate to show the page for which you want to create a version. In the previous document of the AEM headless journey, Learn About CMS Headless Development you learned the basic theory of what a headless CMS is and you should. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables. A single-page application is a web application or website that interacts with the user by dynamically rewriting the current web page with new data from the webserver, instead of the default method of a web browser loading entire new pages. We’ll guide you through configuring your React app to connect to AEM Headless APIs using the AEM Headless SDK. 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. The two only interact through API calls. A development environment allows your developers to implement, and test AEM applications under the same runtime conditions as the stage and production environments. 5 Granite materials apply to AEMaaCS) Coral UI. Developer. Introduction to AEM Headless; Developer Portal (Additional Resources) Best Practices - Setup and Use;. In summary: from an administrator’s point of view, configurations are how you create workspaces to manage settings in AEM, whereas the developer should understand how AEM uses and manages these. AEM offers the flexibility to exploit the advantages of both models in one project. The creation of a Content Fragment is presented as a dialog. In this part of the AEM Headless Developer Journey, you can learn how to use GraphQL queries to access the content of your Content Fragments and feed it to your app (headless delivery). Time; Headless Developer Journey: For developers new to AEM and headless technologies, start here for a comprehensive introduction to AEM and its headless features from the theory of headless through going live with your first headless project. Understand how it can help content authors deliver exceptional experiences, increase their content velocity, and how provides a state-of-the-art developer experience. AEM Headless as a Cloud Service. The GraphiQL Explorer tool enables developers to create, and test queries against content on the current AEM environment. Prerequisites. For the purposes of this getting started guide, we only need to create one configuration. The AEM Headless SDK. For the purposes of this getting started guide, we only need to create one folder. 6. This React application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries. Define the structure of the content you will create and serve using AEM's headless capabilities by using Content Fragment Models. js v18; Git; 1. When creating a GraphQL query, developers can choose different response types from html, plaintext, markdown, and json from a multi-line field. Define the developer’s process. The tools provided are accessed from the various consoles and page editors. 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. An AEM installation generally consists of at least two environments: Author. Alternatively, you can also use CRXDE Lite to get a list of all the components available in the repository. Objective. AEM Workflows lets you automate a series of steps that are performed on (one or more) pages and/or assets. Log into AEM as a Cloud Service and from the main menu select Navigation -> Content Fragments. Last update: 2023-08-15 Topics: Developer Tools Created for: Developer The Story so Far At the beginning of the AEM Headless Content Architect Journey the Introduction. TIP If you are new to AEM as a Cloud Service and familiar with AEM and are migrating from on-premise or Adobe Managed Services, be sure to check out the AEM as a Cloud Service Migration Journey . Your template is uploaded and can. AEM provides a Translation Integration Framework for headless content, allowing Content Fragments and supporting assets to be easily translated for use across locales. This article presents important questions to consider when engaging a. How to create headless content in AEM. Headless Developer Journey: Explore this guided journey through the powerful and flexible headless features of AEM to prepare for your first headless project. First select which model you wish to use to create your content fragment and tap or click Next. AEM’s GraphQL APIs for Content Fragments. The journey may define additional personas with which the translation specialist must interact, but the point-of. The Story So Far. Create a new Adaptive Form from the Form Creation wizard. The Single-line text field is another data type of Content. Looking for a hands-on tutorial? Last update: 2023-08-16. Synchronization for both content and OSGi. Enter the preview URL for the Content Fragment. Adobe Experience Manager as a Cloud Service. Dynamic Media is now part of AEM Assets and works the same way. Operations. Path to Your First Experience Using AEM Headless. 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. Navigate to Tools, General, then select GraphQL. I am not able to understand how the Template is designed. For a third-party service to connect with an AEM instance it must have an. This guide uses the AEM as a Cloud Service SDK. Widgets in AEM. Below is a simple path for creating, managing, and delivering experiences using AEM as a Cloud Service in five steps for users who are already familiar with AEM and headless technology. Beginner Developer AEM’s Content Services leverages traditional AEM Pages to compose headless REST API endpoints, and AEM Components define, or. Asset microservices provides for scalable and resilient processing of assets using cloud-native applications (also called workers). This journey lays out the requirements, steps, and approach to translate headless content in AEM. AEM Headless Developer Journey. The new reference site and accompanying tutorial covers fundamental. This article provides insights into how Headless Adaptive Forms work, and how they can be integrated with different applications to simplify the form building process. Looking for a hands-on. Q: “How is the GraphQL API for AEM different from Query Builder API?” A: “The AEM GraphQL API offers total control on the JSON output, and is an industry standard for querying content. Development flow for Forms as a Cloud Service aligns with AEM Archetype for AEM Cloud Service. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Search for. A developer uses the underlying configuration mechanism that implements configurations to persist and look up settings in AEM. Reference Setup: Developers, Administrators with AEM experience: 20 minutes: Headless hands-on tutorial: If you prefer a hands-on approach and are familiar. The AEM administrator’s product profile is used to grant administrator privileges in the associated AEM instance. Adobe Experience Manager Sites lets marketers create content while allowing developers to focus on building and shipping code. Developers can use the JSON Preview in the Content Fragment editor to show all values of the current Content Fragment that can be returned using the GraphQL API. AEM is a part of Adobe Experience Cloud (AEC), which lets you create and deliver exceptional digital experiences for customers. At this point, you should have completed the entire AEM Headless Developer Journey and understand the basics of headless delivery in AEM including an understanding of: The difference between headless and headful content delivery. Moving to AEM as a Cloud Service: Understand the. The journey defines additional personas with which the. In the future, AEM is planning to invest in the AEM GraphQL API. The Story so Far. It contains the following artifacts: The Quickstart jar - an executable jar file that can be used to set up both an author and a publish instance. Documentation AEM as a Cloud Service User Guide Developer and Deployment Manager Tasks. Select the Content Fragment Model and select Properties form the top action bar. Provides links to the detailed documentation. At the beginning of the AEM Headless Content Author Journey the Content Modeling Basics for Headless with AEM covered the basic concepts and terminology relevant to authoring for headless. The Story So Far. AEM is a headless CMS offering flexible and customizable architecture to provide developers and marketers with the tools to create seamless experiences throughout the customer journey. React - Headless. 4. 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. Select the root of the site and not any child pages. The Story So Far. Headless content management is a key development for today’s web design that decouples the frontend, client-side applications from the backend, content management system. 4+ and AEM 6. Access to assets folders on AEM Publish should be controlled via User Groups, rather than user directly. The AEM Forms Cloud Service Rapid Development Environment (RDE) has no support for Communication APIs. This user guide contains videos and tutorials helping you maximize your value from AEM. Instead, you control the presentation completely with your own code. It also serves as a best-practice guide to several AEM features. Set the AEM_HOME to point to local AEM Author installation. The following tools should be installed locally: JDK 11; Node. Created for: Beginner. Start here for a guided journey through the powerful and flexible headless features of AEM, their capabilities, and how to use them on your project. The current implementation of the Assets HTTP API is based on the REST architectural style and enables you to access content (stored in AEM) via CRUD operations (Create, Read, Update, Delete). After reading it, you can do the following: From these takeaways we can recommend AEM headless or hybrid to be considered when the following points are met: You aim to deliver the same experience and code base for a content-focused page on the web and a hybrid mobile app. Each environment contains different personas and with. Open the Templates Console (via Tools -> General) then navigate to the required folder. The AEM Headless SDK is set of libraries that can be used by clients to quickly and easily interact with AEM Headless APIs over HTTP. The developer develops the client that will consume content from AEM headless as the content authors are still creating the content. In a typical development cycle, you start with creating and hosting Headless adaptive forms on Adobe Experience Manager Forms Server. Select Create at the top-right of the screen and from the drop-down menu select Site from template. Developers - These users access the Cloud Manager git repositories where they will manage the code for your AEM custom applications. Unlike the traditional AEM solutions, headless does it without the presentation layer. AEM Headless Developer Journey - Start here for a guided journey through the powerful and flexible headless features of AEM, their capabilities, and how to use them on your first development project. The platform is also extensible, so you can add new APIs in the future to deliver content in a different. Last update: 2023-06-27. After you do this, the Migration set. Now that you have completed this part of the AEM Headless Developer Journey, you should: Understand important planning considerations for designing your content. In the Query tab, select XPath as Type. Select Create. Topics: Content Fragments. Browse the following tutorials based on the technology used. The tutorial is designed to work with AEM as a Cloud Service and is backwards compatible with AEM 6. Apache Maven 3. The SPA is implemented using: Maven AEM Project Archetype; AEM SPA Editor; Core. Permission considerations for headless content. Connectors User Guide: Learn how to integrate Connectors into Experience Manager as a Cloud Service. Users with the Cloud Manager User role only can log into Cloud Manager and navigate to the AEM author environments (if they exist) by using the Programs menu options.