Documentação AEM as a Cloud Service Guia do usuário

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

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Tópicos:

Criado para:

undefined
undefined

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

date-time

multiselect

number

radio-group

reference

richtext

select

tab

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

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

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

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

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" } ] } ] }`

{
  "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

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

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" } ] } ] }`

 {
  "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

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

code language-json
`[ { "id": "aem-content-fragment", "fields": [ { "component": "aem-content-fragment", "name": "picker", "label": "Content Fragment Picker", "valueType": "string", "variationName": "contentFragmentVariation" } ] } ]`

[
  {
    "id": "aem-content-fragment",
    "fields": [
      {
        "component": "aem-content-fragment",
        "name": "picker",
        "label": "Content Fragment Picker",
        "valueType": "string",
        "variationName": "contentFragmentVariation"
      }
    ]
  }
]

Captura de tela

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

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!" } } ] }

{
  "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

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

code language-json
`[ { "id": "aem-experience-fragment", "fields": [ { "component": "aem-experience-fragment", "name": "picker", "label": "Experience Fragment Picker", "valueType": "string", "variationName": "experienceFragmentVariation" } ] } ]`

[
  {
    "id": "aem-experience-fragment",
    "fields": [
      {
        "component": "aem-experience-fragment",
        "name": "picker",
        "label": "Experience Fragment Picker",
        "valueType": "string",
        "variationName": "experienceFragmentVariation"
      }
    ]
  }
]

Captura de tela

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

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" } ] } ] }`

{
  "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

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" } ] } ] } ] }`

{
  "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

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." } } ] }`

{
  "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

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

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" } ] } ] }`

{
  "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

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

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

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." } } ] }`

{
  "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

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

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" } ] } ] }`

{
  "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

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

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" } ] }`

{
  "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

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

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?" } } ] }`

{
  "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

recommendation-more-help

fbcff2a9-b6fe-4574-b04a-21e75df764ab