Dokumentation AEM as a Cloud Service Användarhandbok

Modelldefinitioner, fält och komponenttyper field-types

Last update: Thu Feb 05 2026 00:00:00 GMT+0000 (Coordinated Universal Time)

Gäller:
Experience Manager as a Cloud Service

Ämnen:
Utveckling

Skapat för:

Administratör
Utvecklare

Lär dig mer om fält och de komponenttyper som den universella redigeraren kan redigera på egenskapspanelen med exempel. Lär dig hur du kan mäta din egen app genom att skapa en modelldefinition och länka till komponenten.

Ökning overview

När du anpassar dina egna program för användning med den universella redigeraren måste du mäta komponenterna och definiera vilka fält och komponenttyper som de kan ändra på egenskapspanelen i redigeraren. Det gör du genom att skapa en modell och länka till den från komponenten.

Det här dokumentet innehåller en översikt över en modelldefinition och över fält och de komponenttyper som är tillgängliga för dig tillsammans med exempelkonfigurationer.

TIP

Om du inte känner till hur du kan mäta upp din app för den universella redigeraren kan du läsa dokumentet Universal Editor Overview för AEM-utvecklare.

Modelldefinitionsstruktur model-structure

Om du vill konfigurera en komponent via egenskapspanelen i den universella redigeraren måste det finnas en modelldefinition som är länkad till komponenten.

Modelldefinitionen är en JSON-struktur som börjar med en array med modeller.

[
  {
    "id": "model-id",        // must be unique
    "fields": []             // array of fields which shall be rendered in the properties panel
  }
]

Mer information om hur du definierar -arrayen finns i avsnittet Fältfields i det här dokumentet.

Du kan länka en modell till en komponent på två sätt: med komponentdefinitionen eller via instrumenteringen.

Länka med komponentdefinitionen component-definition

Det här är den metod som rekommenderas för att länka modellen till komponenten. På så sätt kan du behålla länken centralt i komponentdefinitionen och dra komponenter över behållare.

Inkludera bara egenskapen model i komponentobjektet i arrayen components i filen component-definition.json.

Mer information finns i dokumentet Komponentdefinition.

Länkning med Instrumentation instrumentation

Om du vill använda modelldefinitionen med en komponent kan attributet data-aue-model användas.

<div data-aue-resource="urn:datasource:/content/path" data-aue-type="component"  data-aue-model="model-id">Click me</div>

NOTE

Den universella redigeraren kontrollerar först om en modell är länkad via instrumentet och använder den innan komponentdefinitionen kontrolleras. Detta innebär:

Projekt som har implementerat länken till modellen via instrumenteringen fortsätter att fungera som de ska utan att behöva ändras.
Om du definierar modellen i både komponentdefinitionen och i instrumenteringen används alltid instrumenteringen.

Läsa in en modelldefinition loading-model

När en modell har skapats kan den refereras som en extern fil.

<script type="application/vnd.adobe.aue.model+json" src="<url-of-model-definition>"></script>

Du kan också definiera modellen textbundet.

<script type="application/vnd.adobe.aue.model+json">
  { ... model definition ... }
</script>

Fält fields

Ett fältobjekt har följande typdefinition.

Konfiguration

Värdetyp

Beskrivning

Obligatoriskt

component

ComponentType

Återgivning av komponenten

name

string

Egenskap eller sökväg där data ska sparas

label

FieldLabel

Fältets etikett

description

FieldDescription

Beskrivning av fältet

Nej

value

FieldValue

Detta är ett standardvärde som fungerar som platshållare. Om inget värde anges kommer Universal Editor att behålla det som definieras som value i modelldefinitionen. Detta säkerställer att det du ser matchar det som finns kvar i backend-objektet.

Nej

valueType

ValueType

Standardvalidering, kan vara string, string[], number, date, boolean

Nej

required

boolean

Är fältet obligatoriskt

Nej

readOnly

boolean

Är fältet skrivskyddat

Nej

hidden

boolean

Är fältet dolt som standard

Nej

condition

RulesLogic

Regel som visar eller döljer fältet baserat på ett villkor

Nej

multi

boolean

Är fältet ett flerfält
Observera att behållarkapsling inte tillåts för flerfält i egenskapspanelen

Nej

validation

ValidationType

Valideringsregel eller -regler för fältet

Nej

raw

unknown

Raw-data som kan användas av komponenten

Nej

NOTE

Understrecket (_) tillåts inte i fältnamn när plugin-program för aem eller xwalk används.

namnfält och kapsling nesting

Fältet name kan peka direkt på en egenskap för den aktuella resursen eller, när det gäller komponenter i cq:Pages, också använda en sökväg till en kapslad egenskap. Till exempel:

"name": "teaser/image/fileReference"

Komponenttyper component-types

Följande komponenttyper kan användas för återgivningsfält.

Beskrivning

Komponenttyp

aem-tag

aem-content

boolean

checkbox-group

container

aem-content-fragment

Datum och tid

date-time

Upplevelsefragment

aem-experience-fragment

Multiselect

multiselect

Number

number

Grupp med alternativknappar

radio-group

reference

richtext

select

tab

text

textarea

AEM-tagg aem-tag

En taggkomponenttyp i AEM aktiverar en AEM-taggväljare som kan användas för att bifoga taggar till komponenten.

Exempel

code language-json
`{ "id": "aem-tag-picker", "fields": [ { "component": "aem-tag", "label": "AEM Tag Picker", "name": "cq:tags", "valueType": "string" } ] }`

Skärmbild

TIP

Se dokumentet Hantera taxonomidata för mer information om hur du kan använda kalkylblad för att hantera taxonomidata för ditt Edge Delivery Services-projekt.

AEM Content aem-content

En AEM-innehållskomponenttyp aktiverar en AEM-innehållsväljare som kan användas för att välja valfri AEM-resurs. Till skillnad från referenskomponenten, som bara kan markera resurser, kan AEM-innehållskomponenten referera till allt AEM-innehåll. Den erbjuder en extra valideringstyp.

Valideringstyp

Värdetyp

Beskrivning

Obligatoriskt

rootPath

string

Sökväg som innehållsväljaren öppnas för att användaren ska kunna välja AEM-innehåll och begränsa urvalet till den katalogen och underkatalogerna

Nej

Exempel

code language-json

code language-json
`{ "id": "aem-content-picker", "fields": [ { "component": "aem-content", "name": "reference", "value": "", "label": "AEM Content Picker", "valueType": "string", "validation": { "rootPath": "/content/refresh" } } ] }`

{
  "id": "aem-content-picker",
  "fields": [
    {
      "component": "aem-content",
      "name": "reference",
      "value": "",
      "label": "AEM Content Picker",
      "valueType": "string",
      "validation": {
            "rootPath": "/content/refresh"
        }
    }
  ]
}

Skärmbild

Boolean boolean

En boolesk komponenttyp lagrar ett enkelt true/false-värde som återges som en växlingstyp. Den erbjuder en extra valideringstyp.

Valideringstyp

Värdetyp

Beskrivning

Obligatoriskt

customErrorMsg

string

Meddelande som visas om det angivna värdet inte är ett booleskt värde

Nej

Exempel 1

code language-json
`{ "id": "boolean", "fields": [ { "component": "boolean", "label": "Boolean", "name": "boolean", "valueType": "boolean" } ] }`

Exempel 2

code language-json
`{ "id": "another-boolean", "fields": [ { "component": "boolean", "label": "Boolean", "name": "boolean", "valueType": "boolean", "validation": { "customErrorMsg": "Think, McFly. Think!" } } ] }`

Skärmbild

Kryssrutegrupp checkbox-group

På samma sätt som för ett booleskt värde kan en kryssrutegruppskomponenttyp användas för att välja flera sant/falskt-objekt, som återges som flera kryssrutor.

Exempel

code language-json

code language-json
`{ "id": "checkbox-group", "fields": [ { "component": "checkbox-group", "label": "Checkbox Group", "name": "checkbox", "valueType": "string[]", "options": [ { "name": "Option 1", "value": "option1" }, { "name": "Option 2", "value": "option2" } ] } ] }`

{
  "id": "checkbox-group",
  "fields": [
    {
      "component": "checkbox-group",
      "label": "Checkbox Group",
      "name": "checkbox",
      "valueType": "string[]",
      "options": [
        { "name": "Option 1", "value": "option1" },
        { "name": "Option 2", "value": "option2" }
      ]
    }
  ]
}

Skärmbild

Behållare container

