Inhaltsfragmentvorschau

AEM Headless-Anwendungen unterstützen eine integrierte Authoring-Vorschau. Das Vorschauerlebnis verknüpft den Inhaltsfragmenteditor von AEM Author mit Ihrer benutzerdefinierten App (über HTTP adressierbar), sodass ein Deeplink 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 Autorinnen und Autoren zugreifen können.
2. Die App muss so konfiguriert sein, dass eine Verbindung zum AEM-Author-Service (und nicht zum AEM-Publish-Service) hergestellt wird.
3. Die App muss mit URLs oder Routen entwickelt werden, die den Pfad oder die ID des Inhaltsfragments verwenden können, um die Inhaltsfragmente auszuwählen, die in einer Vorschau im App-Erlebnis angezeigt werden sollen.

Vorschau-URLs

Vorschau-URLs mit URL-Ausdrücken werden in den Eigenschaften des Inhaltsfragmentmodells festgelegt.

1. Melden Sie sich beim AEM-Author-Service als Admin an.
2. Navigieren Sie zu Tools > Allgemein > Inhaltsfragmentmodelle
3. Wählen Sie das Inhaltsfragmentmodell und dann in der oberen Aktionsleiste die Option Bearbeiten aus.
4. Geben Sie die Vorschau-URL für das Inhaltsfragmentmodell mithilfe von URL-Ausdrücken ein.
   • Die Vorschau-URL muss auf eine Bereitstellung der App verweisen, die eine Verbindung zum AEM-Author-Service herstellt.

URL-Ausdrücke

Jedes Inhaltsfragmentmodell kann über eine festgelegte 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.

Beispiele für Vorschau-URLs:

• Eine Vorschau-URL für das Abenteuermodell könnte wie https://preview.app.wknd.site/adventure${contentFragment.path} aussehen, was zu https://preview.app.wknd.site/adventure/content/dam/wknd-shared/en/adventures/surf-camp-bali/surf-camp-bali aufgelöst wird.
• Eine Vorschau-URL für das Artikelmodell könnte wie https://preview.news.wknd.site/${contentFragment.model.name}/${contentFragment.id}.html?variation=${contentFragment.variation} aussehen, was zu https://preview.news.wknd.site/article/99c34317-1901-2ab3-35b6-d7890aa1c23c.html?variation=main aufgelöst wird.

In-App-Vorschau

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

Führen Sie bei der Vorschau von Inhaltsfragmentänderungen in der App eine harte Aktualisierung durch (Leeren des lokalen Caches des Browsers).

React-Beispiel

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

Der Beispiel-Code 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ücken zusammensetzbar sein. In dieser für die Vorschau aktivierten Version der WKND-App werden die Inhaltsfragmente für das Abenteuer über die AdventureDetail-Komponente angezeigt, die an die Route /adventure<CONTENT FRAGMENT PATH> gebunden ist. Daher muss die Vorschau-URL des WKND-Abenteuermodells auf https://preview.app.wknd.site:3000/adventure${contentFragment.path} festgelegt sein, um eine Auflösung zu dieser Route vorzunehmen.

Die Inhaltsfragmentvorschau funktioniert nur, wenn die App über eine adressierbare Route verfügt, die mit URL-Ausdrücken aufgefüllt werden kann, die dieses Inhaltsfragment in der App in vorschaufähiger Weise rendern.

• 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 Komponente AdventureDetail analysiert einfach den Pfad des Inhaltsfragments, der aus der Route-URL über den URL-Ausdruck ${contentFragment.path} in die Vorschau-URL eingefügt wurde, und verwendet diesen 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>);
}
...