Definições de modelo, campos e tipos de componentes field-types

Saiba mais sobre campos e os tipos de componentes que o Editor universal pode editar no painel de propriedades com exemplos. Entenda como você pode instrumentar seu próprio aplicativo criando uma definição de modelo e vinculando ao componente.

Visão geral overview

Ao adaptar seus próprios aplicativos para uso com o Universal Editor, você deve instrumentar os componentes e definir quais campos e tipos de componentes eles podem manipular no painel de propriedades do editor. Você faz isso criando um modelo e vinculando a ele a partir do componente.

Este documento fornece uma visão geral de uma definição de modelo e dos campos e dos tipos de componentes disponíveis para você, juntamente com exemplos de configurações.

TIP
Se você não estiver familiarizado com como instrumentar seu aplicativo para o Universal Editor, consulte o documento Visão geral do Universal Editor para desenvolvedores do AEM.

Estrutura de definição do modelo model-structure

Para configurar um componente por meio do painel de propriedades no Editor universal, uma definição de modelo deve existir e estar vinculada ao componente.

A definição do modelo é uma estrutura JSON, que começa com uma matriz de modelos.

[
  {
    "id": "model-id",        // must be unique
    "fields": []             // array of fields which shall be rendered in the properties rail
  }
]

Consulte a seção Campos deste documento para obter mais informações sobre como definir a matriz fields.

Para usar a definição de modelo com um componente, o atributo data-aue-model pode ser usado.

<div data-aue-resource="urn:datasource:/content/path" data-aue-type="component"  data-aue-model="model-id">Click me</div>

Carregando uma Definição de Modelo loading-model

Depois que um modelo é criado, ele pode ser referenciado como um arquivo externo.

<script type="application/vnd.adobe.aue.model+json" src="<url-of-model-definition>"></script>

Como alternativa, também é possível definir o modelo em linha.

<script type="application/vnd.adobe.aue.model+json">
  { ... model definition ... }
</script>

Campos fields

Um objeto de campo tem a seguinte definição de tipo.

Configuração
Tipo de valor
Descrição
Obrigatório
component
ComponentType
Renderizador do componente
Sim
name
string
Propriedade em que os dados devem ser mantidos
Sim
label
FieldLabel
Rótulo do campo
Sim
description
FieldDescription
Descrição do campo
Não
placeholder
string
Espaço reservado para o campo
Não
value
FieldValue
Valor padrão
Não
valueType
ValueType
Validação padrão, pode ser string, string[], number, date, boolean
Não
required
boolean
O campo é obrigatório?
Não
readOnly
boolean
O campo é somente leitura
Não
hidden
boolean
O campo está oculto por padrão?
Não
condition
RulesLogic
Regra para mostrar ou ocultar o campo com base em uma condição
Não
multi
boolean
O campo é um campo múltiplo?
Não
validation
ValidationType
Regra ou regras de validação para o campo
Não
raw
unknown
Dados brutos que podem ser usados pelo componente
Não

Tipos de componentes component-types

A seguir estão os tipos de componentes possíveis para usar em campos de renderização.

Descrição
Tipo de componente
Marca AEM
aem-tag
Conteúdo do AEM
aem-content
Booleano
boolean
Grupo de caixas de seleção
checkbox-group
Container
container
Fragmento do conteúdo
aem-content-fragment
Data e hora
date-time
Multisseleção
multiselect
Número
number
Grupo de opções
radio-group
Referência
reference
Rich Text
richtext
Selecionar
select
Guia
tab
Texto
text

Tag AEM aem-tag

Um tipo de componente de tag AEM habilita um seletor de tags AEM, que pode ser usado para anexar tags ao componente.

Amostra
code language-json
{
  "id": "aem-tag-picker",
  "fields": [
    {
      "component": "aem-tag",
      "label": "AEM Tag Picker",
      "name": "cq:tags",
      "valueType": "string"
    }
  ]
}
Captura de tela
Captura de tela do tipo de componente da marca AEM

Conteúdo AEM aem-content

Um tipo de componente de conteúdo do AEM permite um seletor de conteúdo do AEM, que pode ser usado para definir referências de conteúdo.

Amostra
code language-json
{
  "id": "aem-content-picker",
  "fields": [
    {
      "component": "aem-content",
      "name": "reference",
      "value": "",
      "label": "AEM Content Picker",
      "valueType": "string"
    }
  ]
}
Captura de tela
Captura de tela do tipo de componente de conteúdo do AEM

