Anteprima frammento di contenuto

Le applicazioni headless AEM supportano l’anteprima integrata dell’authoring. L’esperienza di anteprima collega l’editor dei frammenti di contenuto dell’autore AEM con l’app personalizzata (indirizzabile tramite HTTP), consentendo un collegamento diretto nell’app che esegue il rendering del frammento di contenuto visualizzato in anteprima.

Per utilizzare l’anteprima del frammento di contenuto, è necessario soddisfare diverse condizioni:

URL di anteprima

Gli URL di anteprima, che utilizzano espressioni URL, sono impostati nelle proprietà del modello per frammenti di contenuto.

Espressioni URL

Per ogni modello per frammenti di contenuto può essere impostato un URL di anteprima. L’URL di anteprima può essere parametrizzato per frammento di contenuto utilizzando le espressioni URL elencate nella tabella seguente. È possibile utilizzare più espressioni URL in un singolo URL di anteprima.

Esempio di URL di anteprima:

Anteprima in-app

Qualsiasi frammento di contenuto che utilizza il modello per frammenti di contenuto configurato dispone di un pulsante Anteprima. Il pulsante Preview apre l'URL di anteprima del modello per frammenti di contenuto e inserisce i valori del frammento di contenuto aperto nelle espressioni URL.

Esegui un aggiornamento rigido (cancellazione della cache locale del browser) quando visualizzi in anteprima le modifiche ai frammenti di contenuto nell’app.

Esempio di React

Esploriamo l’app WKND, una semplice applicazione React che mostra le avventure dell’AEM utilizzando le API GraphQL headless dell’AEM.

Il codice di esempio è disponibile in Github.com.

URL e route

Gli URL o i percorsi utilizzati per visualizzare in anteprima un frammento di contenuto devono essere componibili utilizzando espressioni URL. In questa versione dell'app WKND abilitata per l'anteprima, i frammenti di contenuto dell'avventura vengono visualizzati tramite il componente AdventureDetail associato alla route /adventure<CONTENT FRAGMENT PATH>. Pertanto, l'URL di anteprima del modello WKND Adventure deve essere impostato su https://preview.app.wknd.site:3000/adventure${contentFragment.path} per risolvere questa route.

L'anteprima dei frammenti di contenuto funziona solo se l'app dispone di un percorso indirizzabile, che può essere compilato con espressioni URL che eseguono il rendering del frammento di contenuto nell'app in modo da consentirne l'anteprima.

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

Visualizzare il contenuto creato

Il componente AdventureDetail analizza semplicemente il percorso del frammento di contenuto, inserito nell'URL di anteprima tramite l'espressione ${contentFragment.path} URL, dall'URL di route e lo utilizza per raccogliere ed eseguire il rendering di WKND Adventure.

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