Skapa anpassningsbara formulär med JSON-schema creating-adaptive-forms-using-json-schema

Adobe rekommenderar att du använder den moderna och utbyggbara datainhämtningen Core Componentsför att skapa nya adaptiva Formseller att lägga till adaptiva Forms på AEM Sites-sidor. De här komponenterna utgör ett betydande framsteg när det gäller att skapa adaptiva Forms-filer, vilket ger imponerande användarupplevelser. I den här artikeln beskrivs det äldre sättet att skapa Adaptiv Forms med baskomponenter.

Version
Artikellänk
AEM as a Cloud Service
Klicka här
AEM 6.5
Den här artikeln

Förutsättningar prerequisites

Om du skapar ett anpassat formulär med ett JSON-schema som formulärmodell måste du ha grundläggande kunskaper i JSON-schemat. Du bör läsa igenom följande innehåll före den här artikeln.

Använda ett JSON-schema som formulärmodell using-a-json-schema-as-form-model

Adobe Experience Manager Forms har stöd för att skapa ett anpassat formulär genom att använda ett befintligt JSON-schema som formulärmodell. Detta JSON-schema representerar strukturen i vilken data produceras eller används av det bakomliggande systemet i din organisation. Det JSON-schema som du använder ska vara kompatibelt med v4-specifikationerna.

De viktigaste funktionerna i ett JSON-schema är:

  • Strukturen för JSON visas som ett träd på fliken Innehållssökning i redigeringsläget för ett anpassat formulär. Du kan dra och lägga till element från JSON-hierarkin i det adaptiva formuläret.
  • Du kan fylla i formuläret i förväg med JSON som är kompatibel med det associerade schemat.
  • När data skickas skickas skickas de som anges av användaren som JSON som är anpassad efter det associerade schemat.

Ett JSON-schema består av enkla och komplexa elementtyper. Elementen har attribut som lägger till regler i elementet. När dessa element och attribut dras till ett adaptivt formulär mappas de automatiskt till motsvarande adaptiv formulärkomponent.

Den här mappningen av JSON-element med adaptiva formulärkomponenter är följande:

"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."
              }
JSON-element, egenskaper eller attribut
Adaptiv formkomponent

Strängegenskaper med enum- och enumNames-begränsningen.

Syntax,

{

"type" : "string",

"enum" : ["M", "F"]

"enumNames" : ["Male", "Female"]

}

Nedrullningsbar komponent:

  • Värden som anges i enumNames visas i listrutan.
  • Värden som anges i uppräkningen används för beräkning.

Strängegenskap med formatbegränsning. Till exempel e-post och datum.

Syntax,

{

"type" : "string",

"format" : "email"

}

  • E-postkomponenten mappas när typen är sträng och formatet är e-post.
  • Textrutekomponent med validering mappas när typen är sträng och formatet är värdnamn.

{

"type" : "string",

}

Textfält
number-egenskap
Numeriskt fält med undertyp inställd på flyttal
heltalsegenskap
Numeriskt fält med undertyp inställd på heltal
boolesk egenskap
Växla
objektegenskap
Panel
arrayegenskap
Upprepningsbar panel med min och max lika med minItems respektive maxItems. Endast homogena arrayer stöds. Objektbegränsningen måste därför vara ett objekt och inte en array.

Vanliga schemaegenskaper common-schema-properties

