Inhaltsfragmentvorschau

AEM Headless-Anwendungen unterstützen eine integrierte Authoring-Vorschau. Das Vorschauerlebnis verknüpft den Inhaltsfragment-Editor der AEM-Autoreninstanz mit Ihrer benutzerdefinierten App (über HTTP adressierbar), sodass ein Deep Link in die App eingefügt werden kann, mit der das in der Vorschau angezeigte Inhaltsfragment gerendert wird.

Zur Verwendung der Inhaltsfragmentvorschau müssen mehrere Bedingungen erfüllt sein:

1. Die App muss in einer URL bereitgestellt werden, auf die Autoren zugreifen können
2. Das Programm muss so konfiguriert sein, dass eine Verbindung zum AEM-Autorendienst (und nicht zum AEM-Veröffentlichungsdienst) hergestellt wird.
3. Die App muss mit URLs oder Routen entwickelt werden, die Inhaltsfragmentpfad oder ID , um die Inhaltsfragmente auszuwählen, die für die Vorschau im App-Erlebnis angezeigt werden sollen.

Vorschau-URLs

Vorschau-URLs anzeigen, mithilfe von URL-Ausdrücke, werden in den Eigenschaften des Inhaltsfragmentmodells festgelegt.

1. Melden Sie sich beim AEM-Autorendienst als Administrator an
2. Navigieren Sie zu Tools > Allgemein > Inhaltsfragmentmodelle
3. Wählen Sie die Inhaltsfragmentmodell und wählen Sie Eigenschaften in der oberen Aktionsleiste.
4. Geben Sie die Vorschau-URL für das Inhaltsfragmentmodell mit ein. URL-Ausdrücke
   • Die Vorschau-URL muss auf eine Bereitstellung der App verweisen, die eine Verbindung zum AEM-Autorendienst herstellt.

URL-Ausdrücke

Jedes Inhaltsfragmentmodell kann über eine Vorschau-URL verfügen. Die Vorschau-URL kann pro Inhaltsfragment mithilfe der in der folgenden Tabelle aufgeführten URL-Ausdrücke parametrisiert werden. In einer Vorschau-URL können mehrere URL-Ausdrücke verwendet werden.

Beispiel-Vorschau-URLs:

• Eine Vorschau-URL auf der Abenteuer -Modell könnte wie folgt aussehen: https://preview.app.wknd.site/adventure${contentFragment.path} aufgelöst in https://preview.app.wknd.site/adventure/content/dam/wknd-shared/en/adventures/surf-camp-bali/surf-camp-bali
• Eine Vorschau-URL auf der Artikel -Modell könnte wie folgt aussehen: https://preview.news.wknd.site/${contentFragment.model.name}/${contentFragment.id}.html?variation=${contentFragment.variation} aufgelöst https://preview.news.wknd.site/article/99c34317-1901-2ab3-35b6-d7890aa1c23c.html?variation=main

In-App-Vorschau

Jedes Inhaltsfragment, das das konfigurierte Inhaltsfragmentmodell verwendet, verfügt über eine Vorschau -Schaltfläche. Über die Schaltfläche Vorschau wird die Vorschau-URL des Inhaltsfragmentmodells geöffnet und die Werte des geöffneten Inhaltsfragments werden in die URL-Ausdrücke.

Führen Sie bei der Vorschau von Inhaltsfragmentänderungen in der App eine Aktualisierung (Löschen des lokalen Cache des Browsers) durch.

React-Beispiel

Im Folgenden wird die WKND-App vorgestellt, eine einfache React-Anwendung, die Abenteuer aus AEM mit AEM Headless-GraphQL-APIs anzeigt.

Der Beispielcode ist verfügbar unter Github.com.

URLs und Routen

Die URLs oder Routen, die zur Vorschau eines Inhaltsfragments verwendet werden, müssen mithilfe von URL-Ausdrücke. In dieser für die Vorschau aktivierten Version der WKND-App werden die Inhaltsfragmente für das Abenteuer über die AdventureDetail Komponente, die an die Route gebunden ist /adventure<CONTENT FRAGMENT PATH>. Daher muss die Vorschau-URL des WKND Adventure-Modells auf https://preview.app.wknd.site:3000/adventure${contentFragment.path} , um zu dieser Route zu gelangen.

Die Inhaltsfragmentvorschau funktioniert nur, wenn die App über eine adressierbare Route verfügt, die mit URL-Ausdrücke , das dieses Inhaltsfragment in der App in einer Vorschau wiedergibt.

• src/App.js

...
function App() {
  return (
    <Router>
      <div className="App">
        <header>
            <Link to={"/"}>
                <img src={logo} className="logo" alt="WKND Logo"/>
            </Link>
            <hr />
        </header>
        <Routes>
          {/* The route's path must match the Adventure Model's Preview URL expression. In React since the path has `/` you must use wildcards to match instead of the usual `:path` */}
          <Route path='/adventure/*' element={<AdventureDetail />}/>
          <Route path="/" element={<Home />}/>
        </Routes>
      </div>
    </Router>
  );
}

export default App;

Anzeigen des erstellten Inhalts

Die AdventureDetail -Komponente analysiert einfach den Pfad des Inhaltsfragments, der über die ${contentFragment.path} URL-Ausdruck, über die Route-URL und verwendet sie zum Erfassen und Rendern des WKND-Abenteuers.

• src/components/AdventureDetail.js

...
function AdventureDetail() {

    // Read the `path` value which is the parameter used to query for the adventure's details
    // since the params value captures the `*` wildcard in `/adventure/*`, or everything after the first `/` in the Content Fragment path.
    const params = useParams();
    const pathParam = params["*"];

    // Add the leading '/' back on
    const path = '/' + pathParam;

    // Query AEM for the Adventures's details, using the Content Fragment's `path`
    const { adventure, references, error } = useAdventureByPath(path);

    // Handle error and loading conditions
    if (error) {
        return <Error errorMessage={error} />;
    } else if (!adventure) {
        return <Loading />;
    }

    return (<div className="adventure-detail">
        ...
        <AdventureDetailRender {...adventure} references={references} />
    </div>);
}
...

Ressourcen für Business.Adobe.com