Booleano boolean

Um tipo de componente booleano armazena um valor simples true/false renderizado como alternância. Ele oferece um tipo de validação adicional.

Tipo de validação
Tipo de valor
Descrição
Obrigatório
customErrorMsg
string
Mensagem que será exibida se o valor inserido não for um valor booleano
Não
Amostra 1
code language-json
{
  "id": "boolean",
  "fields": [
    {
      "component": "boolean",
      "label": "Boolean",
      "name": "boolean",
      "valueType": "boolean"
    }
  ]
}
Amostra 2
code language-json
{
  "id": "another-boolean",
  "fields": [
    {
      "component": "boolean",
      "label": "Boolean",
      "name": "boolean",
      "valueType": "boolean",
      "validation": {
        "customErrorMsg": "Think, McFly. Think!"
      }
    }
  ]
}
Captura de tela
Captura de tela do tipo de componente booleano

Grupos de caixa de seleção checkbox-group

Semelhante a um booleano, um tipo de componente Grupo de caixas de seleção permite a seleção de vários itens true/false, renderizados como várias caixas de seleção.

Amostra
code language-json
{
  "id": "checkbox-group",
  "fields": [
    {
      "component": "checkbox-group",
      "label": "Checkbox Group",
      "name": "checkbox",
      "valueType": "string[]",
      "options": [
        { "name": "Option 1", "value": "option1" },
        { "name": "Option 2", "value": "option2" }
      ]
    }
  ]
}
Captura de tela
Captura de tela do tipo de componente do grupo de caixas de seleção

Contêiner container

Um tipo de componente de contêiner permite o agrupamento de componentes. Ela oferece uma configuração adicional.

Configuração
Tipo de valor
Descrição
Obrigatório
collapsible
boolean
O contêiner é recolhível
Não
Amostra
code language-json
 {
  "id": "container",
  "fields": [
    {
      "component": "container",
      "label": "Container",
      "name": "container",
      "valueType": "string",
      "collapsible": true,
      "fields": [
        {
          "component": "text-input",
          "label": "Simple Text 1",
          "name": "text",
          "valueType": "string"
        },
        {
          "component": "text-input",
          "label": "Simple Text 2",
          "name": "text2",
          "valueType": "string"
        }
      ]
    }
  ]
}
Captura de tela
Captura de tela do tipo de componente de contêiner

Fragmento de conteúdo content-fragment

O seletor de Fragmento de Conteúdo pode ser usado para selecionar um Fragmento de Conteúdo e suas variações (se necessário). Ela oferece uma configuração adicional.

Configuração
Tipo de valor
Descrição
Obrigatório
variationName
string
Nome da variável para armazenar a variação selecionada. Se não estiver definido, nenhum seletor de variação será exibido
Não
Amostra 1
code language-json
[
  {
    "id": "aem-content-fragment",
    "fields": [
      {
        "component": "aem-content-fragment",
        "name": "picker",
        "label": "Content Fragment Picker",
        "valueType": "string",
        "variationName": "contentFragmentVariation"
      }
    ]
  }
]
Captura de tela
Captura de tela do seletor de Fragmento de conteúdo

Data e hora date-time

Um tipo de componente de data e hora permite a especificação de uma data, hora ou combinação destas. Ele oferece configurações adicionais.

Configuração
Tipo de valor
Descrição
Obrigatório
displayFormat
string
Formato com o qual exibir a cadeia de caracteres de data
Sim
valueFormat
string
Formato no qual armazenar a cadeia de caracteres de data
Sim

Também oferece um tipo de validação adicional.

