Definizioni di modelli, campi e tipi di componenti field-types
Scopri i campi e i tipi di componenti che l’editor universale può modificare nel pannello delle proprietà con alcuni esempi. Scopri come puoi dotare di strumenti la tua app creando una definizione di modello e un collegamento al componente.
Panoramica overview
Quando adatti le tue app per utilizzarle con l’editor universale, devi dotare di strumenti i componenti e definire quali campi e tipi di componenti possono manipolare nel pannello delle proprietà dell’editor. Questo avviene mediante la creazione di un modello e un collegamento ad esso dal componente.
Questo documento fornisce una panoramica della definizione di un modello, dei campi e dei tipi di componenti disponibili, insieme a configurazioni di esempio.
Struttura della definizione di un modello model-structure
Per configurare un componente tramite il pannello delle proprietà nell’editor universale, è necessario che sia presente una definizione di modello e che questa 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 panel
}
]
Per ulteriori informazioni su come definire l’array fields, consulta la sezione Campi di questo documento.
Puoi collegare un modello a un componente in due modi, ovvero utilizzando la definizione del componente o tramite la strumentazione.
Collegamento tramite la definizione del componente component-definition
Si tratta del metodo preferito per collegare il modello al componente. In questo modo puoi mantenere il collegamento a livello centrale nella definizione del componente e consentire il trascinamento dei componenti tra i contenitori.
È sufficiente includere la proprietà model nell’oggetto del componente nell’array components nel file component-definition.json.
Per informazioni dettagliate, consulta il documento Definizione del componente.
Collegamento tramite strumentazione instrumentation
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>
- I progetti che hanno implementato il collegamento al modello tramite la strumentazione continueranno a funzionare così come sono senza bisogno di modifiche.
- Se definisci il modello nella definizione del componente e nella strumentazione, quest’ultima verrà sempre utilizzata.
Caricamento della definizione di un 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, puoi anche definire il modello in linea.
<script type="application/vnd.adobe.aue.model+json">
{ ... model definition ... }
</script>
Campi fields
Di seguito è riportata la definizione di tipo di un oggetto campo.
componentComponentTypelabelFieldLabeldescriptionFieldDescriptionvalueFieldValuevalue nella definizione del modello. In questo modo ciò che visualizzi corrisponderà a ciò che viene mantenuto nel backend.valueTypeValueTypestring, string[], number, date, booleanrequiredbooleanreadOnlybooleanhiddenbooleanmultibooleanL’annidamento dei contenitori non è consentito per i campi multipli nel pannello delle proprietà
validationValidationTyperawunknown_) non è consentito nei nomi dei campi quando si utilizzano i plug-in aem o xwalk.Campo name e annidamento nesting
Il campo name può puntare direttamente a una proprietà della risorsa corrente oppure, nel caso di componenti in cq:Pages, può anche utilizzare un percorso a una proprietà annidata. Ad esempio:
"name": "teaser/image/fileReference"
Tipi di componente component-types
Di seguito sono elencati i tipi di componenti che è possibile utilizzare per il rendering dei campi.
aem-tagaem-contentbooleancheckbox-groupcontaineraem-content-fragmentdate-timeaem-experience-fragmentmultiselectnumberradio-groupreferencerichtextselecttabtexttextareaTag AEM aem-tag
Un tipo di componente tag AEM abilita un selettore di tag AEM che può essere utilizzato per applicare i tag al componente.
| code language-json |
|---|
|
Contenuto AEM aem-content
Un tipo di componente contenuto AEM abilita un selettore di contenuti AEM che può essere utilizzato per selezionare qualsiasi risorsa AEM. A differenza del componente riferimento che può selezionare solo le risorse, il componente contenuto AEM può fare riferimento a qualsiasi contenuto AEM. Offre un tipo di convalida aggiuntivo.
rootPathstring| code language-json |
|---|
|
Booleano boolean
Un tipo di componente booleano memorizza un semplice valore vero/falso sottoposto a rendering come pulsante di attivazione/disattivazione. Offre un tipo di convalida aggiuntivo.
customErrorMsgstring| code language-json |
|---|
|
| code language-json |
|---|
|
Gruppo di caselle di controllo checkbox-group
Essendo simile a un booleano, un tipo di componente gruppo di caselle di controllo consente la selezione di più elementi veri/falsi, sottoposti a rendering come più caselle di controllo.
| code language-json |
|---|
|
Contenitore container
Un tipo di componente contenitore consente il raggruppamento di componenti, incluso il supporto per più campi. Offre una configurazione aggiuntiva. L’annidamento dei contenitori non è consentito per i campi multipli nel pannello delle proprietà
collapsibleboolean| code language-json |
|---|
|
| code language-json |
|---|
|
Frammento di contenuto content-fragment
Il selettore di frammenti di contenuto può essere utilizzato per selezionare un frammento di contenuto e le relative varianti (se necessario). Offre una configurazione aggiuntiva.
variationNamestringOffre inoltre un tipo di convalida aggiuntivo.
rootPathstring| 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 viene soddisfatto| code language-json |
|---|
|
| code language-json |
|---|
|
Frammento di esperienza experience-fragment
Il selettore Frammento di esperienza può essere utilizzato per selezionare un frammento esperienza e le relative varianti (se necessario). Offre una configurazione aggiuntiva.
variationNamestringOffre inoltre un tipo di convalida aggiuntivo.
rootPathstring| code language-json |
|---|
|
Selezione multipla multiselect
Un tipo di componente a selezione multipla presenta più elementi da selezionare in un elenco a discesa, con 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 pulsanti di scelta consente una selezione reciprocamente esclusiva di più opzioni sottoposte a rendering come gruppo simile a un gruppo di caselle di controllo.
| code language-json |
|---|
|
Riferimento reference
Un tipo di componente riferimento abilita un selettore di risorse AEM che può essere utilizzato per selezionare qualsiasi risorsa AEM a cui fare riferimento. A differenza del componente contenuto AEM che può selezionare qualsiasi risorsa AEM, il componente riferimento può fare riferimento solo alle risorse. Offre un tipo di convalida aggiuntivo.
Un tipo di componente riferimento consente un riferimento a un altro oggetto dati dall’oggetto corrente.
| code language-json |
|---|
|
Testo formattato rich-text
Il testo formattato può essere inserito su più righe.
| code language-json |
|---|
|
Seleziona select
Un tipo di componente selezione consente di selezionare una singola opzione da un elenco di opzioni predefinite in un menu a discesa.
| code language-json |
|---|
|
Scheda 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 |
|---|
|
Area testo textarea
L'area di testo consente l'inserimento di più righe di testo.
| code language-json |
|---|
|
