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:

Vorschau-URLs

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

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:

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.

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

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