En behållarkomponenttyp tillåter gruppering av komponenter inklusive stöd för flera fält. Den erbjuder en extra konfiguration. Observera att behållarkapsling inte tillåts för flera fält på egenskapspanelen

Konfiguration

Värdetyp

Beskrivning

Obligatoriskt

collapsible

boolean

Är behållaren komprimerbar

Nej

Exempel

code language-json

code language-json
`{ "id": "container", "fields": [ { "component": "container", "label": "Container", "name": "container", "valueType": "string", "collapsible": true, "fields": [ { "component": "text-input", "label": "Simple Text 1", "name": "text", "valueType": "string" }, { "component": "text-input", "label": "Simple Text 2", "name": "text2", "valueType": "string" } ] } ] }`

 {
  "id": "container",
  "fields": [
    {
      "component": "container",
      "label": "Container",
      "name": "container",
      "valueType": "string",
      "collapsible": true,
      "fields": [
        {
          "component": "text-input",
          "label": "Simple Text 1",
          "name": "text",
          "valueType": "string"
        },
        {
          "component": "text-input",
          "label": "Simple Text 2",
          "name": "text2",
          "valueType": "string"
        }
      ]
    }
  ]
}

Skärmbild

Stöd för flera fält

code language-json

code language-json
`{ "component": "container", "name": "test", "label": "Multi Text", "multi": true, "fields": [ { "component": "reference", "name": "image", "value": "", "label": "Sample Image", "valueType": "string" }, { "component": "text", "name": "alt", "value": "", "label": "Alt Text", "valueType": "string" } ] }`

{
  "component": "container",
  "name": "test",
  "label": "Multi Text",
  "multi": true,
  "fields": [
    {
      "component": "reference",
      "name": "image",
      "value": "",
      "label": "Sample Image",
      "valueType": "string"
    },
    {
      "component": "text",
      "name": "alt",
      "value": "",
      "label": "Alt Text",
      "valueType": "string"
    }
  ]
}

Innehållsfragment content-fragment

Du kan använda väljaren för innehållsfragment för att välja ett innehållsfragment och dess variationer (om det behövs). Den erbjuder en extra konfiguration.

Konfiguration

Värdetyp

Beskrivning

Obligatoriskt

variationName

string

Variabelnamn för att lagra den valda varianten. Om värdet är odefinierat visas ingen variantväljare

Nej

Den erbjuder även en ytterligare valideringstyp.

Valideringstyp

Värdetyp

Beskrivning

Obligatoriskt

rootPath

string

Sökväg som innehållsväljaren öppnas så att användaren kan välja innehållsfragmentet och begränsa urvalet till den katalogen och underkatalogerna

Nej

NOTE

Den universella redigeraren validerar fält för innehållsfragment baserat på deras modeller, vilket gör att du kan tillämpa dataintegritetsregler som regex-mönster och unikhetsbegränsningar.

Detta säkerställer att innehållet uppfyller specifika affärskrav innan det publiceras.

Exempel 1

code language-json

code language-json
`[ { "id": "aem-content-fragment", "fields": [ { "component": "aem-content-fragment", "name": "picker", "label": "Content Fragment Picker", "valueType": "string", "variationName": "contentFragmentVariation", "validation": { "rootPath": "/content/refresh" } } ] } ]`

[
  {
    "id": "aem-content-fragment",
    "fields": [
      {
        "component": "aem-content-fragment",
        "name": "picker",
        "label": "Content Fragment Picker",
        "valueType": "string",
        "variationName": "contentFragmentVariation",
        "validation": {
            "rootPath": "/content/refresh"
        }
      }
    ]
  }
]

Skärmbild

Datum och tid date-time

En datumtidskomponenttyp tillåter specificering av ett datum, en tid eller en kombination av dessa. Den erbjuder ytterligare konfigurationer.

Konfiguration

Värdetyp

Beskrivning

Obligatoriskt

displayFormat

string

Format som datumsträngen ska visas med

valueFormat

string

Format som datumsträngen ska lagras i

Den erbjuder även en ytterligare valideringstyp.

Valideringstyp

Värdetyp

Beskrivning

Obligatoriskt

customErrorMsg

string

Meddelande som visas om valueFormat inte uppfylls

Nej

Exempel 1