Det adaptiva formuläret använder information som finns i JSON-schemat för att mappa varje genererat fält. Särskilt gäller följande:

  • Egenskapen title fungerar som etikett för adaptiva formulärkomponenter.
  • Egenskapen description anges som en lång beskrivning för en adaptiv formulärkomponent.
  • Egenskapen default fungerar som ett initialt värde för ett adaptivt formulärfält.
  • Egenskapen maxLength anges som maxlength-attribut för textfältskomponenten.
  • Egenskaperna minimum, maximum, exclusiveMinimum och exclusiveMaximum används för Numerisk rutkomponent.
  • För att stöda intervall för DatePicker component ytterligare JSON-schemaegenskaper minDate och maxDate anges.
  • Egenskaperna minItems och maxItems används för att begränsa antalet objekt/fält som kan läggas till eller tas bort från en panelkomponent.
  • Egenskapen readOnly ställer in attributet readonly för en adaptiv formulärkomponent.
  • Egenskapen required anger att det adaptiva formulärfältet är obligatoriskt, medan den slutliga skickade JSON-informationen i panelen (där typen är objekt) har fält med ett tomt värde som motsvarar det objektet.
  • Egenskapen pattern anges som valideringsmönster (reguljärt uttryck) i adaptiv form.
  • Tillägget för JSON-schemafilen måste behållas som .schema.json. Till exempel <filnamn>.schema.json.

Exempel på JSON-schema sample-json-schema

Här är ett exempel på ett JSON-schema.

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

Återanvändbara schemadefinitioner reusable-schema-definitions

Definitionsnycklar används för att identifiera återanvändbara scheman. Återanvändbara schemadefinitioner används för att skapa fragment. Det liknar att identifiera komplexa typer i XSD. Ett exempel på JSON-schema med definitioner ges nedan:

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

Exemplet ovan definierar en kundpost där varje kund har både en leveransadress och en faktureringsadress. Adressernas struktur är densamma - adresserna har en gatuadress, ort och delstat - så det är en bra idé att inte duplicera adresserna. Det gör det också enkelt att lägga till och ta bort fält för framtida ändringar.

Förkonfigurerar fält i JSON-schemadefinition pre-configuring-fields-in-json-schema-definition

Du kan använda egenskapen aem:afProperties för att förkonfigurera JSON-schemafältet så att det mappas till en anpassad adaptiv formulärkomponent. Ett exempel visas nedan:

{
    "properties": {
        "sizeInMB": {
            "type": "integer",
            "minimum": 16,
            "maximum": 512,
            "aem:afProperties" : {
                 "sling:resourceType" : "/apps/fd/af/components/guideTextBox",
                 "guideNodeClass" : "guideTextBox"
             }
        }
    },
    "required": [ "sizeInMB" ],
    "additionalProperties": false
}

Konfigurera skript eller uttryck för formulärobjekt configure-scripts-or-expressions-for-form-objects

JavaScript är uttrycksspråket i adaptiva formulär. Alla uttryck är giltiga JavaScript-uttryck och använder API:er för adaptiva formulär. Du kan förkonfigurera formulärobjekt för att utvärdera ett uttryck i en formulärhändelse.

Använd egenskapen aem:afproperties för att förkonfigurera adaptiva formuläruttryck eller skript för adaptiva formulärkomponenter. När initialize-händelsen till exempel aktiveras, ställer koden nedan in värdet för telefonfältet och skriver ut ett värde till loggen:

"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\") "
    }
  }
}

Du bör vara medlem i gruppen forms-power-user för att konfigurera skript eller uttryck för formulärobjektet. Tabellen nedan visar alla skripthändelser som stöds för en adaptiv formulärkomponent.

