Dokumentation AEM AEM-Tutorials Tutorials zu AEM as a Cloud Service

Instrument React-App zum Bearbeiten von Inhalten mit dem universellen Editor

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Themen:
Headless

Erstellt für:

Fortgeschrittener
Entwickler

Erfahren Sie, wie Sie mit der React-App Inhalte mit dem Universal Editor bearbeiten können.

Voraussetzungen

Sie haben die lokale Entwicklungsumgebung wie im vorherigen Schritt Lokale Entwicklungseinrichtung beschrieben eingerichtet.

Grundlegende Bibliothek des universellen Editors einschließen

Beginnen wir mit der Einbeziehung der Core-Bibliothek des universellen Editors in die WKND-Teams-React-App. Es handelt sich dabei um eine JavaScript-Bibliothek, die die Kommunikationsschicht zwischen der bearbeiteten App und dem universellen Editor bereitstellt.

Es gibt zwei Möglichkeiten, die Core-Bibliothek des universellen Editors in die React-App einzubinden:

Knotenmodulabhängigkeit von der NPM-Registrierung, siehe @adobe/universal-editor-cors.
Skript-Tag (<script>) in der HTML-Datei.

Verwenden wir für dieses Tutorial den Skript-Tag-Ansatz.

Installieren Sie das Paket react-helmet-async , um das Tag <script> in der React-App zu verwalten.

code language-bash
`$ npm install react-helmet-async`

Aktualisieren Sie die Datei "src/App.js"der WKND Teams React-App, um die Core-Bibliothek des universellen Editors aufzunehmen.

code language-javascript

code language-javascript
... import { Helmet, HelmetProvider } from "react-helmet-async"; function App() { return ( <HelmetProvider> <div className="App"> <Helmet> {/* AEM Universal Editor :: CORE Library Loads the LATEST Universal Editor library */} <script src="https://universal-editor-service.experiencecloud.live/corslib/LATEST" async /> </Helmet> <Router> <header> <Link to={"/"}> <img src={logo} className="logo" alt="WKND Logo" /> </Link> <hr /> </header> <Routes> <Route path="/" element={<Home />} /> <Route path="/person/:fullName" element={<Person />} /> </Routes> </Router> </div> </HelmetProvider> ); } export default App;

...
import { Helmet, HelmetProvider } from "react-helmet-async";

function App() {
return (
    <HelmetProvider>
        <div className="App">
            <Helmet>
                {/* AEM Universal Editor :: CORE Library
                  Loads the LATEST Universal Editor library
                */}
                <script
                    src="https://universal-editor-service.experiencecloud.live/corslib/LATEST"
                    async
                />
            </Helmet>
            <Router>
                <header>
                    <Link to={"/"}>
                    <img src={logo} className="logo" alt="WKND Logo" />
                    </Link>
                    <hr />
                </header>
                <Routes>
                    <Route path="/" element={<Home />} />
                    <Route path="/person/:fullName" element={<Person />} />
                </Routes>
            </Router>
        </div>
    </HelmetProvider>
);
}

export default App;

Metadaten hinzufügen - Inhaltsquelle

Um die WKND-Teams-React-App mit der Inhaltsquelle zur Bearbeitung zu verbinden, müssen Sie Verbindungsmetadaten angeben. Der Universal Editor-Dienst verwendet diese Metadaten, um eine Verbindung mit der Inhaltsquelle herzustellen.

Die Verbindungsmetadaten werden als <meta> -Tags in der HTML-Datei gespeichert. Die Syntax für die Verbindungsmetadaten lautet wie folgt:

<meta name="urn:adobe:aue:<category>:<referenceName>" content="<protocol>:<url>">

Fügen wir die Verbindungsmetadaten der WKND Teams React-App innerhalb der Komponente <Helmet> hinzu. Aktualisieren Sie die Datei src/App.js mit dem folgenden <meta> -Tag. In diesem Beispiel ist die Inhaltsquelle eine lokale AEM, die auf https://localhost:8443 ausgeführt wird.

...
function App() {
return (
    <HelmetProvider>
        <div className="App">
            <Helmet>
                {/* AEM Universal Editor :: CORE Library
                    Loads the LATEST Universal Editor library
                */}
                <script
                    src="https://universal-editor-service.experiencecloud.live/corslib/LATEST"
                    async
                />
                {/* AEM Universal Editor :: Connection metadata
                    Connects to local AEM instance
                */}
                <meta
                    name="urn:adobe:aue:system:aemconnection"
                    content={`aem:https://localhost:8443`}
                />
            </Helmet>
            ...
    </HelmetProvider>
);
}

export default App;

Der aemconnection gibt einen kurzen Namen für die Inhaltsquelle an. Die nachfolgende Instrumentierung verwendet den Kurznamen, um auf die Inhaltsquelle zu verweisen.

Hinzufügen von Metadaten - lokale Konfiguration des Universal Editor-Dienstes

Anstelle des von Adobe gehosteten Universal Editor-Dienstes wird eine lokale Kopie des Universal Editor-Dienstes für die lokale Entwicklung verwendet. Der lokale Dienst bindet den Universal Editor und das AEM SDK. Fügen wir daher die lokalen Metadaten des Universal Editor-Dienstes zur WKND Teams React-App hinzu.

Diese Konfigurationseinstellungen werden auch als <meta> -Tags in der HTML-Datei gespeichert. Die Syntax für die Metadaten des lokalen Universal Editor-Dienstes lautet wie folgt:

<meta name="urn:adobe:aue:config:service" content="<url>">

Fügen wir die Verbindungsmetadaten der WKND Teams React-App innerhalb der Komponente <Helmet> hinzu. Aktualisieren Sie die Datei src/App.js mit dem folgenden <meta> -Tag. In diesem Beispiel wird der lokale Universal Editor-Dienst auf https://localhost:8001 ausgeführt.

...

function App() {
  return (
    <HelmetProvider>
      <div className="App">
        <Helmet>
          {/* AEM Universal Editor :: CORE Library
              Loads the LATEST Universal Editor library
          */}
          <script
            src="https://universal-editor-service.experiencecloud.live/corslib/LATEST"
            async
          />
          {/* AEM Universal Editor :: Connection metadata
              Connects to local AEM instance
          */}
          <meta
            name="urn:adobe:aue:system:aemconnection"
            content={`aem:https://localhost:8443`}
          />
          {/* AEM Universal Editor :: Configuration for Service
              Using locally running Universal Editor service
          */}
          <meta
            name="urn:adobe:aue:config:service"
            content={`https://localhost:8001`}
          />
        </Helmet>
        ...
    </HelmetProvider>
);
}
export default App;

Instrumentieren der React-Komponenten

Um den Inhalt der WKND Teams React-App wie Teamtitel und Teambeschreibung zu bearbeiten, müssen Sie die React-Komponenten instrumentieren. Die Instrumentierung bedeutet, den HTML-Elementen, die Sie mit dem universellen Editor bearbeitbar machen möchten, relevante Datenattribute (data-aue-*) hinzuzufügen. Weitere Informationen zu Datenattributen finden Sie unter Attribute und Typen.

Bearbeitbare Elemente definieren

Definieren wir zunächst die Elemente, die Sie mit dem universellen Editor bearbeiten möchten. In der WKND Teams React-App werden der Teamtitel und die Beschreibung im Team Content Fragment in AEM gespeichert, sodass die besten Kandidaten für die Bearbeitung zur Verfügung stehen.

Instrumentieren wir die Komponente Teams React , damit der Teamtitel und die Beschreibung bearbeitbar sind.

Öffnen Sie die Datei "src/components/Teams.js"der WKND Teams React-App.

Fügen Sie die Attribute data-aue-prop, data-aue-type und data-aue-label zum Teamtitel und zu den Beschreibungselementen hinzu.

