Adobe Experience Manager headless CMS gives you all the tools you need to manage your content and make it available via APIs to any number of front ends via both JSON and GraphQL. Level 1: Content Fragment Integration - Traditional Headless Model. User. The Configuration Browser provides a generic configuration API, content structure, resolution mechanism for configurations in AEM. A dialog will display the URLs for. The following video highlights some of the top features of the Page Editor. This article builds on these so you understand how to create your own Content Fragment Models for your AEM headless. Get to know how to organize your headless content and how AEM’s translation tools work. A sandbox program is typically created to serve the purposes of training, running demos, enablement, or proof of concepts (POCs) and thus are not meant to carry live traffic. To view a folder’s. User. Learn how to create a SPA using the React JS framework with AEM's SPA Editor. You can personalize content and pages, track conversion rates, and uncover which ads drive traffic. Certain points on the SPA can also be enabled to allow limited editing. Learn how to connect AEM to a translation service. Using the Designer. jar --host=localhost. The main difference consists in enabling the Adobe Experience. See how AEM powers omni-channel experiences. 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. AEM Headless Content Author Journey - Overview; Authoring for Headless with AEM - An Introduction; Authoring Basics for Headless with AEM; Learn about using references in Content Fragments; Learn about defining Metadata and Tagging for Content Fragments; Implementing. In Eclipse, open the Help menu. Editable Templates are used to define the JSON content structure AEM Content Services ultimately expose. The tools provided are accessed from the various consoles and page editors. To support SPA Editor’s layout mode for editable areas in the SPA, we must integrate AEM’s Responsive Grid CSS into the SPA. This server-to-server application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries and print it on terminal. Associate a page with the translation provider that you are using to translate the page and descendent pages. Configure the Translation Connector. These remote queries may require authenticated API access to secure headless content delivery. Browse the following tutorials based on the technology used. This chapter will add navigation to a SPA in AEM. Option 2: Share component states by using a state library such as NgRx. 5 is a flexible tool for the headless implementation model by offering three powerful services: Content Models. React has three advanced patterns to build highly-reusable functional components. Under Cloud Service Configurations in the Add Configuration drop-down list, select your connector. The Configuration Browser provides a generic configuration API, content structure, resolution mechanism for configurations in AEM. A launch is created and a copy of the page is added to the. Last update: 2023-06-23. See full list on experienceleague. Build a React JS app using GraphQL in a pure headless scenario. 0. It should appear in the drop-down list when you have installed its package as described previously. Deploying a SPA that interacts AEM in a headless manner involves hosting the SPA and making it accessible via a web. Clicking the name of your test in the Result panel shows all details. AEM Preview is the service that mimics AEM Publish in behavior, but has content published to it for preview or review purposes. The default suite that runs after adding the. Using Sling Adapters. The following sections describe the flexible mode file structure, local validation, debugging and migrating from legacy mode to the flexible mode. Enable developers to add automation to. Once your page is created (either new or as part of a launch or live copy) you can edit the content to make the updates you require. AEM Headless Content Author Journey - Overview; Authoring for Headless with AEM - An Introduction;. Typical AEM as a Cloud Service headless deployment. Learn how to configure segmentation using ContextHub. The Headless features of AEM go far beyond what “traditional” Headless CMS can offer. When a page or asset is being translated, AEM extracts this content so that it can be sent to the translation service. Content models. Get to know how to organize your headless content and how AEM’s translation tools work. When editing pages in Adobe Experience Manager (AEM), several modes are available, including Developer mode. The AEM Headless SDK is available for various platforms: AEM Headless SDK for client-side browsers (JavaScript) AEM Headless SDK for server-side/Node. The endpoint is the path used to access GraphQL for AEM. Using Content. For this, let’s edit the Timewarp page. CORSPolicyImpl~appname-graphql. The headless part is the content backend, as a headless Content Management System (CMS) is a back-end only content management system, designed and built explicitly as a content repository that makes content accessible via an API, for display on any device. Persisted queries. 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. With over 24 core components available, you can easily. Opening the multi-line field in full screen mode enables additional formatting tools like. In the previous document of the AEM headless journey, Path to Your First Experience Using AEM Headless, you then learned the steps needed to implement your first project. Provide a Model Title, Tags, and Description. Next, navigate to AEM to verify the updates and allow the OpenWeather component to be added to the SPA. AEM supports the SPA paradigm with SPA editor since version 6. Content Fragments are editorial content, with definition and structure, but without additional visual design and/or layout. Adobe Developer App Builder extends AEM capabilities providing dynamic content without load time lag and on single-page apps. You will also learn how to use out of the box AEM React Core Components. Select Edit from the edit mode selector in the top right of the Page Editor. Get to know how to organize your headless content and how AEM’s translation tools work. Following AEM Headless best practices, the React application uses AEM GraphQL persisted queries to. Your template is uploaded and can. Learn about the concepts and. Understand headless translation in AEM; Get started with AEM headless translation Overview. The AEM SPA Editor SDK was introduced with AEM 6. Adobe Experience Manager’s Referrer Filter enables access from third-party hosts. This Web Component application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries and render a portion of UI, accomplished using pure JavaScript code. Level 2: In addition to level one: The RemotePage component can be used to embed the external SPA into AEM where AEM content can be viewed in-context. Know the prerequisites for using AEM’s headless features. Could not load tags. 6. Provide a Title for your configuration. 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. The Story So Far. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). The links in these attributes are run through the AEM Link Externalizer publishLink() to recreate the URL as if it was on a published instance, and as such, publicly available. On the Tests panel, tap or click either the Run all tests button or the Run tests button below the title of the Test Suite that you want to run. Open the Templates Console (via Tools -> General) then navigate to the required folder. You have complete control over how the content is displayed on several platforms, including desktop, mobile, IoT, and PIM systems. Set the cq:designPath property. In a headless setup, the presentation system (the head) is decoupled from the content management (the tail). Below is a summary of how the React application is built, how it connects to AEM Headless to retrieve content using GraphQL persisted queries, and how that data is presented. react project directory. 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 Content Fragment Models in AEM; Headless Translation Journey. Headful and Headless in AEM; Headless Experience Management. Go to Staging Tab:-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. Headless implementation forgoes page and component management, as is. authored in edit mode. Select the Cloud Services tab. A minimum of two pods allows for business continuity while maintenance tasks are running, or while a deployment process is happening. GraphQL Model type ModelResult: object . Level 1: Content Fragments and the AEM headless framework can be used to deliver AEM content to the SPA. Install the AEM SDK, add sample content and deploy an application that consumes content from AEM using its GraphQL APIs. Using a set of primary source assets, Dynamic Media generates and delivers multiple variations of rich content in real time. We’ll see both render props components and React Hooks in our example. View the source code on GitHub. Last update: 2023-06-27. Download the latest version of Tough Day 2 from the Adobe Repository. Using this path you (or your app) can: receive the responses (to your GraphQL queries). Permissions and personas can broadly be considered based on the AEM environment Author or Publish. This journey lays out the requirements, steps, and approach to translate headless content in AEM. Last update: 2023-11-17. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). The completed SPA, deployed to AEM, can be dynamically authored with traditional in. Ideal usages for this mode are decoupling the rendering of JSS applications from Sitecore and multi-channel API usage. The CRXDE Lite User Interface looks as follows in your browser: You can now use CRXDE Lite to develop your application. Translating Headless Content in AEM. Below is a summary of how the React application is built, how it connects to AEM Headless to retrieve content using GraphQL persisted queries, and how that data is presented. The p4502 specifies the Quickstart runs on. Click OK. In a headless setup, the presentation system (the head) is decoupled from the content management (the tail). Tap or click Create -> Content Fragment. Enable Headless Adaptive Forms on AEM 6. Instead, go to Preview mode by selecting Preview in the upper right-hand corner of the page. Created for: Admin. Certain points on the SPA can also be enabled to allow limited editing in AEM. Get started with AEM headless translation. Content Fragments, independent of layout, can be used directly in AEM Sites with Core Components or can be delivered in a headless manner to downstream channels. References to other content, such as images or other Content Fragments can be dynamically inserted in-line within the flow of the text. The following diagram shows the flow of requests from the browser to the Sitecore databases. I'd like to use those same React components to feed the AEM Experience Fragment authoring experience, instead of having to rebuild each React component as an HTL template within AEM -- it's too much overhead to maintain a. This method can then be consumed by your own applications. Headless Developer Journey. Contribute to adobe/aem-headless-client-js development by creating an account on GitHub. Single page application refers to a webpage that interacts with the user by dynamically rewriting the current page with new data from the server, instead of loading an entirely new page. 20. 10. Confirm with Create. A folder’s Dynamic Media Publishing mode property plays an important role in publication. The author name specifies that the Quickstart jar starts in Author mode. The layout adheres to a responsive design style and accommodates itself to the size of the device, or window, or both, that you are using. AEM Headless Translation Journey - This documentation journey gives you a broad understanding of headless technology, how AEM serves headless content, and how you can translate it. View the source code on GitHub. Build a React JS app using GraphQL in a pure headless scenario. adobe. These are defined by information architects in the AEM Content Fragment Model editor. Workflows enable you to automate processes for managing resources and publishing content in your AEM environment. AEM Preview is the service that mimics AEM Publish in behavior, but has content published to it for preview or review purposes. This server-to-server application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries and print it on terminal. Multiple implementations of an interface are named <Variant><Interface>, that is, JcrReader and FileSystemReader. Getting Started with AEM Headless as a Cloud Service. Once open the model editor shows: left: fields already defined. For the purposes of this getting started guide, we will only need to create one. 4. Experience using the basic features of a large-scale CMS. Option 3: Leverage the object hierarchy by customizing and extending the container component. AEM Basics Summary. The journey lays out the requirements, steps, and approach of an AEM Headless project from the perspective of a Content Architect. 2. supports headless CMS scenarios where external client applications render experiences using content managed in AEM. AEM is a part of Adobe Experience Cloud (AEC), which lets you create and deliver exceptional digital experiences for customers. The author name specifies that the Quickstart jar starts in Author mode. In the file browser, locate the template you want to use and select Upload. 04. Don’t worry - this grid system is only applicable to the editable containers, and you can use your grid system of choice to drive the layout of the rest of your SPA. Select Edit from the edit mode selector in the top right of the Page Editor. Integrating Adobe Target on AEM sites by using Adobe Launch. Out-of-the-box translation rules cover common use cases such as Text components and alt text for Image components. But in Headless AEM , you create the content in AEM either using CF or a Template to expose the content as an API. Headless and AEM; Headless Journeys. The creation of a Content Fragment is presented as a dialog. For example, if only bold formats and lists should be allowed when pasting in AEM, you can filter out the other formats. This Web Component/JS application demonstrates how to query content using AEM's GraphQL APIs using persisted queries. After reading it, you can do the following:Authoring Environment and Tools. The following configurations are examples. 5. 5 and Headless. Browse the following tutorials based on the technology used. Open CRXDE Lite in your browser. Certain points on the SPA can also be enabled to allow limited editing in AEM. This headless CMS. Adding a UI Mode. AEM also provides an in-place, responsive layout editing option for components in the edit mode. Design dialog will change the content at the template level. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). Navigate to Tools, General, then select GraphQL. The AEM Project Archetype generates a project primed for AEM’s integration with a Remote SPA, but requires a small, but important adjustment to auto-generated AEM page structure. In the previous document of the AEM headless journey, How to Access Your Content via AEM Delivery APIs you learned how to access your headless content in AEM via the AEM GraphQL API and you should now: Have a high-level understanding of GraphQL. In this part of the AEM Headless Developer Journey, learn how to model your content for AEM Headless delivery using Content Modeling with Content Fragment Models and Content Fragments. Check both AEM and Sling plugins. AEM provides several tools and resources for creating workflow models, developing workflow steps, and for programmatically interacting with workflows. AEM Headless as a Cloud Service. In the Create Site wizard, select Import at the top of the left column. Deploy all of the updates to a local AEM environment from the root of the project directory, using your Maven skills: $ cd aem-guides-wknd-spa. AEM’s Content Services leverages traditional AEM Pages to compose headless REST API endpoints, and AEM Components define, or reference, the content. Available for use by all sites. In the sites console, select the page to configure and select View Properties. In the previous document of the AEM headless translation journey, Learn about headless content and how to translate in AEM you learned the basic theory of what a headless CMS is and you should now: Understand the basic. Last update: 2023-09-25. Last update: 2023-11-17. This involves structuring, and creating, your content for headless content delivery. Hover over the default title text below the WKND logo and above the adventures list, until the blue edit outline displaysMigration to the Touch UI. Preventing XSS is given the highest priority during both development and testing. Overview. Headless Authoring Journey - Start here for a guided journey through the powerful and flexible headless features of AEM, their capabilities, and how to model your. The better you can subscribe to these ideas, the easier it is to read the code and the faster you can write and change the code. When customizing, you can create your. The AEM CORS OSGi configuration factory defines the allow criteria for accepting CORS HTTP requests. Clientlibs let you extend the default implementation to realize new functionality, while reusing the standard functions, objects, and methods. Edit the file. Each guide builds on the previous, so it is recommended to explore them thoroughly and in order. OSGi Configuration API. The three tabs are: Components for viewing structure and performance information. Log into AEM and from the main menu select Tools -> Assets -> Content Fragment Models. To the left of the name, select the checkbox to enable (turn on) DASH. After you download the application, you can run it out of the box by providing the host parameter. Ensure you adjust them to align to the requirements of your project. Tap Home and select Edit from the top action bar. Understand headless translation in AEM; Get started with AEM headless. Create and publish a headless form using starter kit; Use a custom react library to render a headless form; Create Headless adaptive formsProduct functional tests are a set of stable HTTP integration tests (ITs) of core functionality in AEM such as authoring and replication tasks. For authentication, the third-party service must retrieve an Access Token that can then be used in the GraphQL Request. For the purposes of this getting started guide, you are creating only one model. Understand headless translation in AEM; Get started with AEM headless translation; Learn about headless content and how to translate in AEMHeadless testing is a technique for testing applications (or individual components inside applications) without displaying their visual elements. Set up Dynamic Media. If you require a basic introduction to creating Content Fragment Models, please see the appropriate chapter in the basic tutorial. But in Headless AEM , you create the content in AEM either using CF or a Template to expose the content as an API. Headless is an example of decoupling your content from its presentation. The React WKND App is used to explore how a personalized Target activity using Content. The number of available/used environments is displayed in parentheses behind the environment type. react $ mvn clean install -PautoInstallSinglePackage Update the Template Policy. The Story so Far. Navigate to Sites > WKND App. This Web Component/JS application demonstrates how to query content using AEM's GraphQL APIs using persisted queries. Every surfer knows the feeling of combined anxiety and excitement, the questions that linger in our minds while falling asleep before a swell. In this part of the AEM Headless Content Author Journey, you can learn the (basic) concepts and terminology necessary to understand authoring content when using Adobe Experience Manager (AEM) as a Cloud Service as a Headless CMS. Creating a. Navigate to the folder holding your content fragment model. This ensures that content can be consumed across various channels, apps, or platforms in a headless mode. The following Documentation Journeys are available for headless topics. This server-to-server application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries and print it on terminal. Navigate to the folder holding your content fragment model. AEM Headless Client for JavaScript. 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). js implements custom React hooks return data from AEM GraphQL to the Teams. Doing so ensures that any changes to the template are reflected in the pages themselves. Navigate to Tools > General > Content Fragment Models. When you are done, select Save. Products such as Contentful, Prismic and others are leaders in this space. The language copy already includes the page: AEM treats this situation as an updated translation. Confirm with Create. This Web Component application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries and render a portion of UI, accomplished using pure JavaScript code. Understand how to build and customize experiences using AEM’s powerful features by exploring these development and deployment topics. This level of integration is the traditional headless model and allows your content authors to create content in AEM and deliver it heedlessly to any number of external services using GraphQL or to edit them from external services using the Assets API. Each guide builds on the previous, so it is recommended to explore them thoroughly and in order. View the source code on GitHub. In the previous document of the AEM headless translation journey, Learn about headless content and how to translate in AEM you learned the basic theory of what a headless CMS is and you should now: The build environment is Linux-based, derived from Ubuntu 18. Translating Headless Content in AEM. An example of this would be when a template author configures the Core Component list component in the template editor and decides to disable the options to build the list based on child pages. The Headless features of AEM go far. Content is added using components (appropriate to the content type) that can be dragged onto the page. For example, when the resolution goes below 1024. 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. Or in a more generic sense, decoupling the front end from the back end of your service stack. Headless is an example of decoupling your content from its presentation. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). The. Navigate to Tools, General, then select GraphQL. Adobe Experience Manager’s built-in Multi Site Manager and translation tools simplifies localizing your content. Secure and Scale your application before Launch. Experience translating content in a CMS. The AEM SDK. Adding a UI Mode. Assets. This journey is designed for the translation specialist persona, often referred to as the Translation Project Manager or TPM. Run the following command to build and deploy the entire project to AEM: $ mvn clean install -PautoInstallSinglePackage. Admin. Topics: Content Fragments View more on this topic. The diagram above depicts this common deployment pattern. You really don't invest much in the FE design in AEM , as the content is delivered only as JSON to be consumed by your services. Build from existing content model templates or create your own. Rich text with AEM Headless. This save action triggers the logic again to create and sync the sample assets, viewer preset CSS, and artwork. The integration allows you to. Preview URLs, using URL expressions, are set on the Content Fragment Model’s Properties. The UI caters for both mobile and desktop devices, though rather than creating two styles, AEM uses one style that works for all screens and devices. Documentation AEM AEM Tutorials AEM Headless Tutorial Using rich text with AEM Headless. To validate the package, click More -> Validate, In the modal dialog box that then appears, use the checkboxes to select the type (s) of validation and begin the validation by clicking Validate. js file displays a list of teams and their members, by using a list query. For example, to translate a Resource object to the corresponding Node object, you can. Chapter 4 of the AEM Headless tutorial covers the role of AEM Editable Templates in the context of AEM Content Services. This endpoint can use all Content Fragment Models from all Sites configurations (defined in the Configuration Browser ). In this phase of the AEM as a Cloud Service Migration Journey, you familiarize yourself with AEM as a Cloud Service. Select a component and you should be able to see the layout option listed as one of the component configurations available. 8 is installed. Manage GraphQL endpoints in AEM. Permission considerations for headless content. listeners) Undo / Redo; Page diff and Time Warp For the purposes of this getting started guide, you are creating only one model. Persisted queries. Integrate AEM Author service with Adobe Target. You create a workflow model to define the series of steps executed when a user starts the workflow. AEM’s Step 4 continue. In the previous document of the AEM headless journey, Getting Started with AEM Headless as a Cloud Service you learned the basic theory of what a headless CMS is and you should now: ; Understand the basics of AEM's headless features. The AEM Project Archetype generates a project primed for AEM’s integration with a Remote SPA, but requires a small, but important adjustment to auto-generated AEM page structure. UI modes appear as a series of icons on the left side of the toolbar. When the translated page is imported into AEM, AEM copies it directly to the language copy. You can Author targeted content using the Targeting mode of AEM. Unlike the traditional AEM solutions, headless does it without. Select Reinstall. There are two tabs: Components for viewing structure and performance information. $ cd aem-guides-wknd-spa. In AEM, the Digital Asset Management (DAM) aligns with the Atomic/Modular approach. Learn how AEM can go beyond a pure headless use case, with options for in-context authoring and experience management. Connectors User GuideDocumentation AEM AEM Tutorials AEM Headless Tutorial Using rich text with AEM Headless. Retrieving an Access Token. A CI/CD pipeline in Cloud Manager is a mechanism to build code from a source repository and deploy it to an environment. Pipelines are the only way to deploy code to the environments of AEM as a Cloud Service. AEM Headless APIs allow accessing AEM content from any client app. Learn headless concepts, how they map to AEM, and the theory of AEM translation. Learn guidelines for developing on AEM as a Cloud Service and about important ways in which it differs from AEM on premises and AEM in AMS. Targeting mode and the Target component provide tools for creating content for the experiences of your marketing activities. If the Enable Content Model Fields for Translation option is active,. Option 1: Centralize the logic and broadcast to the necessary components for example by using a util class as a pure object-oriented solution. The two only interact through API calls. Headless Authoring Journey - Start here for a guided journey through the powerful and flexible headless features of AEM, their capabilities, and how. In the file browser, locate the template you want to use and select Upload. We’ll guide you through configuring your React app to connect to AEM Headless APIs using. Headless SPA: In this design pattern, the SPA application is completely separated from AEM, and content from AEM is consumed through headless GraphQL APIs as needed. When a user starts a workflow, an instance is started; this is the corresponding runtime model, created when you Sync your. In this part of the AEM Headless Content Author Journey, you can learn the (basic) concepts and terminology necessary to understand authoring content when using Adobe Experience Manager (AEM) as a Cloud Service as a Headless CMS. Persisted queries. Persisted queries are GraphQL queries that are created and stored on the Adobe Experience Manager (AEM) as a Cloud Service server. In the New ContextHub Segment, enter a title for the. 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. Make no changes, select Save. Level 2: In addition to level one: The RemotePage component can be used to embed the external SPA into AEM where AEM content can be viewed in-context. Before you begin your own SPA. OSGi configuration. Persisted queries. Integrate AEM Author service with Adobe Target. What you will build. This journey lays out the requirements, steps, and approach to translate headless content in AEM. The full code can be found on GitHub. In the context of headless content management in AEM, think of a configuration as a workplace within AEM where you can create your Content Models, which define the structure of your future content and. Developer. Log in to AEM Author service as an Administrator. By adding the Adobe Target extension to Experience Platform Launch, you can use the features of Adobe Target on AEM web pages. 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. 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. When you select a device, the page changes to adapt to the viewport size. The Add Environment option may be disabled due to lack of permissions or depending on the licensed resources. The p4502 specifies the Quickstart runs on. Option 3: Leverage the object hierarchy by customizing and extending the container component. Create the site root page below the /content node: Set the cq:allowedTemplates property. Under Cloud Services, navigate to the Dynamic Media Configuration page, then open the configuration dialog box for your Dynamic Media - S7 configuration. With Experience Manager as a Cloud Service, your teams can focus on innovating instead of planning for product. Option 2: Share component states by using a state library such as NgRx. Headless implementation forgoes page and component management, as is traditional in. Select Save. It is aligned to the Adobe Experience Cloud and to the overall Adobe user interface guidelines. This React application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries. 1. headless=true we just leave this parameter as it is. Check the page status and if necessary, the state of the replication queue. The Java versions installed are Oracle JDK 8u202 and Oracle JDK 11. Headless Developer Journey. Topics: Content Fragments View more on this topic. The TagID is added to the content node’s cq:tags property and resolves to a node of type cq:Tag. Nothing to show {{ refName }} default. js app. 8. This document helps you understand headless content delivery, how AEM supports headless, and how. You can publish content to the preview service by using the Managed Publication UI. Customer Use Case & Implementation of AEM Headless in Use; Looking under the hood - Cloud Manager 2022; Integrate AEM & CIF framework to build a rich and immersive e-commerce experience; Build websites faster with AEM Headless and App BuilderHeadless Setup. After reading it, you can do the following: Authoring Environment and Tools.