Komponent
Händelse
initiera
Beräkna
Synlighet
Validera
Aktiverad
Bekräfta värde
Klicka på
Alternativ
Textfält
Ikon för Ja-tick
Ikon för Ja-tick
Ikon för Ja-tick
Ikon för Ja-tick
Ikon för Ja-tick
Ikon för Ja-tick
Numeriskt fält
Ikon för Ja-tick
Ikon för Ja-tick
Ikon för Ja-tick
Ikon för Ja-tick
Ikon för Ja-tick
Ikon för Ja-tick
Numerisk stege
Ikon för Ja-tick
Ikon för Ja-tick
Ikon för Ja-tick
Ikon för Ja-tick
Ikon för Ja-tick
Ikon för Ja-tick
Alternativknapp
Ikon för Ja-tick
Ikon för Ja-tick
Ikon för Ja-tick
Ikon för Ja-tick
Ikon för Ja-tick
Ikon för Ja-tick
Telefonnummer
Ikon för Ja-tick
Ikon för Ja-tick
Ikon för Ja-tick
Ikon för Ja-tick
Ikon för Ja-tick
Ikon för Ja-tick
Byt
Ikon för Ja-tick
Ikon för Ja-tick
Ikon för Ja-tick
Ikon för Ja-tick
Ikon för Ja-tick
Ikon för Ja-tick
Knapp
Ikon för Ja-tick
Ikon för Ja-tick
Ikon för Ja-tick
Ikon för Ja-tick
Kryssruta
Ikon för Ja-tick
Ikon för Ja-tick
Ikon för Ja-tick
Ikon för Ja-tick
Ikon för Ja-tick
Ikon för Ja-tick
Ikon för Ja-tick
Nedrullningsbar meny
Ikon för Ja-tick
Ikon för Ja-tick
Ikon för Ja-tick
Ikon för Ja-tick
Ikon för Ja-tick
Ikon för Ja-tick
Ikon för Ja-tick
Bildval
Ikon för Ja-tick
Ikon för Ja-tick
Ikon för Ja-tick
Ikon för Ja-tick
Ikon för Ja-tick
Ikon för Ja-tick
Ikon för Ja-tick
Datumindatafält
Ikon för Ja-tick
Ikon för Ja-tick
Ikon för Ja-tick
Ikon för Ja-tick
Ikon för Ja-tick
Ikon för Ja-tick
Datumväljaren
Ikon för Ja-tick
Ikon för Ja-tick
Ikon för Ja-tick
Ikon för Ja-tick
Ikon för Ja-tick
Ikon för Ja-tick
E-post
Ikon för Ja-tick
Ikon för Ja-tick
Ikon för Ja-tick
Ikon för Ja-tick
Ikon för Ja-tick
Ikon för Ja-tick
Bifogad fil
Ikon för Ja-tick
Ikon för Ja-tick
Ikon för Ja-tick
Ikon för Ja-tick
Ikon för Ja-tick
Bild
Ikon för Ja-tick
Ikon för Ja-tick
Draw
Ikon för Ja-tick
Ikon för Ja-tick
Panel
Ikon för Ja-tick
Ikon för Ja-tick

Några exempel på hur du använder händelser i en JSON är att dölja ett fält vid initialize-händelsen och konfigurera värdet för ett annat fält vid värdestarthändelse. Mer information om hur du skapar uttryck för skripthändelserna finns i Adaptiva formuläruttryck.

Här är JSON-exempelkoden för tidigare nämnda exempel.

Dölja ett fält vid händelsen initialize hiding-a-field-on-initialize-event

"name": {
    "type": "string",
    "aem:afProperties": {
        "events" : {
            "Initialize" : "this.visible = false;"
        }
    }
}

Konfigurera värdet för ett annat fält för värdeimplementeringshändelsen configure-value-of-another-field-on-value-commit-event

"Income": {
    "type": "object",
    "properties": {
        "monthly": {
            "type": "number",
            "aem:afProperties": {
                "events" : {
                    "Value Commit" : "IncomeYearly.value = this.value * 12;"
                }
            }
        },
        "yearly": {
            "type": "number",
            "aem:afProperties": {
                "name": "IncomeYearly"
            }
        }
    }
}

Begränsa tillåtna värden för en adaptiv formulärkomponent limit-acceptable-values-for-an-adaptive-form-component

Du kan lägga till följande begränsningar i JSON-schemaelement för att begränsa vilka värden som tillåts för en adaptiv formulärkomponent:

Schemaegenskap
Datatyp
Beskrivning
Komponent
maximum
Sträng
Anger den övre gränsen för numeriska värden och datum. Som standard inkluderas maxvärdet.
  • Numerisk ruta
  • Numerisk nummerlista
  • Datumväljaren