Tipo de validação
Tipo de valor
Descrição
Obrigatório
customErrorMsg
string
Mensagem que será exibida se valueFormat não for atendida
Não
Amostra 1
code language-json
{
  "id": "date-time",
  "fields": [
    {
      "component": "date-time",
      "label": "Date & Time",
      "name": "date",
      "valueType": "date"
    }
  ]
}
Amostra 2
code language-json
{
  "id": "another-date-time",
  "fields": [
    {
      "component": "date-time",
       "valueType": "date-time",
      "name": "field1",
      "label": "Date Time",
      "description": "This is a date time field that stores both date and time.",
      "required": true,
      "placeholder": "YYYY-MM-DD HH:mm:ss",
      "displayFormat": null,
      "valueFormat": null,
      "validation": {
        "customErrorMsg": "Marty! You have to come back with me!"
      }
    },
    {
      "component": "date-time",
      "valueType": "date",
      "name": "field2",
      "label": "Another Date Time",
      "description": "This is another date time field that only stores the date.",
      "required": true,
      "placeholder": "YYYY-MM-DD",
      "displayFormat": null,
      "valueFormat": null,
      "validation": {
        "customErrorMsg": "Back to the future!"
      }
    },
    {
      "component": "date-time",
      "valueType": "time",
      "name": "field3",
      "label": "Yet Another Date Time",
      "description": "This is another date time field that only stores the time.",
      "required": true,
      "placeholder": "HH:mm:ss",
      "displayFormat": null,
      "valueFormat": null,
      "validation": {
        "customErrorMsg": "Great Scott!"
      }
    }
  ]
}
Captura de tela
Captura de tela do tipo de componente de data e hora

Fragmento de experiência experience-fragment

O seletor de Fragmento de experiência pode ser usado para selecionar um Fragmento de experiência e suas variações (se necessário). Ela oferece uma configuração adicional.

Configuração
Tipo de valor
Descrição
Obrigatório
variationName
string
Nome da variável para armazenar a variação selecionada. Se não estiver definido, nenhum seletor de variação será exibido
Não
Amostra 1
code language-json
[
  {
    "id": "aem-experience-fragment",
    "fields": [
      {
        "component": "aem-experience-fragment",
        "name": "picker",
        "label": "Experience Fragment Picker",
        "valueType": "string",
        "variationName": "experienceFragmentVariation"
      }
    ]
  }
]
Captura de tela
Captura de tela do seletor de Fragmento de experiência

Multisseleção multiselect

Um tipo de componente de seleção múltipla apresenta vários itens para seleção em uma lista suspensa, incluindo a capacidade de agrupar os elementos selecionáveis.

Amostra 1
code language-json
{
  "id": "multiselect",
  "fields": [
    {
      "component": "multiselect",
      "name": "multiselect",
      "label": "Multi Select",
      "valueType": "string",
      "options": [
        { "name": "Option 1", "value": "option1" },
        { "name": "Option 2", "value": "option2" }
      ]
    }
  ]
}
Amostra 2
code language-json
{
  "id": "multiselect-grouped",
  "fields": [
    {
      "component": "multiselect",
      "name": "property",
      "label": "Multiselect field",
      "valueType": "string",
      "required": true,
      "maxSize": 2,
      "options": [
        {
          "name": "Theme",
          "children": [
            { "name": "Light", "value": "light" },
            { "name": "Dark",  "value": "dark" }
          ]
        },
        {
          "name": "Type",
          "children": [
            { "name": "Alpha", "value": "alpha" },
            { "name": "Beta", "value": "beta" },
            { "name": "Gamma", "value": "gamma" }
          ]
        }
      ]
    }
  ]
}
Capturas de tela
Captura de tela do tipo de componente de seleção múltipla
Captura de tela do tipo de componente de seleção múltipla com agrupamento

Número number

Um tipo de componente numérico permite a entrada de um número. Ela oferece tipos de validação adicionais.

Tipo de validação
Tipo de valor
Descrição
Obrigatório
numberMin
number
Número mínimo permitido
Não
numberMax
number
Número máximo permitido
Não
customErrorMsg
string
Mensagem que será exibida se numberMin ou numberMax não for atendido
Não
Amostra 1
code language-json
{
  "id": "number",
  "fields": [
    {
      "component": "number",
      "name": "number",
      "label": "Number",
      "valueType": "number",
      "value": 0
    }
  ]
}
Amostra 2
code language-json
{
  "id": "another-number",
  "fields": [
   {
      "component": "number",
      "valueType": "number",
      "name": "field1",
      "label": "Number Field",
      "description": "This is a number field.",
      "required": true,
      "placeholder": null,
      "validation": {
        "numberMin": 0,
        "numberMax": 88,
        "customErrorMsg": "You also need 1.21 gigawatts."
      }
    }
  ]
}
Captura de tela
Captura de tela do tipo de componente de número

Grupo radial radio-group

Um tipo de componente Grupo de opções permite uma seleção mutuamente exclusiva de várias opções renderizadas como um grupo semelhante a um grupo de caixas de seleção.

