Composant web

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

Découvrez les fonctionnalités découplées d’Adobe Experience Manager (AEM) grâce aux exemples d’applications. Cette application de composant web explique comment interroger le contenu à l’aide des API GraphQL d’AEM et de requêtes persistantes et effectuer le rendu d’une partie de l’interface utilisateur en utilisant du code JavaScript pur.

Afficher le code source sur GitHub

Prérequis prerequisites

Les outils suivants doivent être installés localement :

Configuration requise d’AEM

Le composant web fonctionne avec les options de déploiement d’AEM ci-après.

Cet exemple d’application repose sur basic-tutorial-solution.content.zip à installer et les configurations de déploiement en place.

Utilisation

Le code

Vous trouverez ci-dessous un résumé de la création du composant web, de la manière dont il se connecte à AEM Headless pour récupérer du contenu à l’aide des requêtes persistantes de GraphQL, et de la manière dont ces données sont présentées. Le code complet se trouve sur GitHub.

Balise HTML du composant web

Un composant web réutilisable (ou élément personnalisé) <person-info> est ajouté à la page HTML ../src/assets/aem-headless.html. Il prend en charge les attributs host et query-param-value pour piloter le comportement du composant. La valeur de l’attribut host remplace la valeur aemHost de l’objet aemHeadlessService dans person.js, et query-param-value est utilisée pour sélectionner la personne à afficher.

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

Implémentation du composant web

La person.js définit la fonctionnalité du composant web. Vous trouverez ci-dessous les principales fonctions.

Implémentation de l’élément PersonInfo

L’objet de classe de l’élément personnalisé <person-info> définit la fonctionnalité en utilisant les méthodes de cycle de vie connectedCallback(), en attachant une racine fantôme, en récupérant la requête GraphQL persistante et en manipulant le modèle DOM pour créer la structure DOM fantôme interne de l’élément personnalisé.

// 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));
    }
}

Enregistrer l’élément <person-info>

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

Partage de ressources entre origines multiples (CORS)

Ce composant Web repose sur une configuration CORS basée sur AEM s’exécutant sur l’environnement AEM cible et suppose que la page hôte s’exécute sur http://localhost:8080 en mode de développement. Vous trouverez ci-dessous un exemple de configuration OSGi CORS pour le service de création AEM local.

Veuillez consulter les configurations de déploiement du service AEM correspondant.