Definizioni di modelli, campi e tipi di componenti field-types
Scopri i campi e i tipi di componenti che possono essere modificati dall’Editor universale nella barra delle proprietà, con alcuni esempi. Scopri come creare una definizione di modello e un collegamento al componente per sfruttare al meglio la tua app.
Panoramica overview
Quando adattate le vostre app per l'uso con l'Editor universale, dovete dotare gli strumenti dei componenti e definire quali campi e tipi di componenti possono essere manipolati nella barra delle proprietà dell'editor. A tale scopo, crea un modello e crea un collegamento a tale modello dal componente.
Questo documento fornisce una panoramica della definizione di un modello, dei campi e dei tipi di componenti disponibili, insieme ad esempi di configurazioni.
Struttura definizione modello model-structure
Per configurare un componente tramite la barra delle proprietà nell’Editor universale, è necessario che esista una definizione di modello e che tale definizione sia collegata al componente.
La definizione del modello è una struttura JSON che inizia con un array di modelli.
[
{
"id": "model-id", // must be unique
"fields": [] // array of fields which shall be rendered in the properties rail
}
]
Consulta la sezione Fields di questo documento per ulteriori informazioni su come definire l'array fields.
Per utilizzare la definizione del modello con un componente, è possibile utilizzare l'attributo data-aue-model.
<div data-aue-resource="urn:datasource:/content/path" data-aue-type="component" data-aue-model="model-id">Click me</div>
Caricamento di una definizione di modello loading-model
Una volta creato un modello, è possibile farvi riferimento come file esterno.
<script type="application/vnd.adobe.aue.model+json" src="<url-of-model-definition>"></script>
In alternativa, potete anche definire il modello in linea.
<script type="application/vnd.adobe.aue.model+json">
{ ... model definition ... }
</script>
Campi fields
Un oggetto campo ha la seguente definizione di tipo.
componentComponentTypenamestringlabelFieldLabeldescriptionFieldDescriptionplaceholderstringvalueFieldValuevalueTypeValueTypestring, string[], number, date, booleanrequiredbooleanreadOnlybooleanhiddenbooleanmultibooleanvalidationValidationTyperawunknownTipi di componenti component-types
Di seguito sono elencati i tipi di componenti che è possibile utilizzare per il rendering dei campi.
aem-tagaem-contentbooleancheckbox-groupcontaineraem-content-fragmentdate-timemultiselectnumberradio-groupreferencerichtextselecttabtextTag AEM aem-tag
Un tipo di componente tag AEM abilita un selettore di tag AEM, che può essere utilizzato per allegare i tag al componente.
| code language-json |
|---|
|
Contenuto AEM aem-content
Un tipo di componente di contenuto AEM abilita un selettore di contenuti AEM, che può essere utilizzato per impostare riferimenti al contenuto.
| code language-json |
|---|
|
Booleano boolean
Un tipo di componente booleano memorizza un semplice valore true/false renderizzato come un interruttore. Offre un tipo di convalida aggiuntivo.
customErrorMsgstring| code language-json |
|---|
|
| code language-json |
|---|
|
Gruppo di caselle di controllo checkbox-group
Simile a un booleano, un tipo di componente gruppo casella di controllo consente la selezione di più elementi true/false, riprodotti come più caselle di controllo.
| code language-json |
|---|
|
Contenitore container
Un tipo di componente contenitore consente il raggruppamento di componenti. Offre una configurazione aggiuntiva.
collapsibleboolean| code language-json |
|---|
|
Frammenti di contenuto content-fragment
Il selettore Frammento di contenuto può essere utilizzato per selezionare un Frammento di contenuto e le relative varianti (se necessario). Offre una configurazione aggiuntiva.
variationNamestring| code language-json |
|---|
|
Data e ora date-time
Un tipo di componente data e ora consente di specificare una data, un’ora o una combinazione di esse. Offre configurazioni aggiuntive.
displayFormatstringvalueFormatstringOffre inoltre un tipo di convalida aggiuntivo.
customErrorMsgstringvalueFormat non è soddisfatto| code language-json |
|---|
|
| code language-json |
|---|
|
Frammento di esperienza experience-fragment
Il selettore Frammento esperienza può essere utilizzato per selezionare un Frammento esperienza e le relative varianti (se necessario). Offre una configurazione aggiuntiva.
variationNamestring| code language-json |
|---|
|
Selezione multipla multiselect
Un tipo di componente a selezione multipla presenta più elementi da selezionare in un elenco a discesa, inclusa la possibilità di raggruppare gli elementi selezionabili.
| code language-json |
|---|
|
| code language-json |
|---|
|
Numero number
Un tipo di componente numero consente di immettere un numero. Offre tipi di convalida aggiuntivi.
numberMinnumbernumberMaxnumbercustomErrorMsgstringnumberMin o numberMax non è soddisfatto| code language-json |
|---|
|
| code language-json |
|---|
|
Gruppo pulsanti di scelta radio-group
Un tipo di componente gruppo di scelta consente una selezione reciprocamente esclusiva da più opzioni sottoposte a rendering come gruppo simile a un gruppo di caselle di controllo.
| code language-json |
|---|
|
Riferimento reference
Un tipo di componente di riferimento consente un riferimento a un altro oggetto dati dall'oggetto corrente.
| code language-json |
|---|
|
Testo formattato rich-text
Il testo RTF consente l’inserimento di testo RTF su più righe. Offre tipi di convalida aggiuntivi.
maxSizenumbercustomErrorMsgstringmaxSize viene superato| code language-json |
|---|
|
| code language-json |
|---|
|
Seleziona select
Un tipo di componente seleziona consente di selezionare una singola opzione da un elenco di opzioni predefinite in un menu a discesa.
| code language-json |
|---|
|
Linguetta tab
Un tipo di componente Scheda consente di raggruppare altri campi di input in più schede per migliorare l’organizzazione del layout per gli autori.
Una definizione di tab può essere considerata come un separatore nell'array di fields. Tutto ciò che arriva dopo un tab verrà inserito in quella scheda fino a quando non si incontra un nuovo tab, dopo di che i seguenti elementi verranno inseriti nella nuova scheda.
Se desideri che gli elementi vengano visualizzati sopra tutte le schede, è necessario definirli prima di qualsiasi scheda.
| code language-json |
|---|
|
Testo text
Il testo consente di inserire una singola riga di testo. Include tipi di convalida aggiuntivi.
minLengthnumbermaxLengthnumberregExpstringcustomErrorMsgstringminLength, maxLength e/o regExp sono violati| code language-json |
|---|
|
| code language-json |
|---|
|
