Les applications AEM sans affichage prennent en charge la prévisualisation de création intégrée. L’expérience d’aperçu relie l’éditeur de fragment de contenu de l’auteur AEM à votre application personnalisée (accessible 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 l’aperçu du fragment de contenu, plusieurs conditions doivent être remplies :
URL d’aperçu, à l’aide de Expressions d’URL, sont définis sur les propriétés du modèle de fragment de contenu.
Un URL d’aperçu peut être défini pour chaque modèle de fragment de contenu. L’URL d’aperçu 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 d’aperçu.
Expression d’URL | Valeur | |
---|---|---|
Chemin du fragment de contenu | ${contentFragment.path} |
/content/dam/wknd-shared/en/adventures/surf-camp-bali/surf-camp-bali |
Identifiant du fragment de contenu | ${contentFragment.id} |
12c34567-8901-2aa3-45b6-d7890aa1c23c |
Variation de fragment de contenu | ${contentFragment.variation} |
main |
Chemin du modèle de fragment de contenu | ${contentFragment.model.path} |
/conf/wknd-shared/settings/dam/cfm/models/adventure |
Nom du modèle de fragment de contenu | ${contentFragment.model.name} |
adventure |
Exemples d’URL d’aperçu :
https://preview.app.wknd.site/adventure${contentFragment.path}
qui résout sur https://preview.app.wknd.site/adventure/content/dam/wknd-shared/en/adventures/surf-camp-bali/surf-camp-bali
https://preview.news.wknd.site/${contentFragment.model.name}/${contentFragment.id}.html?variation=${contentFragment.variation}
la résolution https://preview.news.wknd.site/article/99c34317-1901-2ab3-35b6-d7890aa1c23c.html?variation=main
Tout fragment de contenu utilisant le modèle de fragment de contenu configuré comporte un bouton Aperçu . Le bouton Aperçu ouvre l’URL d’aperçu du modèle de fragment de contenu et injecte les valeurs du fragment de contenu ouvert dans la variable Expressions d’URL.
Effectuez une actualisation stricte (effacer le cache local du navigateur) lors de la prévisualisation des modifications du fragment de contenu dans l’application.
Explorons l’application WKND, une application React simple qui présente les aventures d’AEM en utilisant AEM API GraphQL sans affichage.
L’exemple de code est disponible sur Github.com.
Les URL ou les itinéraires utilisés pour prévisualiser un fragment de contenu doivent pouvoir être composites à l’aide de Expressions d’URL. Dans cette version de l’application WKND avec prévisualisation, les fragments de contenu aventure s’affichent via le AdventureDetail
composant lié à l’itinéraire /adventure<CONTENT FRAGMENT PATH>
. Par conséquent, l’URL d’aperçu du modèle WKND Adventure doit être définie sur https://preview.app.wknd.site:3000/adventure${contentFragment.path}
pour résoudre ce problème.
L’aperçu de fragment de contenu ne fonctionne que si l’application dispose d’un itinéraire adressable pouvant être renseigné par Expressions d’URL qui restituent ce fragment de contenu dans l’application d’une manière prévisualisable.
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;
Le AdventureDetail
Le composant analyse simplement le chemin d’accès au fragment de contenu, injecté dans l’URL d’aperçu via la propriété ${contentFragment.path}
Expression d’URL, à partir de l’URL de l’itinéraire et l’utilise pour collecter et effectuer le rendu de 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>);
}
...