minimum
Sträng
Anger den nedre gränsen för numeriska värden och datum. Som standard inkluderas minimivärdet.
  • Numerisk ruta
  • Numerisk stege
  • Datumväljaren
exclusiveMaximum
Boolean

Om värdet är true måste det numeriska värdet eller datumet som anges i formulärets komponent vara mindre än det numeriska värdet eller datumet som anges för egenskapen maximum.

Om värdet är false måste det numeriska värdet eller datumet som anges i formulärets komponent vara mindre än eller lika med det numeriska värdet eller datumet som anges för egenskapen maximum.

  • Numerisk ruta
  • Numerisk stege
  • Datumväljaren
exclusiveMinimum
Boolean

Om true måste det numeriska värdet eller datumet som anges i formulärets komponent vara större än det numeriska värdet eller datumet som anges för egenskapen minimum.

Om värdet är false måste det numeriska värdet eller datumet som anges i formulärets komponent vara större än eller lika med det numeriska värdet eller datumet som anges för egenskapen minimum.

  • Numerisk ruta
  • Numerisk stege
  • Datumväljaren
minLength
Sträng
Anger det minsta antalet tecken som tillåts i en komponent. Minimilängden måste vara lika med eller större än noll.
  • Textruta
maxLength
Sträng
Anger maximalt antal tecken som tillåts i en komponent. Den maximala längden måste vara lika med eller större än noll.
  • Textruta
pattern
Sträng

Anger teckensekvensen. En komponent accepterar tecknen om tecknen överensstämmer med det angivna mönstret.

Egenskapen pattern mappar till valideringsmönstret för motsvarande adaptiva formulärkomponent.

  • Alla adaptiva formulärkomponenter som är mappade till ett XSD-schema
maxItems
Sträng
Anger maximalt antal objekt i en array. Det maximala antalet objekt måste vara lika med eller större än noll.
minItems
Sträng
Anger det minsta antalet objekt i en array. Minimiobjekten måste vara lika med eller större än noll.

Aktivera schemakompatibla data enablig-schema-compliant-data

Följ de här stegen för att aktivera alla schemabaserade anpassningsbara Forms för att generera schemakompatibla data när formulär skickas:

  1. Gå till webbkonsolen Experience Manager på https://server:host/system/console/configMgr.
  2. Sök efter Adaptive Form and Interactice Communication Web Channel Configuration.
  3. Välj det här alternativet om du vill öppna konfigurationen i redigeringsläge.
  4. Markera kryssrutan Generate Schema Compliant Data.
  5. Spara inställningarna.

Konfiguration av adaptiv form och interaktiv kommunikationskanal

Konstruktioner som inte stöds non-supported-constructs

Adaptiva formulär stöder inte följande JSON-schemakonstruktioner:

  • Null-typ
  • Unionstyper, t.ex., och
  • OneOf, AnyOf, AllOf, och NOT
  • Endast homogena arrayer stöds. Objektbegränsningen måste därför vara ett objekt och inte en array.

Frågor och svar frequently-asked-questions

Varför kan jag inte dra enskilda element i ett delformulär (struktur som genereras från en komplex typ) för repeterbara delformulär (värdena minOcCours och maxOccurs är större än 1)?

I ett upprepningsbart delformulär måste du använda hela delformuläret. Om du bara vill ha selektiva fält använder du hela strukturen och tar bort de oönskade.

Jag har en lång komplex struktur i Content Finder. Hur hittar jag ett specifikt element?

Du har två alternativ:

  • Bläddra genom trädstrukturen
  • Använd sökrutan för att hitta ett element

Vad ska tillägget för JSON-schemafilen vara?

Tillägget för JSON-schemafilen måste vara .schema.json. Till exempel <filnamn>.schema.json.

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2