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. Nothing to show {{ refName }} default. js initializes and exports the AEM Headless Client used to communicate with AEM; src/api/usePersistedQueries. In the file browser, locate the template you want to use and select Upload. Certain points on the SPA can also be enabled to allow limited editing. The classic UI was deprecated with AEM 6. Add Adobe Target to your AEM web site. The Configuration Browser provides a generic configuration API, content structure, resolution mechanism for configurations in AEM. It is fully supported by Adobe, and it continues to be enhanced and expanded. 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. Get to know how to organize your headless content and how AEM’s translation tools work. 1. Adobe Developer App Builder extends AEM capabilities providing dynamic content without load time lag and on single-page apps. To view the results of each Test Case, click the title of the Test Case. The Story So Far. Tutorials. Following AEM Headless best practices, the React application uses AEM GraphQL persisted queries to query adventure. Option 3: Leverage the object hierarchy by customizing and extending the container component. Experience translating content in a CMS. Run the following command to build and deploy the entire project to AEM: $ mvn clean install -PautoInstallSinglePackage. The React WKND App is used to explore how a personalized Target. The Configuration Browser provides a generic configuration API, content structure, resolution mechanism for configurations in AEM. The number of available/used environments is displayed in parentheses behind the environment type. This opens a side panel with several tabs that provide a developer with information about the current page. AEM’s Content Services leverages traditional AEM Pages to compose headless REST API endpoints, and AEM Components define, or reference, the content. AEM Headless Content Author Journey. Preview URLs, using URL expressions, are set on the Content Fragment Model’s Properties. In the file browser, locate the template you want to use and select Upload. You also learn how you can create editable SPAs using AEM’s SPA Editor framework, and integrate external SPAs, enabling editing capabilities as required. A classic Hello World message. To view and edit the properties page for an asset, follow these steps: Click the View Properties option from the quick actions on the asset tile in card view. The two lists below reflect the AEM as a Cloud Service OSGi configuration surface, describing what customers can configure. js initializes and exports the AEM Headless Client used to communicate with AEM; src/api/usePersistedQueries. Check both AEM and Sling plugins. An implementation of the standard GraphiQL IDE is available for use with the GraphQL API of Adobe Experience Manager (AEM). Remember that headless content in AEM is stored as assets known as Content Fragments. In this phase of the AEM as a Cloud Service Migration Journey, you familiarize yourself with AEM as a Cloud Service. AEM Headless Client for JavaScript. This exceptional AEM GEMs session features two speakers who are operating AEM as customers. User. For the purposes of this getting started guide, we will only need to create one. AEM as a Cloud Service lets you capitalize on the AEM applications in a cloud-native way, so that you can: Scale your DevOps efforts with Cloud Manager: CI/CD framework, autoscaling, API connectivity, flexible deployment modes, code quality gates, service delivery transparency, and guided updates. Tap or click Create -> Content Fragment. The following AEM features are not yet supported by the SPA Editor: Target mode; ContextHub; Inline image editing; Edit configs (eg. UI modes appear as a series of icons on the left side of the toolbar. The translation rules described in this document apply to Content Fragments only if the Enable Content Model Fields for Translation option has not been activated at the translation integration framework configuration level. Introduction. The three tabs are: Components for viewing structure and performance information. Before calling any method initialize the instance with GraphQL endpoint, GraphQL serviceURL and auth if needed Functions getToken(credentialsFilePath) ⇒ Promise. Experience Fragments are fully laid out. Get started with AEM headless translation. The full code can be found on GitHub. Content Models are structured representation of content. One of the major goals for AEM as a Cloud Service is to allow experienced customers (having used AEM either on-premise or in the context of the Adobe Managed Services) to migrate to AEM as a Cloud Service as. A modern content delivery API is key for efficiency and performance of Javascript-based frontend applications. 0 versions enable the GraphQL runtime platform to expose the Content Fragments through GraphQL API. Unlike the traditional AEM solutions, headless does it without. To install. The authoring environment of AEM provides various mechanisms for organizing and editing your content. Tap or click the Create button and select Create ContextHub Segment. AEM offers an out of the box integration with Experience Platform Launch. 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. 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. For an end-to-end example of building your own single-page application that is editable with AEM starting with project setup through application routing, see the WKND SPA Tutorials: Getting Started with the AEM SPA Editor and Angular. The build will take around a minute and should end with the following message:As our social media devices are put on sleep mode and reading lamps are switched off, the wind grows in intensity, rattling our windows through the night. The following video highlights some of the top features of the Page Editor. AEM Best Practices Analyzer for on premise and AMS environments; 2022. Download the latest version of Tough Day 2 from the Adobe Repository. Design dialog will change the content at the template level. Add a UI mode to group related ContextHub modules. Headless Developer Journey. AEM GEMs feature - Customer Use Case & Implementation of AEM Headless in Use. The following configurations are examples. AEM’s GraphQL APIs for Content Fragments. In the future, AEM is planning to invest in the AEM GraphQL API. The AEM CORS OSGi configuration factory defines the allow criteria for accepting CORS HTTP requests. AEM's headless CMS features allow you to employ many technologies to provide content across all channels. Navigate to the folder holding your content fragment model. For authentication, the third-party service must retrieve an Access Token that can then be used in the GraphQL Request. This end-to-end tutorial continues the basic tutorial that covered the fundamentals of Adobe Experience Manager (AEM) Headless and GraphQL. Click OK. Errors to see any problems occurring. To define your new segment: After accessing the segments, navigate to the folder where you would like to create the segment. These can then be edited in place, moved, or deleted. With a headless implementation, there are several areas of security and permissions that should be addressed. Trigger an Adobe Target call from Launch. Everything depends on the browser implementation of its headless mode. Choose a tag to compare. Target libraries are only rendered by using Launch. Following AEM Headless best practices, the React application uses AEM GraphQL persisted queries to. Following AEM Headless best practices, the React application uses AEM GraphQL persisted queries to. Authoring for AEM Headless as a Cloud Service - An Introduction. Make no changes, select Save. 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. The full code can be found on GitHub. Created for: Beginner. Often, these headless consumers may need to authenticate to AEM in order to access protected content or actions. 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 main difference consists in enabling the Adobe Experience. Open the Templates Console (via Tools -> General) then navigate to the required folder. Manage GraphQL endpoints in AEM. The src/components/Teams. Editing Page Content. After each deployment, my modified value gets overwritten even though I've set mode="update". We’ll guide you through configuring your React app to connect to AEM Headless APIs using the AEM Headless SDK. 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 Title for your configuration. The following Documentation Journeys are available for headless topics. AEM’s Step 4 continue. Learn about the concepts and. 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. Last update: 2023-06-27. 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. The Story So Far. For example, to translate a Resource object to the corresponding Node object, you can. Tap Home and select Edit from the top action bar. 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. The following configurations are examples. You can personalize content and pages, track conversion rates, and uncover which ads drive traffic. 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. 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. AEM HEADLESS SDK API Reference Classes AEMHeadless . The Create new GraphQL Endpoint dialog box opens. Headless Setup. Following AEM Headless best practices, the React application uses AEM GraphQL persisted queries to. Products such as Contentful, Prismic and others are leaders in this space. Click Install New Software. AEM Forms as a Cloud Service offers a user-friendly editor to create Headless Adaptive Forms. The AEM CORS OSGi configuration factory defines the allow criteria for accepting CORS HTTP requests. The tagged content node’s NodeType must include the cq:Taggable mixin. Learn about the concepts and mechanics of. Each Template presents you with a selection of components available for use. react. Each environment contains different personas and with different needs. 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. Log into AEM and from the main menu select Tools -> General -> Configuration Browser. Each guide builds on the previous, so it is recommended to explore them thoroughly and in order. The author name specifies that the Quickstart jar starts in Author mode. Tests for running tests and analyzing the results. The response of a GET request can be cached at the dispatcher and CDN layers, ultimately improving the performance of the requesting client. AEM offers the flexibility to exploit the advantages of both models in. 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. The Java versions installed are Oracle JDK 8u202 and Oracle JDK 11. This server-to-server application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries and print it on terminal. For a third-party service to connect with an AEM instance it must have an. Selecting Timewarp from the mode menu brings up a date selection. 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. The implementation of the tagging framework in AEM allows management of tags and tag content using the JCR API . 0, Adobe Experience Manager (AEM) introduced a new user interface referred to as the touch-enabled UI (also known simply as the touch UI ). Configure the Translation Connector. 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. Provides link to other generic actions; such as Search, Help, Experience Cloud Solutions, Notifications, and User Settings. Install AEM. Learn about headless content and how to translate it in AEM. Select Edit from the edit mode selector in the top right of the Page Editor. Enable developers to add automation to. Select Edit from the edit mode selector in the top right of the Page Editor. Developer. To install. Select a component and you should be able to see the layout option listed as one of the component configurations available. 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. Headless mode is excellent if you prefer content to be delivered as an API and content editing is more form based than. Tap or click the folder you created previously. These remote queries may require authenticated API access to secure headless content delivery. In this part of the AEM Headless Developer Journey, learn about headless technology and why you would use it. Option 3: Leverage the object hierarchy by customizing and extending the container component. What you need is a way to target specific content, select what you need and return it to your app for further processing. Set up Dynamic Media. Persisted queries. The AEM project is bootstrapped with a very simple starting point for the Angular SPA. Opening the multi-line field in full screen mode enables additional formatting tools like. Rich text with AEM Headless. Or in a more generic sense, decoupling the front end from the back end of your service stack. AEM’s Content Services leverages traditional AEM Pages to compose headless REST API endpoints, and AEM Components define, or reference, the content to expose on these. ; Know the prerequisites for using AEM's headless features. Persisted queries. 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. js app. 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. 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. Following AEM Headless best practices, the React application uses AEM GraphQL persisted queries to. Compare. 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. Headful and Headless in AEM; Headless Experience Management. Open the required model for Edit; use either the quick action, or select the model and then the action from the toolbar. If Cloud Manager detects that there is a newer version of AEM available than what was last deployed with the pipeline, it shows the Update Available status for the environment. Connectors User GuideDocumentation AEM AEM Tutorials AEM Headless Tutorial Using rich text with AEM Headless. When this content is ready, it is replicated to the publish instance. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). Tests for running tests and analyzing the. Certain points on the SPA can also be enabled to allow limited editing. Connectors User GuideIn 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. Tap or click the folder that was made by creating your configuration. What is a headless CMS? Headless architecture offers a new way of presenting AEM content. The p4502 specifies the Quickstart runs on. ; Be aware of AEM's headless. This headless CMS. The AEM CORS OSGi configuration factory defines the allow criteria for accepting CORS HTTP requests. This server-to-server application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries and print it on terminal. The most common deployment pattern with AEM headless applications is to have the production version of the application connect to an AEM Publish service. The recommended method for configuration and other changes is: Recreate the required item (i. Creating a. AEM Preview is the service that mimics AEM Publish in behavior, but has content published to it for preview or review purposes. Option 1: Centralize the logic and broadcast to the necessary components for example by using a util class as a pure object-oriented solution. In this part of the AEM Headless Developer Journey, you will understand the steps to implementing your first headless experience in AEM including planning considerations. Open CRXDE Lite in your browser. Understand headless translation in AEM; Get started with AEM headless. This journey lays out the requirements, steps, and approach to translate headless content in AEM. headless=true we just leave this parameter as it is. A headless CMS is therefore responsible for the (backend) content management services, together with the mechanisms allowing the (frontend) applications to access that content. Sling offers an Adapter pattern to conveniently translate objects that implement the Adaptable interface. Once open the model editor shows: left: fields already defined. The author name specifies that the Quickstart jar starts in Author mode. The author name specifies that the Quickstart jar starts in Author mode. Select the location and model you wish. Select the language root of your project. Here you can specify: Name: name of the endpoint; you can enter any text. Welcome to the documentation for developers who are new to Adobe Experience Manager. Start the AEM jar file directly and adding these options, for example, with the following command line: java -Xdebug -Xrunjdwp:transport=dt_socket,address=58242,suspend=n,server=y -Xmx1024m -jar cq. These are defined by information architects in the AEM Content Fragment Model editor. The creation of a Content Fragment is presented as a dialog. Adobe Experience Manager’s built-in Multi Site Manager and translation tools simplifies localizing your content. OSGi Configuration API. The Page Editor’s tools and capabilities are accessed from the Page Editor’s UI toolbar. 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. The Configuration Browser provides a generic configuration API, content structure, resolution mechanism for configurations in AEM. Adobe Experience Manager projects can be implemented in both headful and headless models, but the choice is not binary. Headless implementations enable delivery of experiences across platforms and channels at scale. An OSGi configuration for the Referrer Filter is needed to enable access to the GraphQL endpoint for headless applications over HTTP POST. AEM Headless client deployments take many forms; AEM-hosted SPA, external SPA, web site, mobile app, or even server-to-server process. The full code can be found on GitHub. AEM Best Practices Analyzer for on premise and AMS environments; 2022. In the previous document of the AEM headless translation journey, Get started with AEM headless translation you learned how to organize your headless content and how AEM’s translation tools work and you should now: Understand the importance. Translation rules identify content in AEM to be extracted for translation. Along with the configrations and list of dependencies required to render the form, the directory includes the following important content:Developing. 5 Forms; Get Started using starter kit. -agentlib:jdwp=transport=dt_socket,server=y,suspend=n,address=5005 this line directly contains all the information needed to start. Adobe first introduced its headless capabilities in Adobe Experience Manager at the Adobe Developers Live conference for digital experience developers in 2021 and customers. You can Author targeted content using the Targeting mode of AEM. Icons are references from the Coral UI icon library. Typical AEM as a Cloud Service headless deployment. Understand how the AEM GraphQL API works. Adding a UI Mode. 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. 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. Note: Make sure Include Production Code on Author is unchecked. 0. This ensures that content can be consumed across various channels, apps, or platforms in a headless mode. For the purposes of this getting started guide, we only need to create one folder. Then Getting Started with AEM Headless as a Cloud Service described AEM Headless in the context of your own project. Integrating Adobe Target on AEM sites by using Adobe Launch. Secure and Scale your application before Launch. js. The integration allows you to. 4 service pack 2. Template authors must be members of the template-authors group. js file displays a list of teams and their members, by using a list query. Once uploaded, it appears in the list of available templates. Learn how to create a SPA using the React JS framework with AEM's SPA Editor. Your AEM application may consist of many Models, Services, Servlets, and Schedulers you have the . AEM Author service requires an OSGi configuration to be added to the AEM Author service’s run mode folder, and does not use a Dispatcher configuration. We’ll see both render props components and React Hooks in our example. The Story so Far. Clicking the name of your test in the Result panel shows all details. For authoring AEM content for Edge Delivery Services, click here. Objective. 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. 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. AEM employs advanced digital marketing tools to improve your user's experience and gain insight into your visitors. Created for: Developer. AEM Headless as a Cloud Service. This article builds on these so you understand how to create your own Content Fragment Models for your AEM headless. 6. Headless and AEM; Headless Journeys. 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. You also learn how you can create editable SPAs using AEM’s SPA Editor framework, and integrate external SPAs, enabling editing capabilities as required. A list of OSGi configurations whose properties may be configured, but must abide by the indicated validation rules. In addition to offering robust tools to create, manage, and deliver traditional webpages in the full-stack fashion, AEM also offers the ability to author self-contained selections of content and serve them headlessly. There are two tabs: Components for viewing structure and performance information. 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. For this reason, each pipeline is associated with a particular AEM version. Navigate to Tools, General, then open Content Fragment Models. Page Templates - Static. To get your AEM headless application ready for. The power of AEM allows it to deliver content either headlessly, full-stack, or in both. Create the design page for the site. The two only interact through API calls. AEM is considered a Hybrid CMS. The paste-as-Microsoft-Word (paste-wordhtml) mode can be further configured so that you can explicitly define which styles are allowed when pasting in AEM from another program, such as Microsoft® Word. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). AEM provides several tools and resources for creating workflow models, developing workflow steps, and for programmatically interacting with workflows. Templates are used at various points in AEM: When you create a page, you select a template. The auto-generated AEM page must have its type changed to Remote SPA page , rather than a SPA page . Under Cloud Services, navigate to the Dynamic Media Configuration page, then open the configuration dialog box for your Dynamic Media - S7 configuration. In the Location field, copy the installation URL. Confirm with Create. In previous releases, a package was needed to install the GraphiQL IDE. About Smart Imaging with client-side Device Pixel Ratio (DPR) The current Smart Imaging solution uses user agent strings to determine the type of device (desktop, tablet, mobile, and so on) that is being used. Following AEM Headless best practices, the React application uses AEM GraphQL persisted queries to. Once we have the Content Fragment data, we’ll integrate it into your React app. 5 is a flexible tool for the headless implementation model by offering three powerful services: Content Models. Formerly referred to as the Uberjar; Javadoc Jar - The. This grid can rearrange the layout according to the device/window size and format. AEM 6. To install. This can have several causes, most often the cache (either your local browser or the Dispatcher), though it can sometimes be an issue with the replication queue. AEM GraphQL API requests. 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. : Guide: Developers new to AEM and headless: 1. 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 editing pages in AEM, several modes are available, including Developer mode. CORSPolicyImpl~appname-graphql. Created for: Beginner. listeners) Undo / Redo; Page diff and Time Warp For the purposes of this getting started guide, you are creating only one model. The sample React app has three main parts: The src/api folder contains files used to make GraphQL queries to AEM. AEM is considered a Hybrid CMS. The software is continuously enhanced to meet. cors. 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. This interface provides a generic adaptTo () method that translates the object to the class type being passed as the argument. When using an out-of-the-box implementation, the process described above should be sufficient to generate the Target Offer from the Experience Fragment and. These remote queries may require authenticated API access to secure headless content. For example, when the resolution goes below 1024. Understand how to build and customize experiences using AEM’s powerful features by exploring these development and deployment topics. Component mapping enables users to make dynamic updates to SPA components within the AEM SPA Editor, similar to traditional AEM authoring. In the Add Configuration drop-down list, select the configuration. Typical AEM as a Cloud Service headless deployment. Developers and business users have the freedom to create and deliver content using headless or headful models out of the box, letting them structure and. An introduction to the headless features of Adobe Experience Manager as a Cloud Service, and how to author content for your project. Looking for a hands-on. When a user starts a workflow, an instance is started; this is the corresponding runtime model, created when you Sync your. Content is added using components (appropriate to the content type) that can be dragged onto the page. 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. 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. Content Fragments are editorial content, with definition and structure, but without additional visual design and/or layout. React has three advanced patterns to build highly-reusable functional components. 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. Single page applications (SPAs) can offer compelling experiences for website users. With this quick start guide, learn the essentials of AEM 6. For authoring AEM content for Edge Delivery Services, click here. Tap or click Create. When constructing a Commerce site the components can, for example, collect and render information from the. By adding the Adobe Target extension to Experience Platform Launch, you can use the features of Adobe Target on AEM web pages. Organize and structure content for your site or app. AEM lets you have a responsive layout for your pages by using the Layout Container component. The p4502 specifies the Quickstart runs on port 4502. Contribute to adobe/aem-headless-client-js development by creating an account on GitHub. The default AntiSamy. 2. Last update: 2023-09-25. The journey may define additional personas with which the translation specialist must interact, but the point-of. 0. ” Tutorial - Getting Started with AEM Headless and GraphQL. In this phase of the AEM as a Cloud Service Migration Journey, you familiarize yourself with AEM as a Cloud Service. Developing. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). AEM Preview is the service that mimics AEM Publish in behavior, but has content published to it for preview or review purposes. Once open the model editor shows: left: fields already defined. 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. In Preview mode, Sidekick includes a Devices drop-down menu that you use to select a device. A Content author uses the AEM Author service to create, edit, and manage content. The AEM emulator framework: Provides content authoring within a simulated User Interface (UI), for example, a mobile device or.