Prévisualiser le fragment de contenu

Les applications AEM Headless prennent en charge la prévisualisation de création intégrée. L’expérience de prévisualisation relie l’éditeur de fragment de contenu de l’instance de création d’AEM à votre application personnalisée (adressable via HTTP), ce qui permet d’insérer un lien profond dans l’application qui effectue le rendu du fragment de contenu en cours de prévisualisation.

Pour utiliser la prévisualisation du fragment de contenu, plusieurs conditions doivent être remplies :

URL de prévisualisation

Les URL de prévisualisation, à l’aide des expressions d’URL, sont définies sur les propriétés du modèle de fragment de contenu.

Expressions d’URL

Une URL de prévisualisation peut être définie pour chaque modèle de fragment de contenu. L’URL de prévisualisation peut être paramétrée par fragment de contenu à l’aide des expressions d’URL répertoriées dans le tableau ci-dessous. Plusieurs expressions d’URL peuvent être utilisées dans une seule URL de prévisualisation.

Exemples d’URL de prévisualisation :

Prévisualisation in-app

Tout fragment de contenu utilisant le modèle de fragment de contenu configuré comporte un bouton Prévisualisation. Le bouton Prévisualisation ouvre l’URL de prévisualisation du modèle de fragment de contenu et injecte les valeurs du fragment de contenu ouvert dans les expressions d’URL.

Effectuez une actualisation stricte (qui efface le cache local du navigateur) lors de la prévisualisation des modifications du fragment de contenu dans l’application.

Exemple pour React

Explorons l’application WKND, une application React simple qui présente les aventures d’AEM en utilisant des API GraphQL AEM Headless.

L’exemple de code est disponible sur Github.com.

URL et itinéraires

Les URL ou les itinéraires utilisés pour prévisualiser un fragment de contenu doivent pouvoir être composables à l’aide des expressions d’URL. Dans cette version avec prévisualisation de l’application WKND, les fragments de contenu d’aventure s’affichent via le composant AdventureDetail lié à l’itinéraire /adventure<CONTENT FRAGMENT PATH>. Par conséquent, l’URL de prévisualisation du modèle WKND Adventure doit être définie sur https://preview.app.wknd.site:3000/adventure${contentFragment.path} pour résoudre cet itinéraire.

La prévisualisation de fragment de contenu ne fonctionne que si l’application dispose d’un itinéraire adressable pouvant être renseigné par des expressions d’URL qui effectuent le rendu de ce fragment de contenu dans l’application d’une manière prévisualisable.

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

Afficher le contenu créé

Le composant AdventureDetail analyse simplement le chemin d’accès au fragment de contenu, injecté dans l’URL de prévisualisation via l’expression d’URL ${contentFragment.path}, à partir de l’URL de l’itinéraire, et l’utilise pour collecter et effectuer le rendu de 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>);
}
...