DocumentaçãoAEM as a Cloud ServiceGuia do usuário

Definição de componente component-definition

Last update: Thu Nov 06 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Aplica-se a:
  • Experience Manager as a Cloud Service

Criado para:

  • Administrador
  • Desenvolvedor

Entenda o contrato JSON entre a definição do componente e o Editor universal em detalhes.

Visão geral overview

O arquivo component-definition.json define os componentes disponíveis para seus autores de conteúdo para o projeto. Este documento explica em detalhes a finalidade desse arquivo e como o Editor universal o usa para apresentar aos autores os componentes de criação de página.

TIP
Para obter uma visão geral do processo de modelagem de conteúdo, consulte o documento Modelagem de Conteúdo para Criação no WYSIWYG com Projetos do Edge Delivery Services.
TIP
Não é necessário criar seu próprio arquivo component-definition.json do zero. O modelo de projeto que você usa para inicializar seu projeto contém um arquivo component-definition.json totalmente funcional que você pode adaptar às suas necessidades.

Exemplo de definição de componente example

Veja a seguir um exemplo completo, mas simples de component-definition.json.

{
  "groups":[
    {
      "title":"General Components",
      "id":"general",
      "components":[
        {
          "title":"Text",
          "id":"text",
          "model": "text",
          "filter": "texts",
          "plugins":{
            "aem":{
              "page":{
                "resourceType":"wknd/components/text",
                "template":{
                  "text":"Default Text",
                  "name":"Text"
                }
              }
            },
            "aem65":{
              "page":{
                "resourceType":"wknd/components/text",
                "template":{
                  "text":"Default Text",
                  "name":"Text"
                }
              }
            }
          }
        }
      ]
    }
  ]
}

groups groups

groups define os grupos de componentes que o autor vê no Editor Universal ao clicar no ícone Adicionar no painel de propriedades do editor para adicionar um novo componente a uma página. Grupos ajudam a organizar os componentes. Os grupos comuns podem ser Componentes Gerais e Componentes Avançados.

  • title define a descrição textual do grupo mostrado na interface do usuário do editor.
  • id identifica exclusivamente o grupo.

components components

components define quais componentes pertencem a um grupo.

  • title define a descrição textual do componente mostrado na interface.

  • id identifica exclusivamente o componente.

    • O modelo de componente do mesmo id define os campos do componente.
    • Por ser exclusivo, ele pode ser usado, por exemplo, em uma definição de filtro para determinar quais componentes podem ser adicionados a um contêiner.

  • model define qual modelo é usado com o componente.

    • Portanto, o modelo é mantido centralmente na definição do componente e não precisa ser especificado na instrumentação.
    • Isso permite mover componentes entre contêineres.

  • filter define qual filtro deve ser usado com o componente.

plugins plugins

plugins define qual plug-in é responsável pela persistência do componente. Os plug-ins comuns incluem:

page ou cf page-cf

Depois que o plugin é definido, é necessário indicar se ele está relacionado à página ou ao fragmento.

  • page indica que o componente é conteúdo na página atual.
  • cf indica que o componente está relacionado ao conteúdo em um Fragmento de conteúdo.

page page

Se o componente for conteúdo da página, você pode fornecer as seguintes informações.

  • resourceType define o Sling resourceType usado para renderizar o componente.
  • template define chave/valores opcionais a serem gravados automaticamente no componente recém-criado e define qual filtro e/ou modelo deve ser aplicado ao componente.
    • Útil para texto explicativo, de amostra ou de espaço reservado.

template template

Ao fornecer pares de chave/valor opcionais, o template pode gravá-los automaticamente no novo componente. Além disso, os seguintes valores opcionais também podem ser especificados.

cf cf

Se o componente estiver relacionado ao conteúdo em um Fragmento de conteúdo, você poderá fornecer as seguintes informações.

  • name define um nome opcional salvo no JCR para o componente recém-criado.
    • Apenas informativo e geralmente não exibido na interface do usuário como title é.
  • cfModel define o modelo de Fragmento de Conteúdo para o componente recém-criado.
  • cfFolder define em qual pasta o fragmento de conteúdo será criado.
  • title define o título do novo fragmento de conteúdo.
  • description define uma descrição do novo fragmento de conteúdo.
  • template define chave/valores opcionais a serem gravados automaticamente no fragmento de conteúdo recém-criado.
    • Útil para texto explicativo, de amostra ou de espaço reservado.

cf Pode ser implícito cf-implied

Se a página for instrumentada para apontar para um campo de referência, cf será presumido.

<div data-aue-resource="urn:aem:/content" data-aue-type="container" data-aue-prop="field"></div>

Nesse caso, cf é presumido, porque data-aue-prop aponta para um campo de referência. Sem o data-aue-prop, o Editor Universal assumirá page, pois nesse caso os componentes não são vinculados por meio de um campo de referência.

<div data-aue-resource="urn:aem:/content" data-aue-type="container"></div>

Componentes são simplesmente subnós abaixo do recurso.

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab