Clients interacting with AEM Author need to take special care, as. frontend module is a webpack project that contains all of the SPA source code. In the Add Configuration drop-down list, select the configuration. Provide a Title and a Name for your configuration. So in this regard, AEM already was a Headless CMS. Client type. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. frontend. Learn how to use Adobe Experience Manager (AEM) as a Headless CMS (Content Management System), with features such as Content Fragment. Following AEM Headless best practices, the iOS application uses AEM GraphQL persisted queries to. apps and ui. Developer. 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. ’. So for the web, AEM is basically the content engine which feeds our headless frontend. The HTTP GET requests from the headless app to AEM’s GraphQL APIs must be configured to interact with the correct AEM service, as. A simple weather component is built. js app uses AEM GraphQL persisted queries to query adventure data. Using an AEM dialog, authors can set the location for the weather to be displayed. We are going to achieve below flow as part of this blog. SPA Editor. react project directory. The Angular app is developed and designed to be deployed with AEM’s SPA Editor, which maps Angular components to AEM components. Following AEM Headless best practices, the Next. In this chapter, we replace the Home view’s title, “Current Adventures”, which is hard-coded text in Home. Prerequisites. AEM Headless is a CMS solution from Experience Manager that allows structured content (Content Fragments) in AEM to be consumed by any app over HTTP using GraphQL. Learn. Start by creating the components that will make up the composite component, that is, components for the image and its text. GraphQL serves as the “glue” between AEM and the consumers of headless content. To annotate a PDF document, perform the following steps: Go to the Assets interface, navigate to the PDF document that you want to annotate. The React app should contain one instance of the <Page. The AEM Headless Client for JavaScript is used to execute the GraphQL persisted queries that power the app. AEM Headless as a Cloud Service. Prerequisites. Learn how to bootstrap a remote SPA for AEM SPA Editor compatibility. With this complete extensibility framework, built on Adobe’s infrastructure, developers can build custom microservices, extend, and integrate Adobe Experience Manager across. @adobe/aem-spa-page-model-manager: provides the API for retrieving content from AEM. See the NPM documentation for both frameworks for further details. Tap Home and select Edit from the top action bar. Since the SPA renders the component, no HTL script is needed. 2 - Integrate the SPA; 3 - Map SPA components; 4 - Navigation and routing; 5 - Custom component; 6 - Extend component; Remote SPA. Next, deploy the updated SPA to AEM and update the template policies. The ImageComponent component is only visible in the webpack dev server. 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. The examples below use small subsets of results (four records per request) to demonstrate the techniques. Learn to use modern front-end tools, like the Angular's CLI tool, to rapidly develop the. frontend. To support SPA Editor’s layout mode for editable areas in the SPA, we must integrate AEM’s Responsive Grid CSS into the SPA. 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. zip or greater This chapter is a continuation of the Create Project chapter, however to follow along all you need is a working SPA-enabled AEM project. Use the withMappable helper to. How to map aem component and react component. View the source code on GitHub. 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; Populates the React Edible components with AEM’s content; Wrap the React app with an initialized ModelManager, and render the React app. 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. Prerequisites. Learn how to develop author dialogs and Sling Models to extend the JSON model to populate a custom component. The AEM Project contains configuration and content that must be deployed to AEM. The full code can be found on GitHub. When rendered server side, browser properties such as window size and location are not present. This is a critical configuration when using SPA Editor, since only AEM Components that have mapped SPA component counterparts are render-able by the SPA. Understand how the source code for a Single Page Application (SPA) written in Angular can be integrated with an Adobe Experience Manager (AEM) Project. 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. AEM Headless as a Cloud Service Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). frontend. This tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. 2 - Integrate the SPA; 3 - Map SPA components; 4 - Navigation and routing; 5 - Custom component; 6 - Extend component; Remote SPA. I have an angular SPA app that we want to render in AEM dynamically. The srcset and sources use a custom setParams function to append the web-optimized delivery query parameter to the _dynamicUrl of the. Learn how to bootstrap a remote SPA for AEM SPA Editor compatibility. 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. AEM Headless applications support integrated authoring preview. WKND App project is the SPA to be integrated with AEM’s SPA Editor; Latest code. js app. The starting point of this tutorial’s code can be found on GitHub in the remote-spa-tutorial folder. AEM Headless as a Cloud Service. 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. 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. We’ll cover retrieving Content Fragment data from AEM’s GraphQL APIs and displaying it in the React app. The Android Mobile App. Overview; 1 - Configure AEM;. WKND App project is the SPA to be integrated with AEM’s SPA Editor; Latest code. 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. e ~/aem-sdk/author. This chapter is a continuation of the Create Project chapter, however to follow along all you need is a working SPA-enabled AEM project. adobe. In this chapter, we replace the Home view’s title, “Current Adventures”, which is hard-coded text in Home. Integration approach. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). . Read real-world use cases of Experience Cloud products written by your peersEdge Delivery enables you to use images available in AEM Assets repositories while authoring documents in Microsoft Word or Google Docs. 6+ Git aem-guides-wknd. This feature is core to the AEM Dispatcher caching strategy. 0 can enable direct in-content editing for specific areas or snippets in the app. react. The following are required to follow this quick setup: AEM as a Cloud Service Sandbox environment. 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. When you create an Adaptive Form, specify the container name in the Configuration Container field. The <Page> component has logic to dynamically create React components based on the. Authorization requirements. Following AEM Headless best practices, the Next. The AEM Headless SDK is available for various platforms: AEM Headless SDK for client-side browsers (JavaScript) AEM Headless SDK for server-side/Node. This component is able to be added to the SPA by content authors. Create the Sling Model. Developing SPAs for AEM. 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. In this optional continuation of the AEM Headless Developer Journey, you learn how Adobe Experience Manager (AEM) can combine headless delivery with traditional full-stack CMS features and how you can create editable SPAs using AEM’s SPA Editor framework, and integrate external SPAs, enabling editing capabilities as. This article presents important questions to consider when. 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. Deploying a SPA that interacts AEM in a headless manner involves hosting the SPA and making it accessible via a web browser. The srcset and sources use a custom setParams function to append the web-optimized delivery query parameter to the _dynamicUrl of the. A simple weather component is built. Following AEM Headless best practices, the React application uses AEM GraphQL persisted queries to. Below is a summary of how the Next. Overview; 1 - Configure AEM;. Developer. Below is a summary of how the Next. Requirements. 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. Click Tools > Assets > Connected Assets Configuration and provide the following values: A Title of the configuration. View example. Once the process completes, the sandbox program environment is active again. We have come up with a comprehensive step-by-step guide to help you out while working on AEM 6. apps and ui. This chapter is a continuation of the Create Project chapter, however to follow along all you need is a working SPA-enabled AEM project. Overview 1 - Create Project 2 - Integrate the SPA 3 - Map SPA components 4 - Navigation and routingOverview 1 - Content modeling 2 - AEM Headless APIs and React 3 - Complex components Overview Single-page app Web Component Mobile Server-to. AEM Headless APIs allow accessing AEM content from any. Implementing the Integration Levels. AEM Headless as a Cloud Service. Additionally, SPAs can be used within AEM while also using AEM to deliver content to additional endpoints headlessly. This blog will work for both AEM as an AMS and AEMaaCS. Following AEM Headless best practices, the React application uses AEM GraphQL persisted queries to. There are different tools in AEM available depending on what integration level you choose. The ui. The auto-generated AEM page must have its type changed to Remote SPA page , rather than a SPA page . A spa day is a fantastic treat to receive from your staff and I am so happy that you chose to spend your day with us at Willow Stream. To manage groups in AEM, navigate to Tools > Security > Groups. frontend module is a webpack project that contains all of the SPA source code. Persisted queries. This tutorial requires the following: AEM as a Cloud Service. Prerequisites. The sample React app has three main parts: The src/api folder contains files used to make GraphQL queries to AEM. Open a new command prompt and. This tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. The common use case for server-to-server AEM Headless apps is to sync Content Fragment data from AEM into other systems, however this application is intentionally. The ui. 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 AEM Headless SDK is set of libraries that can be used by clients to quickly and easily interact with AEM Headless APIs over HTTP. 0 or later. AEM Headless Web Component /JS deployments are pure JavaScript apps that run in a web browser, that consume and interact with content in AEM in a headless manner. Following AEM Headless best practices, the Next. The execution flow of the Node. Below is a summary of how the Next. Learn how to add editable container components to a remote SPA that allow AEM authors drag and drop components into them. Prerequisites. The full code can be found on GitHub. AEM 6. The auto-generated AEM page must have its type changed to Remote SPA page , rather than a SPA page . Using a REST API. The following are required to follow this quick setup: AEM as a Cloud Service Sandbox environment. Create the Sling Model. The full code can be found on GitHub. The srcset and sources use a custom setParams function to append the web-optimized delivery query parameter to the _dynamicUrl of the image, so change the. DAM Users “DAM”, in this context, stands for Digital Asset Management. Below is a summary of how the Next. Prerequisites. The full code can be found on GitHub. Overview; 1 - Configure AEM;. Here, the developer controls the app by enabling authoring rights in selected application areas. This server-to-server application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries and print it on terminal. The following are required to follow this quick setup: AEM as a Cloud Service Sandbox environment. The AEM Headless Client for JavaScript is used to execute the GraphQL persisted queries that power the app. Open the Program containing the AEM as a Cloud Service environment to integrate set up the Service Credentials for. The AEM Headless client, provided by the AEM Headless. This page explains how you can integrate your fluid grid or an existing grid implementation (such as Bootstrap) into your AEM application. The ui. Access the local Sites deployment at [sites_servername]:port. AEM container components use policies to dictate their allowed components. 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 Redirect URL box, add the URL copied in a previous step (Step 8) and click Save. It is simple to create a configuration in AEM using the Configuration Browser. A simple weather component is built. Courses Recommended courses Tutorials Certification Events Instructor-led training Browse content library View all learning options. The AEM Headless SDK is available for various platforms: AEM Headless SDK for client-side browsers (JavaScript) AEM Headless SDK for server-side/Node. Prerequisites. In this chapter, a new AEM project is deployed, based on the AEM Project Archetype. AEM Basics Tutorials by framework. The AEM Headless SDK is available for various platforms: AEM Headless SDK for client-side browsers (JavaScript) AEM Headless SDK for server-side/Node. You receive notification that the de-hibernation process has started and are updated with the progress. 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. With a traditional AEM component, an HTL script is typically required. Dynamic navigation is implemented using Angular routes and added to an existing Header component. 6 A OM ROGRA UIDE For Health Care Professionals and Families How Do I Apply? Complete the At Home Program Application form with the assistance of a physician. 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; Populates the React Edible components with AEM’s content; Wrap the React app with an initialized ModelManager, and render the React app. 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. A majority of the SPA. This section covers the original editor, primarily accessed from the Assets console. Welcome to the multi-part tutorial for developers looking to augment an existing Remote SPAs with editable AEM content using AEM SPA Editor. The single-page app or single-page experience then has full control over how to layout and present this content. Create the Sling Model. AEM provides a Translation Integration Framework for headless content, allowing Content Fragments and supporting assets to be easily translated for use across locales. Deploying a SPA that interacts AEM in a headless manner involves hosting the SPA and making it accessible via a web browser. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). 5 also includes several digital experience platform features such as GraphQL support, built-in Adobe Target integration, and a new user interface for the AEM Screens device. Next Steps 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. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). The full code can be found on GitHub. 0. The React app is developed and designed to be deployed with AEM’s SPA Editor, which maps React components to AEM components. Headful and Headless in AEM. By leveraging AEM Headless APIs, you can retrieve content, assets, and data from your AEM instance and use them to power your React application. Anatomy of the React app. The approach I am thinking of is, all fields on the SPA app can be rendered in XML/JSON via Web API. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Learn how to create a custom weather component to be used with the AEM SPA Editor. Stop the webpack dev server and from the root of the project, deploy the changes to AEM using your Maven skills: $ cd aem-guides-wknd-spa $ mvn clean install -PautoInstallSinglePackage From the AEM Start screen navigate to Tools > Templates >. The full code can be found on GitHub. Author in-context a portion of a remotely hosted React application. The first step to implement data integration to send Adaptive Form to a database, is to identify and configure data sources that store information you want to use in Adaptive Forms. The build will take around a minute and should end with the following message: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. Install the AEM SDK, add sample content and deploy an application that consumes content from AEM using its GraphQL APIs. 0 can enable direct in-content editing for specific areas or snippets in the app. Front end developer has full control over the app. Be able to define your project in terms of scope. The completed SPA, deployed to AEM, can be dynamically authored with traditional in. The completed SPA, deployed to AEM, can be dynamically authored with traditional in-line. 5 has enhanced its digital customer experience services by providing better content personalization, content fragment enhancements, and easier authoring. SPA Editor. A majority of the SPA. Understanding how to add properties and content to an existing component is a powerful technique to expand the capabilities of an AEM SPA Editor implementation. The below video demonstrates some of the in-context editing features with the WKND SPA. Modified on Mon, 17 Oct 2022 at 09:29 AM. Learn about the various deployment considerations for AEM Headless apps. Architecting a Headless Content Management Application. Below is a summary of how the Next. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. 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. 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. Experience Fragments are fully laid out. apps and ui. The ui. Persisted queries. js app is built, how it connects to AEM Headless to retrieve content using GraphQL persisted queries, and how that data is presented. Two modules were created as part of the AEM project: ui. 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. Integration approach. Deploying a SPA that interacts AEM in a headless manner involves hosting the SPA and making it accessible via a web browser. In Image 2, you can see SPA hosted outside of AEM. The Angular app is developed and designed to be. The React WKND App is used to explore how a personalized Target. js (JavaScript) AEM Headless SDK for Java™. Persisted queries. Congratulations, you have updated the SPA and explored the integration with AEM! You now know two different approaches for developing the SPA against the AEM JSON model API using a webpack dev server. Wrap the React app with an initialized ModelManager, and render the React app. This tutorial explains,1. Remote DAM URL is the URL of the Assets location in the format [assets_servername]: [port]. Deploying a SPA that interacts AEM in a headless manner involves hosting the SPA and making it accessible via a web browser. What the authors are willing to author, how involved do they get with content, and how involved do they want to get with crafting experiences? SPA - single page. I have an angular SPA app that we want to render in AEM dynamically. The <Page> component has logic to dynamically create React components based on the. 3. Front-end Apps: Front-end apps like, SPA (Single Page Applications), Mobile Apps, JavaScript Apps, consume Headless adaptive forms (the JSON Form Representation) and render the form on a client. React App. Explore how to combine headful and headless delivery and learn how you can create editable SPAs using AEM’s SPA Editor framework. This Android application demonstrates how to query content using the GraphQL APIs of AEM. Learn how to extend the JSON Model for an existing Core Component to be used with the AEM SPA Editor. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Experience Manager Assets lets you add comments to a PDF document. Persisted queries. If it is possible that I can render my app dynamic content in AEM using WebAPI. SPA Editor. Created for: Beginner. Requirements. 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. The following are required to follow this quick setup: AEM as a Cloud Service Sandbox environment. Courses Recommended courses Tutorials Certification Events Instructor-led training Browse content library View all learning options. Learn how to integrate AEM Headless with Adobe Target, by exporting AEM Content Fragments to Adobe Target, and use them to personalize headless experiences using the Adobe Experience Platform Web SDK’s alloy. The srcset and sources use a custom setParams function to append the web-optimized delivery query parameter to the _dynamicUrl of the image, so change the. Headless AEM. This chapter is a continuation of the Create Project chapter, however to follow along all you need is a working SPA-enabled AEM project. Map the SPA URLs to AEM Pages. First, review AEM’s SPA npm dependencies for the React project, and the install them. Persisted queries. This chapter walks you through the steps to integrate the persisted queries with the WKND client application (aka WKND App) using HTTP GET requests within existing React components. The following tools should be installed locally: JDK 11;. Depending on the client and how it is deployed, AEM Headless deployments have different considerations. It also provides an optional challenge to apply your AEM Headless learnings, coding expertise to enhance the WKND client application. Integration approach. AEM Headless supports a offset/limit and cursor-based pagination queries to smaller subsets of a larger result set. Level 1: Content Fragments and. Headless AEM is a Adobe Experience Manager setup in which the frontend. js app uses AEM GraphQL persisted queries to query. There are two editors for authoring Content Fragments. Below is a summary of how the Next. js app is built, how it connects to AEM Headless to retrieve content using GraphQL persisted queries, and how that data is presented. jar. AEM Headless single-page app (SPA) deployments involve JavaScript-based applications built using frameworks such as React or Vue, that consume and. frontend. The sample React app has three main parts: The src/api folder contains files used to make GraphQL queries to AEM. js (JavaScript) AEM Headless SDK for Java™. The common use case for server-to-server AEM Headless apps is to sync Content Fragment data from AEM into other systems, however this application is intentionally. Integration approach. The HTTP GET requests from the headless app to AEM’s GraphQL APIs must be configured to interact with the correct AEM service, as. The I18n class provides the get method that retrieves localized strings from the Adobe Experience Manager (AEM) dictionary. It will allow us to create AEM forms and integrate with Form Data Model. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). js app is built, how it connects to AEM Headless to retrieve content using GraphQL persisted queries, and how that data is presented. On this page. The examples that follow demonstrate how to obtain and use the class objects in code. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. frontend. This is the same framework used to translate other AEM content, such as Pages, Experience Fragments, Assets, and Forms. The com. The approach I am thinking of is, all fields on the SPA app can be rendered in XML/JSON via Web API. AEM container components use policies to dictate their allowed components. 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. SPA application will provide some of the benefits like. Create your first React Single Page Application (SPA) that is editable in Adobe Experience Manager AEM with the WKND SPA. The following list links to the relevant resources. $ cd aem-guides-wknd-spa. AEM Headless SPA deployments. The completed SPA, deployed to AEM, can be dynamically authored with traditional in-line editing tools of. Now even AEM as a cloud service has react as inbuilt program into its archetype as part of Adobe’s best practices known to its Headless CMS architecture. Learn how to add editable container components to a remote SPA that allow AEM authors drag and drop components into them. Below is a summary of how the Next. The AEM Headless SDK is available for various platforms: AEM Headless SDK for client-side browsers (JavaScript) AEM Headless SDK for server-side/Node. In this chapter, we replace the Home view’s title, “Current Adventures”, which is hard-coded text in Home. The common use case for server-to-server AEM Headless apps is to sync Content Fragment data from AEM into other systems, however this application is intentionally. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). 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. This tutorial uses a simple native Android Mobile App to consume and display Event content exposed by AEM Content Services. The walkthrough is based on standard AEM functionality and the sample WKND SPA Project app. The DAM Users is an out of the box group in AEM that can be used for “everyday” users that manage digital. The ui. A pipeline can be triggered by an event, such as a pull request from a source code repository (that is, a code change), or on a regular schedule to match a release cadence. This is the same framework used to translate other AEM content, such as Pages, Experience Fragments, Assets, and Forms. With a traditional AEM component, an HTL script is typically required. then my scenario would be feasible This tutorial walks through the implementation of a Angular application for a fictitious lifestyle brand, the WKND. When authorizing requests to AEM as a Cloud Service, use. To support SPA Editor’s layout mode for editable areas in the SPA, we must integrate AEM’s Responsive Grid CSS into the SPA. js with a fixed, but editable Title component. Tap the Technical Accounts tab. Learn how to add editable fixed components to a remote SPA. View the source code on GitHub. js (JavaScript) AEM Headless SDK for. Courses Recommended courses Tutorials Certification Events Instructor-led training Browse content library View all learning options. In this chapter, we replace the Home view’s title, “Current Adventures”, which is hard-coded text in Home. then my scenario would be feasible See full list on experienceleague. This React application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries. html with . Experience League. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. 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. Below is a summary of how the iOS application is built, how it connects to AEM Headless to retrieve content using GraphQL persisted queries, and how that data is presented. The Story So FarThis simple React app uses the AEM Headless SDK to query AEM Headless APIs for an Adventure content, and displays the web-optimized image using img element with srcset and picture element. Select the Cloud Services tab. frontend. Open a new command prompt and. supports headless CMS scenarios where external client applications render experiences using content managed in AEM.