Amostra
code language-json
{
  "id": "radio-group",
  "fields": [
    {
      "component": "radio-group",
      "label": "Radio Group",
      "name": "radio",
      "valueType": "string",
      "options": [
        { "name": "Option 1", "value": "option1" },
        { "name": "Option 2", "value": "option2" }
      ]
    }
  ]
}
Captura de tela
Captura de tela do tipo de componente do grupo de opções

Referência reference

Um tipo de componente de referência permite uma referência a outro objeto de dados do objeto atual.

Amostra
code language-json
{
  "id": "reference",
  "fields": [
    {
      "component": "reference",
      "label": "Reference",
      "name": "reference",
      "valueType": "string"
    }
  ]
}
Captura de tela
Captura de tela do tipo de componente de referência

Texto formatado rich-text

Rich text permite entrada de rich text com várias linhas. Ela oferece tipos de validação adicionais.

Tipo de validação
Tipo de valor
Descrição
Obrigatório
maxSize
number
Número máximo de caracteres permitido
Não
customErrorMsg
string
Mensagem que será exibida se maxSize for excedido
Não
Amostra 1
code language-json
{
  "id": "richtext",
  "fields": [
    {
      "component": "richtext",
      "name": "rte",
      "label": "Rich Text",
      "valueType": "string"
    }
  ]
}
Amostra 2
code language-json
{
  "id": "another-richtext",
  "fields": [
    {
      "component": "richtext",
      "name": "rte",
      "label": "Rich Text",
      "valueType": "string",
      "validation": {
        "maxSize": 1000,
        "customErrorMsg": "That's about as funny as a screen door on a battleship."
      }
    }
  ]
}
Captura de tela
Captura de tela do tipo de componente da área de texto

Selecionar select

Um tipo de componente de seleção permite selecionar uma única opção em uma lista de opções predefinidas em um menu suspenso.

Amostra
code language-json
{
  "id": "select",
  "fields": [
    {
      "component": "select",
      "label": "Select",
      "name": "select",
      "valueType": "string",
      "options": [
        { "name": "Option 1", "value": "option1" },
        { "name": "Option 2", "value": "option2" }
      ]
    }
  ]
}
Captura de tela
Captura de tela do tipo de componente selecionado

Guia tab

Um tipo de componente de guia permite agrupar outros campos de entrada em várias guias para melhorar a organização do layout dos autores.

Uma definição tab pode ser considerada como um separador na matriz de fields. Tudo que vem após um tab será colocado nessa guia até que um novo tab seja encontrado, após o qual os itens a seguir serão colocados na nova guia.

Se desejar que itens sejam exibidos acima de todas as guias, eles deverão ser definidos antes de qualquer guia.

Amostra
code language-json
{
  "id": "tab",
  "fields": [
    {
      "component": "tab",
      "label": "Tab 1",
      "name": "tab1"
    },
    {
      "component": "text-input",
      "label": "Text 1",
      "name": "text1",
      "valueType": "string"
    },
    {
      "component": "tab",
      "label": "Tab 2",
      "name": "tab2"
    },
    {
      "component": "text-input",
      "label": "Text 2",
      "name": "text2",
      "valueType": "string"
    }
  ]
}
Captura de tela
Captura de tela do tipo de componente de guia

Texto text

O texto permite uma única linha de entrada de texto. Inclui tipos de validação adicionais.

Tipo de validação
Tipo de valor
Descrição
Obrigatório
minLength
number
Número mínimo de caracteres permitidos
Não
maxLength
number
Número máximo de caracteres permitidos
Não
regExp
string
Expressão regular à qual o texto de entrada deve corresponder
Não
customErrorMsg
string
Mensagem que será exibida se minLength, maxLength e/ou regExp for/forem violado(s)
Não
Amostra 1
code language-json
{
  "id": "simpletext",
  "fields": [
    {
      "component": "text",
      "name": "text",
      "label": "Simple Text",
      "valueType": "string"
    }
  ]
}
Amostra 2
code language-json
{
  "id": "another simpletext",
  "fields": [
    {
      "component": "text",
      "name": "text",
      "label": "Simple Text",
      "valueType": "string",
      "description": "This is a text input with validation.",
      "required": true,
      "validation": {
        "minLength": 1955,
        "maxLength": 1985,
        "regExp": "^foo:.*",
        "customErrorMsg": "Why don't you make like a tree and get outta here?"
      }
    }
  ]
}
Captura de tela
Captura de tela do tipo de componente de texto
recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab