Visualização do fragmento de conteúdo

Aplicativos AEM headless oferecem suporte à pré-visualização de criação integrada. A experiência de visualização vincula o editor de Fragmento de conteúdo do autor do AEM ao seu aplicativo personalizado (endereçável via HTTP), permitindo um deep link no aplicativo que renderiza o Fragmento de conteúdo que está sendo visualizado.

Para usar a visualização do Fragmento de conteúdo, várias condições devem ser atendidas:

Visualizar URLs

As URLs de visualização, usando expressões de URL, estão definidas nas Propriedades do modelo de fragmento de conteúdo.

Expressões de URL

Cada modelo de fragmento de conteúdo pode ter um URL de visualização definido. O URL de visualização pode ser parametrizado por Fragmento de conteúdo usando as expressões de URL listadas na tabela abaixo. Várias expressões de URL podem ser usadas em um único URL de visualização.

Exemplo de URLs de visualização:

Visualização no aplicativo

Qualquer fragmento de conteúdo que use o modelo de fragmento de conteúdo configurado tem um botão Visualizar. O botão Visualizar abre a URL de visualização do modelo de fragmento de conteúdo e injeta os valores do fragmento de conteúdo aberto nas expressões de URL.

Execute uma atualização permanente (limpando o cache local do navegador) ao visualizar as alterações de Fragmento de conteúdo no aplicativo.

Exemplo do React

Vamos explorar o aplicativo WKND, um aplicativo simples do React que exibe aventuras do AEM usando APIs do AEM Headless GraphQL.

O código de exemplo está disponível em Github.com.

URLs e roteiros

As URLs ou rotas usadas para visualizar um Fragmento de Conteúdo devem ser combináveis usando expressões de URL. Nesta versão habilitada para visualização do aplicativo WKND, os Fragmentos de Conteúdo de aventura são exibidos por meio do componente AdventureDetail vinculado à rota /adventure<CONTENT FRAGMENT PATH>. Assim, a URL de Visualização do modelo WKND Adventure deve ser definida como https://preview.app.wknd.site:3000/adventure${contentFragment.path} para resolver para essa rota.

A visualização do Fragmento de conteúdo só funciona se o aplicativo tiver uma rota endereçável, que pode ser preenchida com expressões de URL que renderizam esse Fragmento de conteúdo no aplicativo de forma visualizável.

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

Exibir o conteúdo criado

O componente AdventureDetail simplesmente analisa o caminho do Fragmento do Conteúdo, inserido na URL de Visualização por meio da ${contentFragment.path} expressão de URL, da URL de rota, e a usa para coletar e renderizar o 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>);
}
...