code language-javascript

code language-javascript
`... function Teams() { const { teams, error } = useAllTeams(); ... return ( <div className="team"> // AEM Universal Editor :: Instrumentation using data-aue-* attributes <h2 className="team__title" data-aue-prop="title" data-aue-type="text" data-aue-label="title">{title}</h2> <p className="team__description" data-aue-prop="description" data-aue-type="richtext" data-aue-label="description">{description.plaintext}</p> ... </div> ); } export default Teams;`

...
function Teams() {
    const { teams, error } = useAllTeams();
    ...

    return (
        <div className="team">
            // AEM Universal Editor :: Instrumentation using data-aue-* attributes
            <h2 className="team__title" data-aue-prop="title" data-aue-type="text" data-aue-label="title">{title}</h2>
            <p className="team__description" data-aue-prop="description" data-aue-type="richtext" data-aue-label="description">{description.plaintext}</p>
            ...
        </div>
    );
}

export default Teams;

Aktualisieren Sie die Seite Universal Editor im Browser, der die WKND Teams React-App lädt. Sie können jetzt sehen, dass die Elemente für den Teamtitel und die Beschreibung bearbeitbar sind.
Wenn Sie versuchen, den Titel oder die Beschreibung des Teams mithilfe der Inline-Bearbeitung oder der Eigenschaftenleiste zu bearbeiten, wird ein Ladegerät angezeigt, Sie können den Inhalt jedoch nicht bearbeiten. Da der universelle Editor die AEM Ressourcendetails zum Laden und Speichern des Inhalts nicht kennt.

Zusammenfassend wird durch die obigen Änderungen der Teamtitel und die Beschreibungselemente im universellen Editor als bearbeitbar markiert. Sie können jedoch nicht bearbeiten (über Inline- oder Eigenschaftenleiste) und die Änderungen noch nicht speichern, da Sie dazu die AEM Ressourcendetails mit dem Attribut data-aue-resource hinzufügen müssen. Machen wir das im nächsten Schritt.

Definieren AEM Ressourcendetails

Um den bearbeiteten Inhalt wieder in AEM zu speichern und den Inhalt in die Eigenschaftenleiste zu laden, müssen Sie die AEM Ressourcendetails für den universellen Editor angeben.

In diesem Fall ist die AEM Ressource der Pfad des Inhaltsfragments "Team". Fügen wir daher die Ressourcendetails zur Komponente Teams React auf der obersten Ebene <div> hinzu.

Aktualisieren Sie die Datei src/components/Teams.js , um die Attribute data-aue-resource, data-aue-type und data-aue-label zum Element der obersten Ebene <div> hinzuzufügen.

code language-javascript

