Web-Komponente

[AEM Headless as a Cloud Service]{class="badge informative"}

Beispielanwendungen eignen sich hervorragend, um die Headless-Funktionen von Adobe Experience Manager (AEM) zu erkunden. Diese Web-Komponenten-Anwendung zeigt, wie Sie mithilfe der GraphQL-APIs von AEM Inhalte mit persistierten Abfragen abfragen und einen Teil der Benutzeroberfläche mit reinem JavaScript-Code rendern können.

Sie finden den Quell-Code auf GitHub.

Voraussetzungen prerequisites

Folgende Tools sollten lokal installiert werden:

AEM-Anforderungen

Die Web-Komponente funktioniert mit den folgenden AEM Bereitstellungsoptionen.

Für diese Beispielanwendung müssen basic-tutorial-solution.content.zip installiert und die erforderlichen Bereitstellungskonfigurationen vorhanden sein.

Informationen zur Verwendung

Der Code

Im Folgenden finden Sie eine Zusammenfassung, wie die Web-Komponente aufgebaut ist, wie sie mit AEM Headless verbunden wird, um Inhalte mithilfe von persistierten GraphQL-Abfragen abzurufen, und wie diese Daten präsentiert werden. Den vollständigen Code finden Sie unter GitHub.

HTML-Tag der Web-Komponente

Eine wiederverwendbare Web-Komponente (auch als benutzerdefiniertes Element bezeichnet) <person-info> wird der HTML-Seite ../src/assets/aem-headless.html hinzugefügt. Es unterstützt host und query-param-value-Attribute, um das Verhalten der Komponente zu fördern. Der Wert des host-Attributs überschreibt den aemHost-Wert des aemHeadlessService-Objekts in person.js, und query-param-value wird zur Auswahl der darzustellenden Person verwendet.

    <person-info
        host="https://publish-p123-e456.adobeaemcloud.com"
        query-param-value="John Doe">
    </person-info>

Implementierung von Web-Komponenten

Die person.js definiert die Funktionalität der Web-Komponente und im Folgenden sind die wichtigsten Highlights aufgeführt.

PersonInfo-Element-Implementierung

Das Klassenobjekt des benutzerdefinierten Elements <person-info> definiert die Funktionalität durch die Verwendung der connectedCallback()-Lebenszyklusmethoden, das Anhängen eines Schatten-Stammverzeichnisses, das Abrufen einer persistierten GraphQL-Abfrage und die DOM-Manipulation zur Erstellung der internen Schatten-DOM-Struktur des benutzerdefinierten Elements.

// Create a Class for our Custom Element (person-info)
class PersonInfo extends HTMLElement {

    constructor() {
        ...
        // Create a shadow root
        const shadowRoot = this.attachShadow({ mode: "open" });
        ...
    }

    ...

    // lifecycle callback :: When custom element is appended to document
    connectedCallback() {
        ...
        // Fetch GraphQL persisted query
        this.fetchPersonByNamePersistedQuery(headlessAPIURL, queryParamValue).then(
            ({ data, err }) => {
                if (err) {
                    console.log("Error while fetching data");
                } else if (data?.personList?.items.length === 1) {
                    // DOM manipulation
                    this.renderPersonInfoViaTemplate(data.personList.items[0], host);
                } else {
                    console.log(`Cannot find person with name: ${queryParamValue}`);
                }
            }
        );
    }

    ...

    //Fetch API makes HTTP GET to AEM GraphQL persisted query
    async fetchPersonByNamePersistedQuery(headlessAPIURL, queryParamValue) {
        ...
        const response = await fetch(
            `${headlessAPIURL}/${aemHeadlessService.persistedQueryName}${encodedParam}`,
            fetchOptions
        );
        ...
    }

    // DOM manipulation to create the custom element's internal shadow DOM structure
    renderPersonInfoViaTemplate(person, host){
        ...
        const personTemplateElement = document.getElementById('person-template');
        const templateContent = personTemplateElement.content;
        const personImgElement = templateContent.querySelector('.person_image');
        personImgElement.setAttribute('src',
            host + (person.profilePicture._dynamicUrl || person.profilePicture._path));
        personImgElement.setAttribute('alt', person.fullName);
        ...
        this.shadowRoot.appendChild(templateContent.cloneNode(true));
    }
}

Registrieren Sie das <person-info>-Element

    // Define the person-info element
    customElements.define("person-info", PersonInfo);

Cross-Origin Resource Sharing (CORS)

Diese Web-Komponente beruht auf einer AEM-basierten CORS-Konfiguration, die in der AEM-Zielumgebung ausgeführt wird, und geht davon aus, dass die Host-Seite auf http://localhost:8080 im Entwicklungsmodus ausgeführt wird. Darunter finden Sie eine Beispielkonfiguration für CORS OSGi für den lokalen Service von AEM Author.

Bitte überprüfen Sie die Bereitstellungskonfigurationen für den jeweiligen AEM-Service.