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.
Estrutura de definição do modelo model-structure
Para configurar um componente por meio do painel de propriedades no Universal Editor, 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 panel
}
]
Consulte a seção Campos deste documento para obter mais informações sobre como definir a matriz fields.
Você pode vincular um modelo a um componente de duas maneiras: usando a definição de componente ou por meio da instrumentação.
Vinculação usando a definição do componente component-definition
Este é o método preferido para vincular o modelo ao componente. Dessa forma, você mantém o link centralmente na definição do componente e permite arrastar os componentes entre contêineres.
Basta incluir a propriedade model no objeto do componente na matriz components no arquivo component-definition.json.
Para obter detalhes, consulte o documento Definição de Componente.
Vinculação usando instrumentação instrumentation
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>
- Os projetos que implementaram o link para o modelo por meio da instrumentação continuarão a funcionar como estão, sem necessidade de alterações.
- Se você definir o modelo na definição de componente e na instrumentação, a instrumentação sempre será usada.
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.
componentComponentTypenamestringlabelFieldLabeldescriptionFieldDescriptionplaceholderstringvalueFieldValuevalueTypeValueTypestring, string[], number, date, booleanrequiredbooleanreadOnlybooleanhiddenbooleanmultibooleanvalidationValidationTyperawunknownTipos de componentes component-types
A seguir estão os tipos de componentes possíveis para usar em campos de renderização.
aem-tagaem-contentbooleancheckbox-groupcontaineraem-content-fragmentdate-timeaem-experience-fragmentmultiselectnumberradio-groupreferencerichtextselecttabtextTag do AEM aem-tag
Um tipo de componente de tag do AEM ativa um seletor de tags da AEM, que pode ser usado para anexar tags ao componente.
| code language-json |
|---|
|
Conteúdo do AEM aem-content
Um tipo de componente de conteúdo do AEM habilita um seletor de conteúdo do AEM, que pode ser usado para selecionar qualquer recurso do AEM. Ao contrário do componente de referência, que só pode selecionar ativos, o componente de conteúdo do AEM pode fazer referência a qualquer conteúdo do AEM. Ele oferece um tipo de validação adicional.
rootPathstring| code language-json |
|---|
|
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.
customErrorMsgstring| code language-json |
|---|
|
| code language-json |
|---|
|
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.
| code language-json |
|---|
|
Contêiner container
Um tipo de componente de contêiner permite o agrupamento de componentes. Ela oferece uma configuração adicional.
collapsibleboolean| code language-json |
|---|
|
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.
variationNamestringTambém oferece um tipo de validação adicional.
rootPathstring| code language-json |
|---|
|
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.
displayFormatstringvalueFormatstringTambém oferece um tipo de validação adicional.
customErrorMsgstringvalueFormat não for atendida| code language-json |
|---|
|
| code language-json |
|---|
|
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.
variationNamestringTambém oferece um tipo de validação adicional.
rootPathstring| code language-json |
|---|
|
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.
| code language-json |
|---|
|
| code language-json |
|---|
|
Número number
Um tipo de componente numérico permite a entrada de um número. Ela oferece tipos de validação adicionais.
numberMinnumbernumberMaxnumbercustomErrorMsgstringnumberMin ou numberMax não for atendido| code language-json |
|---|
|
| code language-json |
|---|
|
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.
| code language-json |
|---|
|
Referência reference
Um tipo de componente de referência permite um seletor de ativos do AEM, que pode ser usado para selecionar qualquer ativo do AEM para referência. Ao contrário do componente de conteúdo do AEM, que pode selecionar qualquer recurso do AEM, o componente de referência só pode fazer referência a ativos. Ele oferece um tipo de validação adicional.
Um tipo de componente de referência permite uma referência a outro objeto de dados do objeto atual.
| code language-json |
|---|
|
Texto formatado rich-text
Rich text permite entrada de rich text com várias linhas.
| code language-json |
|---|
|
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.
| code language-json |
|---|
|
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.
| code language-json |
|---|
|
Texto text
O texto permite uma única linha de entrada de texto. Inclui tipos de validação adicionais.
minLengthnumbermaxLengthnumberregExpstringcustomErrorMsgstringminLength, maxLength e/ou regExp for/forem violado(s)| code language-json |
|---|
|
| code language-json |
|---|
|