code language-json
`{ "id": "date-time", "fields": [ { "component": "date-time", "label": "Date & Time", "name": "date", "valueType": "date" } ] }`

Exempel 2

code language-json

code language-json
{ "id": "another-date-time", "fields": [ { "component": "date-time", "valueType": "date-time", "name": "field1", "label": "Date Time", "description": "This is a date time field that stores both date and time.", "required": true, "placeholder": "YYYY-MM-DD HH:mm:ss", "displayFormat": null, "valueFormat": null, "validation": { "customErrorMsg": "Marty! You have to come back with me!" } }, { "component": "date-time", "valueType": "date", "name": "field2", "label": "Another Date Time", "description": "This is another date time field that only stores the date.", "required": true, "placeholder": "YYYY-MM-DD", "displayFormat": null, "valueFormat": null, "validation": { "customErrorMsg": "Back to the future!" } }, { "component": "date-time", "valueType": "time", "name": "field3", "label": "Yet Another Date Time", "description": "This is another date time field that only stores the time.", "required": true, "placeholder": "HH:mm:ss", "displayFormat": null, "valueFormat": null, "validation": { "customErrorMsg": "Great Scott!" } } ] }

{
  "id": "another-date-time",
  "fields": [
    {
      "component": "date-time",
       "valueType": "date-time",
      "name": "field1",
      "label": "Date Time",
      "description": "This is a date time field that stores both date and time.",
      "required": true,
      "placeholder": "YYYY-MM-DD HH:mm:ss",
      "displayFormat": null,
      "valueFormat": null,
      "validation": {
        "customErrorMsg": "Marty! You have to come back with me!"
      }
    },
    {
      "component": "date-time",
      "valueType": "date",
      "name": "field2",
      "label": "Another Date Time",
      "description": "This is another date time field that only stores the date.",
      "required": true,
      "placeholder": "YYYY-MM-DD",
      "displayFormat": null,
      "valueFormat": null,
      "validation": {
        "customErrorMsg": "Back to the future!"
      }
    },
    {
      "component": "date-time",
      "valueType": "time",
      "name": "field3",
      "label": "Yet Another Date Time",
      "description": "This is another date time field that only stores the time.",
      "required": true,
      "placeholder": "HH:mm:ss",
      "displayFormat": null,
      "valueFormat": null,
      "validation": {
        "customErrorMsg": "Great Scott!"
      }
    }
  ]
}

Skärmbild

Experience Fragment experience-fragment

Experience Fragment-väljaren kan användas för att välja ett Experience Fragment och dess variationer (om det behövs). Den erbjuder en extra konfiguration.

Konfiguration

Värdetyp

Beskrivning

Obligatoriskt

variationName

string

Variabelnamn för att lagra den valda varianten. Om värdet är odefinierat visas ingen variantväljare

Nej

Den erbjuder även en ytterligare valideringstyp.

Valideringstyp

Värdetyp

Beskrivning

Obligatoriskt

rootPath

string

Sökväg som innehållsväljaren öppnas så att användaren kan välja Experience Fragment och begränsa urvalet till den katalogen och underkatalogerna

Nej

Exempel 1

code language-json

code language-json
`[ { "id": "experience-fragment", "fields": [ { "component": "aem-experience-fragment", "valueType": "string", "name": "experience-fragment", "label": "experience-fragment", "variationName": "experienceFragmentVariation", "validation": { "rootPath": "/content/refresh" } } ] } ]`

[
  {
    "id": "experience-fragment",
    "fields": [
      {
        "component": "aem-experience-fragment",
        "valueType": "string",
        "name": "experience-fragment",
        "label": "experience-fragment",
        "variationName": "experienceFragmentVariation",
        "validation": {
            "rootPath": "/content/refresh"
        }
      }
    ]
  }
]

Skärmbild

Multimarkering multiselect

En komponenttyp för flerval visar flera objekt för markering i en listruta, inklusive möjligheten att gruppera de element som kan markeras.

Exempel 1

code language-json

code language-json
`{ "id": "multiselect", "fields": [ { "component": "multiselect", "name": "multiselect", "label": "Multi Select", "valueType": "string", "options": [ { "name": "Option 1", "value": "option1" }, { "name": "Option 2", "value": "option2" } ] } ] }`

