DokumentationAEM as a Cloud ServiceAnvändarhandbok

Modelldefinitioner, fält och komponenttyper field-types

Last update: Fri May 09 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Gäller:
  • Experience Manager as a Cloud Service

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 fields-arrayen finns i avsnittet Fält 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
Ja
name
string
Egenskap där uppgifterna ska sparas
Ja
label
FieldLabel
Fältets etikett
Ja
description
FieldDescription
Beskrivning av fältet
Nej
placeholder
string
Platshållare för fältet
Nej
value
FieldValue
Standardvärde
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
Nej
validation
ValidationType
Valideringsregel eller -regler för fältet
Nej
raw
unknown
Raw-data som kan användas av komponenten
Nej

Komponenttyper component-types

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

Beskrivning
Komponenttyp
AEM-tagg
aem-tag
AEM Content
aem-content
Boolean
boolean
Kryssrutegrupp
checkbox-group
Behållare
container
Innehållsfragment
aem-content-fragment
Datum och tid
date-time
Upplevelsefragment
aem-experience-fragment
Multiselect
multiselect
Number
number
Grupp med alternativknappar
radio-group
Referens
reference
RTF
richtext
Välj
select
Tabb
tab
Text
text

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
Skärmbild av AEM-taggkomponenttyp
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 
{
  "id": "aem-content-picker",
  "fields": [
    {
      "component": "aem-content",
      "name": "reference",
      "value": "",
      "label": "AEM Content Picker",
      "valueType": "string",
      "validation": {
            "rootPath": "/content/refresh"
        }
    }
  ]
}
Skärmbild
Skärmbild av AEM innehållskomponenttyp

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
Skärmbild av boolesk komponenttyp

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 
{
  "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
Skärmbild av kryssrutegruppskomponenttyp

Behållare container

En behållarkomponenttyp tillåter gruppering av komponenter. Den erbjuder en extra konfiguration.

Konfiguration
Värdetyp
Beskrivning
Obligatoriskt
collapsible
boolean
Är behållaren komprimerbar
Nej
Exempel
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"
        }
      ]
    }
  ]
}
Skärmbild
Skärmbild av behållarkomponenttyp

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 
[
  {
    "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
Skärmbild av väljaren för innehållsfragment

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
Ja
valueFormat
string
Format som datumsträngen ska lagras i
Ja

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 
{
  "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
Skärmbild av datumtidskomponenttyp

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 
[
  {
    "id": "experience-fragment",
    "fields": [
      {
        "component": "aem-experience-fragment",
        "valueType": "string",
        "name": "experience-fragment",
        "label": "experience-fragment",
        "variationName": "experienceFragmentVariation",
        "validation": {
            "rootPath": "/content/refresh"
        }
      }
    ]
  }
]
Skärmbild
Skärmbild av Experience Fragment-väljaren

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 
{
  "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 
{
  "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
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 
{
  "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
Skärmbild av nummerkomponenttyp

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 
{
  "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
Skärmbild av komponenttypen för alternativgruppskomponent

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
Skärmbild av referenskomponenttyp

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
Skärmbild av komponenttyp för textområde

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 
{
  "id": "select",
  "fields": [
    {
      "component": "select",
      "label": "Select",
      "name": "select",
      "valueType": "string",
      "options": [
        { "name": "Option 1", "value": "option1" },
        { "name": "Option 2", "value": "option2" }
      ]
    }
  ]
}
Skärmbild
Skärmbild av vald komponenttyp

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 
{
  "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
Skärmbild av flikkomponenttyp

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 
{
  "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
Skärmbild av textkomponenttyp
recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab