SPA Editor Overview |Adobe Experience Manager (2023)

Single -Page applications (spas) can offer site users attractive experiences.Developers want to be able to create websites with SPA structures, and authors want to work perfectly in AEM for a website that was created with these structures.

The SPA editor offers a comprehensive SPAS solution in AEM.This page offers an overview of how the SPA support in AEM is structured, how the SPA editor works and how the SPA structure and AEM are synchronized.

introduction

Locations that have been created with ordinary SPA structures such as reaction and angle load, which dynamic JSON content is created, do not offer the required HTML structure for the side editor of AEM in order to set machining control.

In order to activate the SPAS processing within the AEM, an assignment between the SPA edition and the AEM repository content model is required to save changes to the content.

The SPA support in AEM has a thin JS layer that interacts with the Spa -JS code if they are loaded in the side editor, with which events can be sent and the location for processing control elements can be activated,to enable editing in the context.This function is based on the Content Services API Endpoint Concept, as the SPA content has to be loaded via content services.

You can find more information about Spas in AEM in the following documents:

• Blueprint de SpaFor the technical requirements of a spa
• Introduction with Spas in AEMFor a short tour through a simple spa

Project

The side component of a SPA does not provide the HTML elements of its children's components via the JSP or HTL are then added to the page according to this structure.This behavior distinguishes the initial body composition from the counterparts that do not come from the spa.

Page model management

The resolution and management of the side model are delegated to a deliveryPagemodelBibliothek. The SPA must use the side model library to initialize and write by the SPA editor.Components AEM-React-EditibleNPM.The side model is an interpreter between AEM and the spa and should therefore always be present.If the page is written, an additional library iscq.authoring.pagemodel.messagingIt should be added to activate communication with the side editor.

If the component of the SPA -Herdar page is available on the side component of the page, there are two options to create themcq.authoring.pagemodel.messagingCustomer library category available:

• If the model can be processed, add the page guideline.
• Or add the categories with the addCustomFoterlibs.html.

For every function in the exported model, the SPA creates a real component that does it
Rendering.The model shown as JSON is then rendered in a container using component assignments.

Communication data type

If thatcq.authoring.pagemodel.messagingThe category is added to the page.She sends a message to the side editor to set the JSON communication data type.If the communication data type is defined as JSON, Get requirements communicate with the final points of the Sling model A component.After an update has taken place in the side editor, the JSON presentation of the updated component is sent to the Seit models library.The side library with side models informs the update spa.

workflow

You can understand the flow of the interaction between the SPA and the AEM, which thinks about the SPA editor as a mediator between the two.

• Communication between the side editor and the SPA is created with JSON instead of HTML.
• The side editor offers the latest version of the page model in the spa via the iframe and messaging -API.
• The Page Model Manager model notifies the editor, which is ready for editing and hands over the page model as a JSON structure.
• The publisher does not change or attack the gomp structure of the created page instead of providing the latest page model.

Workflow des Basis -Spa -Editors

Note the main elements of the SPA editor, the high -ranking workflow to edit a spa within the AEM, appears to the author as follows.

1. Spa editor loads.

2. The spa is loaded onto a separate frame.

3. The SPA calls for the JSON content and renders the customer -sided components.

4. The SPA editor recognizes rendered components and creates overlays.

5. The author clicks overlapping and shows the component processing of toolbar.

6. The SPA editor exists on expenses with a posting request to the server.

7. The SPA editor calls the updated JSON to the SPA editor, which is sent to the SPA with a cathedral event.

8. The spa makes the component in question and updates its gift.

Customer shipment processing flow

This is a more detailed view of the customer server interaction when editing a SPA.

1. The SPA boot and calls for the Sling export pages model.

2. The exporter of the Sling model calls for the functions of which the repository page consists.

3. The repository returns the resources.

4. The Sling model exporter returns the side model.

5. The SPA institutes use its components based on the side model.

6. IndividuallyThe content informs the publisher that it is ready for creation.

   medicineThe side editor calls the author settings of components.

   6CThe side editor receives the components settings.

7. When the author edits a component, the side editor publishes a change request to the standard post of the article.

8. The appeal is updated in the repository.

9. The updated function is provided to the Servlet Post.

10. The Post -Post -Servlet contribution informs the editor of the page that the function has been updated.

11. The side editor calls for the new page model.

    (Video) Delivering New Experiences with Adobe AEM Headless & SPA

12. The functions of which the page consists of the repository is requested.

13. The functions of which the page consists of the repository for the sling exporter is provided.

14. The updated side model is returned to the editor.

15. The side editor updates the SPA pages model reference.

16. The SPA updates its components based on the new side reference.

17. The component settings of the side editors are updated.

    17 aThe SPA signals the side editor that the content is finished.

    17bThe side editor offers the component settings for the spa.

    17cThe SPA offers updated component settings.

Kreation Workflow

This is a more detailed overview that focuses on the experience of the authorship.

1. The spa is looking for the page model.

2. anyThe page model offers the editor the necessary data for the creation.

   PaiWhen notification, the orchestrator component updates the page content structure.

3. The component orchestrator advises the assignment between an attractiveness and a SPA component.

4. The orchestrator component instances are dynamically based on the SPA component based on the page model and the component assignment.

5. The side editor updates the side model.

   (Video) Adobe Developers Live | SPA Editor 2.0: add in-context editable content spots to any app

6. IndividuallyThe page model contains updated author data for the side editor.

   medicineThe page model sends changes to the component orchestrator.

7. The component orchestrator is looking for a component assignment.

8. The component orchestrator updates the page content.

9. When the SPA completes the pages -update, the side editor bears the author's environment.

Requirements and restrictions

So that the author can use the side editor to edit the content of a SPA, its SPA app must be implemented in order to interact with the AEM SDK SPA editor.Introduction with Spas in AEMAt least document what you need to know to do your work.

Supported structures

The SPA editor SDK supports the following minimum versions:

• React 16.x and higher
• Angular 6.x and higher

Earlier versions of these structures may work with the AEM SDK editor, but are not supported.

Additional structures

Additional SPA structures can be implemented to work with the AEM SPA editor SDK.Please note theBlueprint de SpaDocument for the requirements that a structure must meet in order to create a certain level of the structure made of modules, components and services to work with the SPA editor.

Use several selectors

Additional user -defined selectors can be defined and used as part of a spa developed for the SDK -SPA.However, this support requires that theModelSelector is the first selector and the expansion will be.jsonwhenRequired by exporter Json.

Requirements for text editor

If you want to use the editor at the location of a text component created in the SPA, an additional configuration is required.

1. Define an attribute (it can be on everyone) in the container housing element that contains the HTML text<div>The element and the selector used isData-de.
2. Set the configurationMetitlementqueyIn the corresponding text componentCQ: InklaceeditingConfigFor example, this points to this selectorData-deWith this it enables the editor to know which HTML element includes the HTML text.

An example of how this is done, see theWKND Journal Example content.

For additional information onMetitlementqueyProperty and configuration of the rich text editor seeConfigure the rich text editor.

restrictions

The SPA editor from AEM SDK was presented with AEM 6.4 Service Pack 2.Adobe is fully supported and further improved and expanded as a new feature.The following AEM functions are not yet covered by the SPA editor:

• Target mode
• Contexhub
• Line image editing
• Edit settings (for example listener)
• Style system
• Undelo / but
• Page Diff e Time Warp
• Resources that run the HTML server -sand page, such as.
• Developer mode
• Aem started