{
  "id": "multiselect",
  "fields": [
    {
      "component": "multiselect",
      "name": "multiselect",
      "label": "Multi Select",
      "valueType": "string",
      "options": [
        { "name": "Option 1", "value": "option1" },
        { "name": "Option 2", "value": "option2" }
      ]
    }
  ]
}

Exempel 2

code language-json

code language-json
`{ "id": "multiselect-grouped", "fields": [ { "component": "multiselect", "name": "property", "label": "Multiselect field", "valueType": "string", "required": true, "maxSize": 2, "options": [ { "name": "Theme", "children": [ { "name": "Light", "value": "light" }, { "name": "Dark", "value": "dark" } ] }, { "name": "Type", "children": [ { "name": "Alpha", "value": "alpha" }, { "name": "Beta", "value": "beta" }, { "name": "Gamma", "value": "gamma" } ] } ] } ] }`

{
  "id": "multiselect-grouped",
  "fields": [
    {
      "component": "multiselect",
      "name": "property",
      "label": "Multiselect field",
      "valueType": "string",
      "required": true,
      "maxSize": 2,
      "options": [
        {
          "name": "Theme",
          "children": [
            { "name": "Light", "value": "light" },
            { "name": "Dark",  "value": "dark" }
          ]
        },
        {
          "name": "Type",
          "children": [
            { "name": "Alpha", "value": "alpha" },
            { "name": "Beta", "value": "beta" },
            { "name": "Gamma", "value": "gamma" }
          ]
        }
      ]
    }
  ]
}

Skärmbilder

Skärmbild av flervalskomponenttyp med gruppering

Nummer number

En talkomponenttyp tillåter indata för ett tal. Det erbjuder ytterligare valideringstyper.

Valideringstyp

Värdetyp

Beskrivning

Obligatoriskt

numberMin

number

Minsta tillåtna antal

Nej

numberMax

number

Högsta tillåtna antal

Nej

customErrorMsg

string

Meddelande som visas om numberMin eller numberMax inte uppfylls

Nej

Exempel 1

code language-json
`{ "id": "number", "fields": [ { "component": "number", "name": "number", "label": "Number", "valueType": "number", "value": 0 } ] }`

Exempel 2

code language-json

code language-json
`{ "id": "another-number", "fields": [ { "component": "number", "valueType": "number", "name": "field1", "label": "Number Field", "description": "This is a number field.", "required": true, "placeholder": null, "validation": { "numberMin": 0, "numberMax": 88, "customErrorMsg": "You also need 1.21 gigawatts." } } ] }`

{
  "id": "another-number",
  "fields": [
   {
      "component": "number",
      "valueType": "number",
      "name": "field1",
      "label": "Number Field",
      "description": "This is a number field.",
      "required": true,
      "placeholder": null,
      "validation": {
        "numberMin": 0,
        "numberMax": 88,
        "customErrorMsg": "You also need 1.21 gigawatts."
      }
    }
  ]
}

Skärmbild

Alternativgrupp radio-group

En alternativgruppskomponenttyp tillåter en ömsesidigt uteslutande markering av flera alternativ som återges som en grupp som liknar en kryssrutegrupp.

Exempel

code language-json

code language-json
`{ "id": "radio-group", "fields": [ { "component": "radio-group", "label": "Radio Group", "name": "radio", "valueType": "string", "options": [ { "name": "Option 1", "value": "option1" }, { "name": "Option 2", "value": "option2" } ] } ] }`

{
  "id": "radio-group",
  "fields": [
    {
      "component": "radio-group",
      "label": "Radio Group",
      "name": "radio",
      "valueType": "string",
      "options": [
        { "name": "Option 1", "value": "option1" },
        { "name": "Option 2", "value": "option2" }
      ]
    }
  ]
}

Skärmbild

Referens reference

En referenskomponenttyp aktiverar en AEM-resursväljare som kan användas för att välja en AEM-resurs som ska refereras. Till skillnad från AEM-innehållskomponenten, som kan välja vilken AEM-resurs som helst, kan referenskomponenten bara referera till resurser. Den erbjuder en extra valideringstyp.

En referenskomponenttyp tillåter en referens till ett annat dataobjekt från det aktuella objektet.

Exempel

code language-json
`{ "id": "reference", "fields": [ { "component": "reference", "label": "Reference", "name": "reference", "valueType": "string" } ] }`

