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:

1. O aplicativo deve ser implantado em um URL acessível aos autores
2. O aplicativo deve ser configurado para se conectar ao serviço do AEM Author (em vez do serviço de Publicação do AEM)
3. O aplicativo deve ser projetado com URLs ou rotas que possam usar Caminho ou ID do fragmento de conteúdo para selecionar os fragmentos de conteúdo que serão exibidos para visualização na experiência do aplicativo.

Visualizar URLs

URLs de visualização, uso de Expressões de URL, são definidos nas Propriedades do modelo de fragmento de conteúdo.

1. Faça logon no serviço de Autor do AEM como administrador
2. Navegue até Ferramentas > Geral > Modelos de fragmento de conteúdo
3. Selecione o Modelo de fragmento de conteúdo e selecione Propriedades na barra de ação superior.
4. Insira o URL de visualização do modelo de fragmento de conteúdo usando Expressões de URL
   • O URL de visualização deve apontar para uma implantação do aplicativo que se conecta ao serviço do AEM Author.

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:

• Um URL de pré-visualização no Aventura modelo pode parecer https://preview.app.wknd.site/adventure${contentFragment.path} que resolve para https://preview.app.wknd.site/adventure/content/dam/wknd-shared/en/adventures/surf-camp-bali/surf-camp-bali
• Um URL de pré-visualização no Artigo modelo pode parecer https://preview.news.wknd.site/${contentFragment.model.name}/${contentFragment.id}.html?variation=${contentFragment.variation} a resolução https://preview.news.wknd.site/article/99c34317-1901-2ab3-35b6-d7890aa1c23c.html?variation=main

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 o URL de visualização do modelo de fragmento de conteúdo e injeta os valores do fragmento de conteúdo aberto na 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 da AdventureDetail componente vinculado à rota /adventure<CONTENT FRAGMENT PATH>. Portanto, o URL de visualização do modelo WKND Adventure deve ser definido como https://preview.app.wknd.site:3000/adventure${contentFragment.path} para resolver para esta rota.

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

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

Exibir o conteúdo criado

A variável AdventureDetail O componente simplesmente analisa o caminho do Fragmento de conteúdo, inserido no URL de visualização por meio da ${contentFragment.path} Expressão de URL, do URL da rota, e o usa para coletar e renderizar o 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>);
}
...