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 all’app personalizzata (indirizzabile tramite HTTP), consentendo un collegamento diretto all’app che esegue il rendering del frammento di contenuto visualizzato in anteprima.

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

1. L’app deve essere distribuita in un URL accessibile agli autori
2. L’app deve essere configurata per la connessione al servizio AEM Author (anziché al servizio AEM Publish)
3. L’app deve essere progettata con URL o percorsi che possono utilizzare ID o percorso del frammento di contenuto per selezionare i frammenti di contenuto da visualizzare in anteprima nell’esperienza dell’app.

URL di anteprima

URL di anteprima, utilizzo Espressioni URL, sono impostati nelle proprietà del modello per frammenti di contenuto.

1. Accedi al servizio AEM Author come amministratore
2. Accedi a Strumenti > Generale > Modelli per frammenti di contenuto
3. Seleziona la Modello per frammenti di contenuto e seleziona Proprietà dalla barra delle azioni superiore.
4. Immetti l’URL di anteprima per il modello per frammenti di contenuto utilizzando Espressioni URL
   • L’URL di anteprima deve puntare a una distribuzione dell’app che si connette al servizio AEM Author.

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:

• Un URL di anteprima su Avventura il modello potrebbe essere simile a https://preview.app.wknd.site/adventure${contentFragment.path} che si risolve in https://preview.app.wknd.site/adventure/content/dam/wknd-shared/en/adventures/surf-camp-bali/surf-camp-bali
• Un URL di anteprima su Articolo il modello potrebbe essere simile a https://preview.news.wknd.site/${contentFragment.model.name}/${contentFragment.id}.html?variation=${contentFragment.variation} i risolve https://preview.news.wknd.site/article/99c34317-1901-2ab3-35b6-d7890aa1c23c.html?variation=main

Anteprima in-app

Qualsiasi frammento di contenuto che utilizza il modello per frammenti di contenuto configurato dispone di un pulsante Anteprima. Il pulsante Anteprima apre l’URL di anteprima del modello per frammenti di contenuto e inserisce i valori del frammento di contenuto aperto nel 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 su 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 AdventureDetail componente 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 del frammento di contenuto funziona solo se l’app dispone di un percorso indirizzabile che può essere popolato con Espressioni URL che esegue il rendering del frammento di contenuto nell’app in modo da consentirne la visualizzazione in anteprima.

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

Visualizzare il contenuto creato

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

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

Risorse Business.Adobe.com