Modelldefinitioner, fält och komponenttyper field-types
Lär dig mer om fält och de komponenttyper som den universella redigeraren kan redigera i egenskapsfältet 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 de kan ändra i egenskapsfältet 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.
Modelldefinitionsstruktur model-structure
Om du vill konfigurera en komponent via egenskapsspåret i Universell redigerare 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 rail
}
]
Mer information om hur du definierar fields
-arrayen finns i avsnittet Fält i det här dokumentet.
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>
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.
component
ComponentType
name
string
label
FieldLabel
description
FieldDescription
placeholder
string
value
FieldValue
valueType
ValueType
string
, string[]
, number
, date
, boolean
required
boolean
readOnly
boolean
hidden
boolean
multi
boolean
validation
ValidationType
raw
unknown
Komponenttyper component-types
Följande komponenttyper kan användas för återgivningsfält.
aem-tag
aem-content
boolean
checkbox-group
container
aem-content-fragment
date-time
multiselect
number
radio-group
reference
richtext
select
tab
text
AEM aem-tag
En AEM taggkomponenttyp aktiverar en AEM taggväljare som kan användas för att bifoga taggar till komponenten.
code language-json |
---|
|
![Skärmbild av AEM taggkomponenttyp](./media_1159651cabbe711ba93dd5acc430b04fcaa0a07c6.png?width=750&format=png&optimize=medium)
AEM aem-content
En AEM innehållskomponenttyp aktiverar en AEM innehållsväljare som kan användas för att ange innehållsreferenser.
code language-json |
---|
|
![Skärmbild av AEM innehållskomponenttyp](./media_1f5cbfa1ff71d1a51b6c9e61d194b235760281617.png?width=750&format=png&optimize=medium)
Boolean boolean
En boolesk komponenttyp lagrar ett enkelt true/false-värde som återges som en växlingstyp. Den erbjuder en extra valideringstyp.
customErrorMsg
string
code language-json |
---|
|
code language-json |
---|
|
![Skärmbild av boolesk komponenttyp](./media_1b673ea5591e814bb10c8c2327a8d4345c8b6da50.png?width=750&format=png&optimize=medium)
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.
code language-json |
---|
|
![Skärmbild av kryssrutegruppskomponenttyp](./media_1a66c505c6ad3e5d45c1f493e5676ce69ebcca822.png?width=750&format=png&optimize=medium)
Behållare container
En behållarkomponenttyp tillåter gruppering av komponenter. Den erbjuder en extra konfiguration.
collapsible
boolean
code language-json |
---|
|
![Skärmbild av behållarkomponenttyp](./media_144a48a63fe8acb3d1ee1472b114c38b773fcdc4e.png?width=750&format=png&optimize=medium)
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.
variationName
string
code language-json |
---|
|
![Skärmbild av väljaren för innehållsfragment](./media_11756da76e36f9d7b47e87d06371a2f6c99371c54.png?width=750&format=png&optimize=medium)
Datum och tid date-time
En datumtidskomponenttyp tillåter specificering av ett datum, en tid eller en kombination av dessa. Den erbjuder ytterligare konfigurationer.
displayFormat
string
valueFormat
string
Den erbjuder även en ytterligare valideringstyp.
customErrorMsg
string
valueFormat
inte uppfyllscode language-json |
---|
|
code language-json |
---|
|
![Skärmbild av datumtidskomponenttyp](./media_1fb7ce59e7d55ecb8462d42e25b84056e31381cc5.png?width=750&format=png&optimize=medium)
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.
variationName
string
code language-json |
---|
|
![Skärmbild av Experience Fragment-väljaren](./media_192e8f6521eb9ef084f0cd392393a4ce5dccc8dc6.png?width=750&format=png&optimize=medium)
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.
code language-json |
---|
|
code language-json |
---|
|
![Skärmbild av flervalskomponenttyp](./media_150cc6e56950fb2f7a83278ced464fba80c7ed9ac.png?width=750&format=png&optimize=medium)
![Skärmbild av flervalskomponenttyp med gruppering](./media_1dece1668ebedfa6b8c3956dc9d3277c4178c7488.png?width=750&format=png&optimize=medium)
Nummer number
En talkomponenttyp tillåter indata för ett tal. Det erbjuder ytterligare valideringstyper.
numberMin
number
numberMax
number
customErrorMsg
string
numberMin
eller numberMax
inte uppfyllscode language-json |
---|
|
code language-json |
---|
|
![Skärmbild av nummerkomponenttyp](./media_15146425e109a386730d4a2edbf36bb159899e009.png?width=750&format=png&optimize=medium)
Alternativgrupp radio-group
En alternativgruppskomponenttyp tillåter en ömsesidigt uteslutande markering av flera alternativ som återges som en grupp som liknar en kryssrutegrupp.
code language-json |
---|
|
![Skärmbild av komponenttypen för alternativgruppskomponent](./media_19057aca4a834513c482f4f637c785b3b14c08419.png?width=750&format=png&optimize=medium)
Referens reference
En referenskomponenttyp tillåter en referens till ett annat dataobjekt från det aktuella objektet.
code language-json |
---|
|
![Skärmbild av referenskomponenttyp](./media_113db176eaad949caf55bc670dd51fe33b825464a.png?width=750&format=png&optimize=medium)
RTF rich-text
RTF ger möjlighet till RTF-inmatning med flera rader. Det erbjuder ytterligare valideringstyper.
maxSize
number
customErrorMsg
string
maxSize
överskridscode language-json |
---|
|
code language-json |
---|
|
![Skärmbild av komponenttyp för textområde](./media_12bd81eda29531805af2de8c81a45684f722c94a9.png?width=750&format=png&optimize=medium)
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.
code language-json |
---|
|
![Skärmbild av vald komponenttyp](./media_1c86213678ecd6ed6128f8ec37aab80bac74b7779.png?width=750&format=png&optimize=medium)
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.
code language-json |
---|
|
![Skärmbild av flikkomponenttyp](./media_132123718b8b23e0fcbd612a3bdf5cfaeb6e1b3dd.png?width=750&format=png&optimize=medium)
Text text
Text tillåter en enda rad med textinmatning. Det innehåller ytterligare valideringstyper.
minLength
number
maxLength
number
regExp
string
customErrorMsg
string
minLength
, maxLength
och/eller regExp
brytscode language-json |
---|
|
code language-json |
---|
|
![Skärmbild av textkomponenttyp](./media_1983458e1a920be3f84923c8ae42d65f78b7df63e.png?width=750&format=png&optimize=medium)