code language-javascript
... function Teams() { const { teams, error } = useAllTeams(); ... // Render single Team function Team({ _path, title, shortName, description, teamMembers }) { // Must have title, shortName and at least 1 team member if (!_path \|\| !title \|\| !shortName \|\| !teamMembers) { return null; } return ( // AEM Universal Editor :: Instrumentation using data-aue-* attributes <div className="team" data-aue-resource={`urn:aemconnection:${_path}/jcr:content/data/master`} data-aue-type="reference" data-aue-label={title}> ... </div> ); } } export default Teams;

...
function Teams() {
    const { teams, error } = useAllTeams();
    ...

    // Render single Team
    function Team({ _path, title, shortName, description, teamMembers }) {
        // Must have title, shortName and at least 1 team member
        if (!_path || !title || !shortName || !teamMembers) {
            return null;
        }

      return (
        // AEM Universal Editor :: Instrumentation using data-aue-* attributes
        <div className="team" data-aue-resource={`urn:aemconnection:${_path}/jcr:content/data/master`} data-aue-type="reference" data-aue-label={title}>
        ...
        </div>
    );
    }
}
export default Teams;

Der Wert des Attributs data-aue-resource ist der AEM Ressourcenpfad des Team Content Fragments. Das Präfix urn:aemconnection: verwendet den Kurznamen der Inhaltsquelle, der in den Verbindungsmetadaten definiert ist.

Aktualisieren Sie die Seite Universal Editor im Browser, der die WKND Teams React-App lädt. Sie können jetzt sehen, dass das Team-Element der obersten Ebene bearbeitbar ist, die Eigenschaftenleiste jedoch den Inhalt noch immer nicht lädt. Auf der Netzwerkregisterkarte des Browsers wird der Fehler 401 Unauthorized für die details -Anfrage angezeigt, die den Inhalt lädt. Es versucht, das IMS-Token für die Authentifizierung zu verwenden, aber das lokale AEM SDK unterstützt die IMS-Authentifizierung nicht.
Um den Fehler 401 Unauthorized zu beheben, müssen Sie die lokalen AEM SDK-Authentifizierungsdetails mithilfe der Option Authentifizierungskopfzeilen im universellen Editor für den universellen Editor angeben. Setzen Sie als lokales AEM SDK den Wert für admin:admin -Anmeldedaten auf Basic YWRtaW46YWRtaW4=.
Aktualisieren Sie die Seite Universal Editor im Browser, der die WKND Teams React-App lädt. Sie können jetzt sehen, dass die Eigenschaftenleiste den Inhalt lädt, und Sie können den Teamtitel und die Beschreibung inline oder über die Eigenschaftenleiste bearbeiten.

Im Hintergrund

Die Leiste "Eigenschaften"lädt den Inhalt aus der AEM Ressource mit dem lokalen Universal Editor-Dienst. Auf der Registerkarte "Netzwerk"des Browsers können Sie die POST-Anfrage zum Laden des Inhalts an den lokalen Universal Editor-Dienst (https://localhost:8001/details) sehen.

Wenn Sie den Inhalt mit der Inline-Bearbeitung oder der Eigenschaftenleiste bearbeiten, werden die Änderungen mithilfe des lokalen Universal Editor-Dienstes wieder in der AEM Ressource gespeichert. Auf der Netzwerkregisterkarte des Browsers sehen Sie die POST-Anfrage zum Speichern des Inhalts an den lokalen Universal Editor-Dienst (https://localhost:8001/update oder https://localhost:8001/patch).

Universal Editor - WKND Teams Team bearbeitbar

Das JSON-Objekt für die Anfrage-Payload enthält die erforderlichen Details wie den Inhaltsserver (connections), den Ressourcenpfad (target) und den aktualisierten Inhalt (patch).

Universal Editor - WKND Teams Team bearbeitbar

Erweitern des bearbeitbaren Inhalts

Erweitern wir den bearbeitbaren Inhalt und wenden wir die Instrumentierung auf die Team-Mitglieder an, damit Sie die Team-Mitglieder über die Eigenschaftenleiste bearbeiten können.

Fügen wir wie oben die relevanten data-aue-* -Attribute den Teammitgliedern in der Teams React-Komponente hinzu.

Aktualisieren Sie die Datei src/components/Teams.js , um dem Element <li key={index} className="team__member"> Datenattribute hinzuzufügen.

code language-javascript

code language-javascript
... function Teams() { const { teams, error } = useAllTeams(); ... <div> <h4 className="team__members-title">Members</h4> <ul className="team__members"> {/* Render the referenced Person models associated with the team /} {teamMembers.map((teamMember, index) => { return ( // AEM Universal Editor :: Instrumentation using data-aue- attributes <li key={index} className="team__member" data-aue-resource={`urn:aemconnection:${teamMember?._path}/jcr:content/data/master`} data-aue-type="component" data-aue-label={teamMember.fullName}> <Link to={`/person/${teamMember.fullName}`}> {teamMember.fullName} </Link> </li> ); })} </ul> </div> ... } export default Teams;

...
function Teams() {
    const { teams, error } = useAllTeams();
    ...

    <div>
        <h4 className="team__members-title">Members</h4>
        <ul className="team__members">
            {/* Render the referenced Person models associated with the team */}
            {teamMembers.map((teamMember, index) => {
                return (
                    // AEM Universal Editor :: Instrumentation using data-aue-* attributes
                    <li key={index} className="team__member" data-aue-resource={`urn:aemconnection:${teamMember?._path}/jcr:content/data/master`} data-aue-type="component" data-aue-label={teamMember.fullName}>
                    <Link to={`/person/${teamMember.fullName}`}>
                        {teamMember.fullName}
                    </Link>
                    </li>
                );
            })}
        </ul>
    </div>
    ...
}
export default Teams;

Der Wert des Attributs data-aue-type ist component, da die Teammitglieder in AEM als Person Inhaltsfragmente gespeichert werden. Dies hilft bei der Angabe der beweglichen/löschbaren Teile des Inhalts.

Aktualisieren Sie die Seite Universal Editor im Browser, der die WKND Teams React-App lädt. Sie können jetzt sehen, dass die Team-Mitglieder über die Eigenschaftenleiste bearbeitbar sind.

Im Hintergrund

Wie oben beschrieben erfolgt der Abruf und die Speicherung von Inhalten durch den lokalen Universal Editor-Dienst. Die Anforderungen /details, /update oder /patch werden zum Laden und Speichern des Inhalts an den lokalen Universal Editor-Dienst gesendet.

Definition von Inhalten zum Hinzufügen und Löschen

Bisher haben Sie den vorhandenen Inhalt bearbeitbar gemacht, aber was ist, wenn Sie neue Inhalte hinzufügen möchten? Fügen wir mithilfe des universellen Editors die Möglichkeit hinzu, Team-Mitglieder zum WKND-Team hinzuzufügen oder daraus zu löschen. Daher müssen die Inhaltsautoren nicht zur AEM gehen, um Team-Mitglieder hinzuzufügen oder zu löschen.

Eine kurze Zusammenfassung enthält jedoch, dass die Mitglieder des WKND-Teams in AEM als Person Inhaltsfragmente gespeichert sind und mit dem Team-Inhaltsfragment über die Eigenschaft teamMembers verknüpft sind. So überprüfen Sie die Modelldefinition in AEM Besuch my-project.

Erstellen Sie zunächst die Komponentendefinitionsdatei /public/static/component-definition.json. Diese Datei enthält die Komponentendefinition für das Inhaltsfragment Person . Das Plug-in aem/cf ermöglicht das Einfügen von Inhaltsfragmenten basierend auf einem Modell und einer Vorlage, die die anzuwendenden Standardwerte bereitstellen.

code language-json

code language-json
`{ "groups": [ { "title": "Content Fragments", "id": "content-fragments", "components": [ { "title": "Person", "id": "person", "plugins": { "aem": { "cf": { "name": "person", "cfModel": "/conf/my-project/settings/dam/cfm/models/person", "cfFolder": "/content/dam/my-project/en", "title": "person", "template": { "fullName": "New Person", "biographyText": "This is biography of new person" } } } } } ] } ] }`

{
    "groups": [
        {
        "title": "Content Fragments",
        "id": "content-fragments",
        "components": [
            {
            "title": "Person",
            "id": "person",
            "plugins": {
                "aem": {
                    "cf": {
                        "name": "person",
                        "cfModel": "/conf/my-project/settings/dam/cfm/models/person",
                        "cfFolder": "/content/dam/my-project/en",
                        "title": "person",
                        "template": {
                            "fullName": "New Person",
                            "biographyText": "This is biography of new person"
                            }
                        }
                    }
                }
            }
        ]
        }
    ]
}

Siehe als Nächstes die obige Komponentendefinitionsdatei in index.html der WKND Team React App. Aktualisieren Sie den Abschnitt <head> der public/index.html-Datei, um die Komponentendefinitionsdatei einzuschließen.

code language-html
`... <script type="application/vnd.adobe.aue.component+json" src="/static/component-definition.json" ></script> <title>WKND App - Basic GraphQL Tutorial</title> </head> ...`

Aktualisieren Sie abschließend die Datei "src/components/Teams.js", um Datenattribute hinzuzufügen. Fügen wir die Attribute data-aue-prop, data-aue-type und data-aue-label zum Element <div> hinzu, um als Container für die Teammitglieder zu fungieren.

code language-javascript

code language-javascript
... function Teams() { const { teams, error } = useAllTeams(); ... {/* AEM Universal Editor :: Team Members as container /} <div data-aue-prop="teamMembers" data-aue-type="container" data-aue-label="members"> <h4 className="team__members-title">Members</h4> <ul className="team__members"> {/ Render the referenced Person models associated with the team /} {teamMembers.map((teamMember, index) => { return ( // AEM Universal Editor :: Instrumentation using data-aue- attributes <li key={index} className="team__member" data-aue-resource={`urn:aemconnection:${teamMember?._path}/jcr:content/data/master`} data-aue-type="component" data-aue-label={teamMember.fullName}> <Link to={`/person/${teamMember.fullName}`}> {teamMember.fullName} </Link> </li> ); })} </ul> </div> ... } export default Teams;

...
function Teams() {
    const { teams, error } = useAllTeams();
    ...

    {/* AEM Universal Editor :: Team Members as container */}
    <div data-aue-prop="teamMembers" data-aue-type="container" data-aue-label="members">
        <h4 className="team__members-title">Members</h4>
        <ul className="team__members">
        {/* Render the referenced Person models associated with the team */}
        {teamMembers.map((teamMember, index) => {
            return (
            // AEM Universal Editor :: Instrumentation using data-aue-* attributes
            <li key={index} className="team__member" data-aue-resource={`urn:aemconnection:${teamMember?._path}/jcr:content/data/master`} data-aue-type="component" data-aue-label={teamMember.fullName}>
                <Link to={`/person/${teamMember.fullName}`}>
                {teamMember.fullName}
                </Link>
            </li>
            );
        })}
        </ul>
    </div>
    ...
}
export default Teams;

Aktualisieren Sie die Seite Universal Editor im Browser, der die WKND Teams React-App lädt. Sie können jetzt sehen, dass der Abschnitt MITGLIEDER als Container fungiert. Sie können neue Teammitglieder über die Eigenschaftenleiste und das Symbol + einfügen.

ein.
Um ein Team-Mitglied zu löschen, wählen Sie das Team-Mitglied aus und klicken Sie auf das Symbol Löschen .

Im Hintergrund

Die Vorgänge zum Hinzufügen und Löschen von Inhalten werden vom lokalen Universal Editor-Dienst ausgeführt. Die POST-Anfrage an /add oder /remove mit einer detaillierten Payload wird an den lokalen Universal Editor-Dienst gesendet, um den Inhalt zum AEM hinzuzufügen oder zu löschen.

Lösungsdateien

Informationen dazu, wie Sie Ihre Implementierungsänderungen überprüfen oder ob Sie die WKND-Teams-React-App nicht mit dem universellen Editor verwenden können, finden Sie in der Lösungsverzweigung basic-tutorial-instrumental-for-UE .

Der Dateivergleich mit der funktionierenden Verzweigung basic-tutorial ist hier verfügbar.

Herzlichen Glückwunsch!

Sie haben die WKND Teams React-App erfolgreich instrumentiert, um den Inhalt mit dem universellen Editor hinzuzufügen, zu bearbeiten und zu löschen. Sie haben gelernt, wie Sie die Hauptbibliothek einbeziehen, Verbindungen und die lokalen Metadaten des Universal Editor-Dienstes hinzufügen und die React-Komponente mit verschiedenen Datenattributen (data-aue-*) instrumentieren.

recommendation-more-help

4859a77c-7971-4ac9-8f5c-4260823c6f69