Skärmbild

RTF rich-text

RTF ger möjlighet till RTF-inmatning med flera rader.

Exempel 1

code language-json
`{ "id": "richtext", "fields": [ { "component": "richtext", "name": "rte", "label": "Rich Text", "valueType": "string" } ] }`

Skärmbild

Välj select

En select-komponenttyp gör att du kan välja ett enstaka alternativ i en lista med fördefinierade alternativ i en nedrullningsbar meny.

Exempel

code language-json

code language-json
`{ "id": "select", "fields": [ { "component": "select", "label": "Select", "name": "select", "valueType": "string", "options": [ { "name": "Option 1", "value": "option1" }, { "name": "Option 2", "value": "option2" } ] } ] }`

{
  "id": "select",
  "fields": [
    {
      "component": "select",
      "label": "Select",
      "name": "select",
      "valueType": "string",
      "options": [
        { "name": "Option 1", "value": "option1" },
        { "name": "Option 2", "value": "option2" }
      ]
    }
  ]
}

Skärmbild

Tabb tab

Med en flikkomponenttyp kan du gruppera andra inmatningsfält tillsammans på flera flikar för att förbättra layoutordningen för författarna.

En tab-definition kan betraktas som en avgränsare i arrayen för fields. Allt som kommer efter en tab placeras på den fliken tills en ny tab påträffas, där följande objekt placeras på den nya fliken.

Om du vill att objekt ska visas ovanför alla flikar måste de definieras före alla tabbar.

Exempel

code language-json

code language-json
`{ "id": "tab", "fields": [ { "component": "tab", "label": "Tab 1", "name": "tab1" }, { "component": "text-input", "label": "Text 1", "name": "text1", "valueType": "string" }, { "component": "tab", "label": "Tab 2", "name": "tab2" }, { "component": "text-input", "label": "Text 2", "name": "text2", "valueType": "string" } ] }`

{
  "id": "tab",
  "fields": [
    {
      "component": "tab",
      "label": "Tab 1",
      "name": "tab1"
    },
    {
      "component": "text-input",
      "label": "Text 1",
      "name": "text1",
      "valueType": "string"
    },
    {
      "component": "tab",
      "label": "Tab 2",
      "name": "tab2"
    },
    {
      "component": "text-input",
      "label": "Text 2",
      "name": "text2",
      "valueType": "string"
    }
  ]
}

Skärmbild

Text text

Text tillåter en enda rad med textinmatning. Det innehåller ytterligare valideringstyper.

Valideringstyp

Värdetyp

Beskrivning

Obligatoriskt

minLength

number

Minsta antal tillåtna tecken

Nej

maxLength

number

Högsta antal tillåtna tecken

Nej

regExp

string

Reguljärt uttryck som indatatexten måste matcha

Nej

customErrorMsg

string

Meddelande som visas om minLength, maxLength och/eller regExp bryts

Nej

Exempel 1

code language-json
`{ "id": "simpletext", "fields": [ { "component": "text", "name": "text", "label": "Simple Text", "valueType": "string" } ] }`

Exempel 2

code language-json

code language-json
`{ "id": "another simpletext", "fields": [ { "component": "text", "name": "text", "label": "Simple Text", "valueType": "string", "valueFormat": "regexp", "description": "This is a text input with validation.", "required": true, "validation": { "minLength": 1955, "maxLength": 1985, "regExp": "^foo:.*", "customErrorMsg": "Why don't you make like a tree and get outta here?" } } ] }`

{
  "id": "another simpletext",
  "fields": [
    {
      "component": "text",
      "name": "text",
      "label": "Simple Text",
      "valueType": "string",
      "valueFormat": "regexp",
      "description": "This is a text input with validation.",
      "required": true,
      "validation": {
        "minLength": 1955,
        "maxLength": 1985,
        "regExp": "^foo:.*",
        "customErrorMsg": "Why don't you make like a tree and get outta here?"
      }
    }
  ]
}

Skärmbild

Textområde textarea

Textområdet tillåter flera rader med textinmatning.

Exempel

code language-json
`{ "id": "longertext", "fields": [ { "component": "textarea", "name": "textarea", "label": "Text Area", "valueType": "string" } ] }`

Skärmbild

recommendation-more-help

fbcff2a9-b6fe-4574-b04a-21e75df764ab