Instrument Reageren app om inhoud te bewerken met Universal Editor

Open het bestand src/components/Teams.js van de React-app voor WKND-teams.

Voeg het attribuut data-aue-prop, data-aue-type en data-aue-label toe aan de teamtitel en beschrijvingselementen.

...
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;

Vernieuw de pagina Universal Editor in de browser die de React-app voor WKND-teams laadt. U kunt nu zien dat de elementen van de teamtitel en beschrijving bewerkbaar zijn.

Als u de teamtitel of beschrijving probeert te bewerken via inline bewerken of de eigenschappencontrole, wordt een spinner weergegeven die wordt geladen, maar kunt u de inhoud niet bewerken. Omdat de Universal Editor zich niet bewust is van de AEM-brongegevens voor het laden en opslaan van de inhoud.

Werk het src/components/Teams.js -bestand bij om de kenmerken data-aue-resource , data-aue-type en data-aue-label toe te voegen aan het element op hoofdniveau <div> .

...
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;

De waarde van het attribuut data-aue-resource is de het middelweg van AEM van het Fragment van de Inhoud van het Team. Het voorvoegsel urn:aemconnection: gebruikt de korte naam van de inhoudsbron die is gedefinieerd in de verbindingsmetagegevens.

Vernieuw de pagina Universal Editor in de browser die de React-app voor WKND-teams laadt. U kunt nu zien dat het top-level element van het Team editable is maar de eigenschappen spoorstaaf laadt nog niet de inhoud. Op het netwerktabblad van de browser ziet u de fout 401 Niet-geautoriseerde voor de details -aanvraag waarmee de inhoud wordt geladen. De toepassing probeert het IMS-token te gebruiken voor verificatie, maar de lokale AEM SDK ondersteunt IMS-verificatie niet.

Om de 401 onbevoegde fout te bevestigen, moet u de lokale de authentificatiedetails van AEM SDK aan de Universele Redacteur verstrekken gebruikend de kopballen van de Authentificatie optie in de Universele Redacteur. Als lokale AEM SDK stelt u de waarde in op Basic YWRtaW46YWRtaW4= for admin:admin credentials.

toe

Vernieuw de pagina Universal Editor in de browser die de React-app voor WKND-teams laadt. U ziet nu dat de eigenschappenrails de inhoud laden en u kunt de teamtitel en beschrijving inline bewerken of de eigenschappenrails gebruiken.

Werk het src/components/Teams.js -bestand bij om gegevenskenmerken toe te voegen aan het <li key={index} className="team__member"> -element.

...
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;

De waarde van het kenmerk data-aue-type is component omdat de teamleden worden opgeslagen als Person Inhoudsfragmenten in AEM en helpt bij het aangeven van de beweegbare/delbare delen van de inhoud.

Vernieuw de pagina Universal Editor in de browser die de React-app voor WKND-teams laadt. U kunt nu zien dat de teamleden bewerkbaar zijn met de eigenschappen rail.

Maak eerst het componentdefinitiebestand /public/static/component-definition.json . Dit bestand bevat de componentdefinitie voor het Person Content Fragment. Met de insteekmodule aem/cf kunt u inhoudsfragmenten invoegen op basis van een model en een sjabloon met de standaardwaarden die u wilt toepassen.

{
    "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"
                            }
                        }
                    }
                }
            }
        ]
        }
    ]
}

Raadpleeg vervolgens het bovenstaande componentdefinitiebestand in index.html van de WKND Team React-app. Werk de sectie public/index.html file <head> bij om het componentdefinitiebestand op te nemen.

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

Werk ten slotte het bestand src/components/Teams.js bij om gegevenskenmerken toe te voegen. De sectie van LEDEN om als container voor de teamleden te handelen, laten wij data-aue-prop, data-aue-type, en data-aue-label attributen aan het <div> element toevoegen.

...
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;

Vernieuw de pagina Universal Editor in de browser die de React-app voor WKND-teams laadt. U kunt nu zien dat de sectie 0} LEDEN {als container dienst doet. U kunt nieuwe teamleden invoegen met de eigenschappen rail en het pictogram + .

in

Om een teamlid te schrappen, selecteer het teamlid en klik het pictogram van de Schrapping.