Per creare un modulo adattivo utilizzando uno schema JSON come modello di modulo è necessario conoscere a fondo lo schema JSON. Si consiglia di leggere attentamente il seguente contenuto prima di questo articolo.
Adobe Experience Manager Forms supporta la creazione di un modulo adattivo utilizzando uno schema JSON esistente come modello di modulo. Questo schema JSON rappresenta la struttura in cui i dati vengono prodotti o utilizzati dal sistema back-end dell’organizzazione. Lo schema JSON utilizzato deve essere conforme a specifiche v4.
Le funzioni chiave dell’utilizzo di uno schema JSON sono:
Uno schema JSON è costituito da tipi di elementi semplici e complessi. Gli elementi dispongono di attributi che aggiungono regole all’elemento. Quando questi elementi e attributi vengono trascinati in un modulo adattivo, vengono mappati automaticamente al corrispondente componente del modulo adattivo.
La mappatura degli elementi JSON con i componenti dei moduli adattivi è la seguente:
"birthDate": {
"type": "string",
"format": "date",
"pattern": "date{DD MMMM, YYYY}",
"aem:affKeyword": [
"DOB",
"Date of Birth"
],
"description": "Date of birth in DD MMMM, YYYY",
"aem:afProperties": {
"displayPictureClause": "date{DD MMMM, YYYY}",
"displayPatternType": "date{DD MMMM, YYYY}",
"validationPatternType": "date{DD MMMM, YYYY}",
"validatePictureClause": "date{DD MMMM, YYYY}",
"validatePictureClauseMessage": "Date must be in DD MMMM, YYYY format."
}
Elemento JSON, proprietà o attributi | Componente modulo adattivo |
---|---|
Proprietà stringa con vincolo enum ed enumNames. Sintassi,
|
Componente a discesa:
|
Proprietà stringa con vincolo di formato. Ad esempio e-mail e data. Sintassi,
|
|
|
Campo di testo |
proprietà number |
Campo numerico con sottotipo impostato su float |
proprietà integer |
Campo numerico con sottotipo impostato su integer |
proprietà booleana |
Interruttore |
proprietà oggetto |
Pannello |
proprietà array | Pannello ripetibile con min e max uguali rispettivamente a minItems e maxItems. Sono supportati solo array omogenei. Pertanto, il vincolo items deve essere un oggetto e non un array. |
Il modulo adattivo utilizza le informazioni disponibili nello schema JSON per mappare ogni campo generato. In particolare:
title
funge da etichetta per i componenti del modulo adattivo.description
viene impostata come descrizione lunga per un componente modulo adattivo.default
funge da valore iniziale di un campo modulo adattivo.maxLength
la proprietà è impostata come maxlength
attributo del componente campo di testo.minimum
, maximum
, exclusiveMinimum
, e exclusiveMaximum
Le proprietà vengono utilizzate per il componente Casella numerica.DatePicker component
proprietà aggiuntive dello schema JSON minDate
e maxDate
vengono fornite.minItems
e maxItems
Le proprietà vengono utilizzate per limitare il numero di elementi/campi che possono essere aggiunti o rimossi da un componente del pannello.readOnly
imposta la proprietà readonly
di un componente modulo adattivo.required
La proprietà contrassegna il campo modulo adattivo come obbligatorio, mentre in panel (dove tipo è oggetto), i dati JSON finali inviati hanno campi con valore vuoto corrispondente a tale oggetto.pattern
viene impostata come pattern di convalida (espressione regolare) in un modulo adattivo.Di seguito è riportato un esempio di schema JSON.
{
"$schema": "https://json-schema.org/draft-04/schema#",
"definitions": {
"employee": {
"type": "object",
"properties": {
"userName": {
"type": "string"
},
"dateOfBirth": {
"type": "string",
"format": "date"
},
"email": {
"type": "string",
"format": "email"
},
"language": {
"type": "string"
},
"personalDetails": {
"$ref": "#/definitions/personalDetails"
},
"projectDetails": {
"$ref": "#/definitions/projectDetails"
}
},
"required": [
"userName",
"dateOfBirth",
"language"
]
},
"personalDetails": {
"type": "object",
"properties": {
"GeneralDetails": {
"$ref": "#/definitions/GeneralDetails"
},
"Family": {
"$ref": "#/definitions/Family"
},
"Income": {
"$ref": "#/definitions/Income"
}
}
},
"projectDetails": {
"type": "array",
"items": {
"properties": {
"name": {
"type": "string"
},
"age": {
"type": "number"
},
"projects": {
"$ref": "#/definitions/projects"
}
}
},
"minItems": 1,
"maxItems": 4
},
"projects": {
"type": "array",
"items": {
"properties": {
"name": {
"type": "string"
},
"age": {
"type": "number"
},
"projectsAdditional": {
"$ref": "#/definitions/projectsAdditional"
}
}
},
"minItems": 1,
"maxItems": 4
},
"projectsAdditional": {
"type": "array",
"items": {
"properties": {
"Additional_name": {
"type": "string"
},
"Additional_areacode": {
"type": "number"
}
}
},
"minItems": 1,
"maxItems": 4
},
"GeneralDetails": {
"type": "object",
"properties": {
"age": {
"type": "number"
},
"married": {
"type": "boolean"
},
"phone": {
"type": "number",
"aem:afProperties": {
"sling:resourceType": "/libs/fd/af/components/guidetelephone",
"guideNodeClass": "guideTelephone"
}
},
"address": {
"type": "string"
}
}
},
"Family": {
"type": "object",
"properties": {
"spouse": {
"$ref": "#/definitions/spouse"
},
"kids": {
"$ref": "#/definitions/kids"
}
}
},
"Income": {
"type": "object",
"properties": {
"monthly": {
"type": "number"
},
"yearly": {
"type": "number"
}
}
},
"spouse": {
"type": "object",
"properties": {
"name": {
"type": "string"
},
"Income": {
"$ref": "#/definitions/Income"
}
}
},
"kids": {
"type": "array",
"items": {
"properties": {
"name": {
"type": "string"
},
"age": {
"type": "number"
}
}
},
"minItems": 1,
"maxItems": 4
}
},
"type": "object",
"properties": {
"employee": {
"$ref": "#/definitions/employee"
}
}
}
Le chiavi di definizione vengono utilizzate per identificare gli schemi riutilizzabili. Per creare frammenti vengono utilizzate le definizioni di schema riutilizzabili. È simile all'identificazione di tipi complessi in XSD. Di seguito è riportato un esempio di schema JSON con definizioni:
{
"$schema": "https://json-schema.org/draft-04/schema#",
"definitions": {
"address": {
"type": "object",
"properties": {
"street_address": { "type": "string" },
"city": { "type": "string" },
"state": { "type": "string" }
},
"required": ["street_address", "city", "state"]
}
},
"type": "object",
"properties": {
"billing_address": { "$ref": "#/definitions/address" },
"shipping_address": { "$ref": "#/definitions/address" }
}
}
L'esempio precedente definisce un record cliente, in cui ogni cliente ha sia un indirizzo di spedizione che un indirizzo di fatturazione. La struttura di entrambi gli indirizzi è la stessa: gli indirizzi hanno un indirizzo stradale, una città e uno stato, quindi è consigliabile non duplicare gli indirizzi. Inoltre, agevola l’aggiunta e l’eliminazione dei campi per eventuali modifiche future.
È possibile utilizzare aem:afProperties per preconfigurare il campo Schema JSON da mappare a un componente modulo adattivo personalizzato. Di seguito è riportato un esempio:
{
"properties": {
"sizeInMB": {
"type": "integer",
"minimum": 16,
"maximum": 512,
"aem:afProperties" : {
"sling:resourceType" : "/apps/fd/af/components/guideTextBox",
"guideNodeClass" : "guideTextBox"
}
}
},
"required": [ "sizeInMB" ],
"additionalProperties": false
}
JavaScript è il linguaggio di espressione dei moduli adattivi. Tutte le espressioni sono espressioni JavaScript valide e utilizzano API di modelli di script per moduli adattivi. È possibile preconfigurare gli oggetti modulo in valutare un’espressione in un evento modulo.
Utilizza la proprietà aem:afproperties per preconfigurare espressioni o script di moduli adattivi per i componenti dei moduli adattivi. Ad esempio, quando si attiva l'evento di inizializzazione, il codice seguente imposta il valore del campo telefono e stampa un valore nel registro:
"telephone": {
"type": "string",
"pattern": "/\\d{10}/",
"aem:affKeyword": ["phone", "telephone","mobile phone", "work phone", "home phone", "telephone number", "telephone no", "phone number"],
"description": "Telephone Number",
"aem:afProperties" : {
"sling:resourceType" : "fd/af/components/guidetelephone",
"guideNodeClass" : "guideTelephone",
"events": {
"Initialize" : "this.value = \"1234567890\"; console.log(\"ef:gh\") "
}
}
}
Devi essere membro di forms-power-user group per configurare script o espressioni per l'oggetto modulo. La tabella seguente elenca tutti gli eventi script supportati per un componente modulo adattivo.
Componente \ Evento | inizializzare |
Calcola | Visibilità | Convalida | Abilitato | Conferma valore | Clic | Opzioni |
---|---|---|---|---|---|---|---|---|
Campo testo | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
||
Campo numerico | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
||
Stepper numerico | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
||
Pulsante di scelta | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
||
Telefono | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
||
Interruttore | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
||
Pulsante | ![]() |
![]() |
![]() |
![]() |
||||
Casella di controllo | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
|
Elenchi a discesa | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
|
Scelta dell'immagine | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
|
Campo immissione data | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
||
Selettore data | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
|||
Allegato file | ![]() |
![]() |
![]() |
![]() |
![]() |
|||
Immagine | ![]() |
![]() |
||||||
Draw | ![]() |
![]() |
||||||
Pannello | ![]() |
![]() |
Alcuni esempi di utilizzo degli eventi in un JSON nascondono un campo sull’evento di inizializzazione e configurano il valore di un altro campo sull’evento di commit del valore. Per informazioni dettagliate sulla creazione di espressioni per gli eventi script, vedi Espressioni modulo adattivo.
Di seguito è riportato un codice JSON di esempio per gli esempi precedentemente menzionati.
"name": {
"type": "string",
"aem:afProperties": {
"events" : {
"Initialize" : "this.visible = false;"
}
}
}
"Income": {
"type": "object",
"properties": {
"monthly": {
"type": "number",
"aem:afProperties": {
"events" : {
"Value Commit" : "IncomeYearly.value = this.value * 12;"
}
}
},
"yearly": {
"type": "number",
"aem:afProperties": {
"name": "IncomeYearly"
}
}
}
}
Per limitare i valori accettabili per un componente modulo adattivo, puoi aggiungere le seguenti restrizioni agli elementi dello schema JSON:
Proprietà schema |
Tipo di dati |
Descrizione |
Componente |
|
Stringa |
Specifica il limite superiore per valori numerici e date. Per impostazione predefinita, il valore massimo è incluso. |
|
|
Stringa |
Specifica il limite inferiore per i valori numerici e le date. Per impostazione predefinita, è incluso il valore minimo. |
|
|
Booleano |
Se true, il valore numerico o la data specificati nel componente del modulo devono essere inferiori al valore numerico o alla data specificati per la proprietà maximum. Se false, il valore numerico o la data specificati nel componente del modulo deve essere minore o uguale al valore numerico o alla data specificati per la proprietà maximum. |
|
|
Booleano |
Se true, il valore numerico o la data specificati nel componente del modulo devono essere maggiori del valore numerico o della data specificati per la proprietà minimum. Se false, il valore numerico o la data specificati nel componente del modulo devono essere maggiori o uguali al valore numerico o alla data specificati per la proprietà minimum. |
|
|
Stringa |
Specifica il numero minimo di caratteri consentito in un componente. La lunghezza minima deve essere uguale o maggiore di zero. |
|
maxLength |
Stringa | Specifica il numero massimo di caratteri consentiti in un componente. La lunghezza massima deve essere uguale o maggiore di zero. |
|
|
Stringa |
Specifica la sequenza dei caratteri. Un componente accetta i caratteri se questi sono conformi al modello specificato. La proprietà pattern viene mappata sul pattern di convalida del componente del modulo adattivo corrispondente. |
|
maxItems |
Stringa | Specifica il numero massimo di elementi in un array. Il numero massimo di elementi deve essere uguale o maggiore di zero. | |
minItems |
Stringa | Specifica il numero minimo di elementi in un array. Gli elementi minimi devono essere uguali o maggiori di zero. |
I moduli adattivi non supportano i seguenti costrutti dello schema JSON:
Perché non è possibile trascinare singoli elementi di una sottomaschera (struttura generata da qualsiasi tipo complesso) per sottomaschere ripetibili (i valori minOccours o maxOccurs sono maggiori di 1)?
In una sottomaschera ripetibile, è necessario utilizzare la sottomaschera completa. Se desideri solo campi selettivi, utilizza l’intera struttura ed elimina quelli indesiderati.
In Content Finder ho una struttura lunga e complessa. Come posso trovare un elemento specifico?
Sono disponibili due opzioni:
Quale deve essere l’estensione del file di schema JSON?
L’estensione del file dello schema JSON deve essere .schema.json. Ad esempio: <filename>.schema.json.