모델 정의, 필드 및 구성 요소 유형 field-types
예가 포함된 속성 레일에서 유니버설 편집기가 편집할 수 있는 필드 및 구성 요소 유형에 대해 알아봅니다. 모델 정의를 만들고 구성 요소에 연결하여 나만의 앱을 계측하는 방법을 이해합니다.
개요 overview
범용 편집기에서 사용할 앱을 조정할 때 구성 요소를 계측하고 편집기의 속성 레일에서 조작할 수 있는 필드와 구성 요소 유형을 정의해야 합니다. 모델을 만든 다음 구성 요소에서 해당 모델에 연결하면 됩니다.
이 문서에서는 예제 구성과 함께 사용 가능한 모델 정의 및 필드와 구성 요소 유형에 대한 개요를 제공합니다.
모델 정의 구조 model-structure
범용 편집기의 속성 레일을 통해 구성 요소를 구성하려면 모델 정의가 존재하고 구성 요소에 연결되어 있어야 합니다.
모델 정의는 모델 배열로 시작하는 JSON 구조입니다.
[
{
"id": "model-id", // must be unique
"fields": [] // array of fields which shall be rendered in the properties rail
}
]
fields
배열을 정의하는 방법에 대한 자세한 내용은 이 문서의 필드 섹션을 참조하십시오.
구성 요소에 모델 정의를 사용하려면 data-aue-model
특성을 사용할 수 있습니다.
<div data-aue-resource="urn:datasource:/content/path" data-aue-type="component" data-aue-model="model-id">Click me</div>
모델 정의 로드 loading-model
모델이 만들어지면 외부 파일로 참조할 수 있습니다.
<script type="application/vnd.adobe.aue.model+json" src="<url-of-model-definition>"></script>
또는 모델을 인라인으로 정의할 수도 있습니다.
<script type="application/vnd.adobe.aue.model+json">
{ ... model definition ... }
</script>
필드 fields
필드 개체에는 다음과 같은 형식 정의가 있습니다.
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
구성 요소 유형 component-types
다음은 필드를 렌더링하는 데 사용할 수 있는 구성 요소 유형입니다.
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
AEM 태그 구성 요소 유형을 사용하면 구성 요소에 태그를 첨부하는 데 사용할 수 있는 AEM 태그 선택기를 사용할 수 있습니다.
code language-json |
---|
|
![AEM 태그 구성 요소 형식의 스크린샷](./media_1159651cabbe711ba93dd5acc430b04fcaa0a07c6.png?width=750&format=png&optimize=medium)
AEM 컨텐츠 aem-content
AEM 콘텐츠 구성 요소 유형 은 콘텐츠 참조를 설정하는 데 사용할 수 있는 AEM 콘텐츠 선택기를 활성화합니다.
code language-json |
---|
|
![AEM 콘텐츠 구성 요소 형식의 스크린샷](./media_1f5cbfa1ff71d1a51b6c9e61d194b235760281617.png?width=750&format=png&optimize=medium)
부울 boolean
부울 구성 요소 유형은 토글로 렌더링된 간단한 true/false 값을 저장합니다. 추가 유효성 검사 유형을 제공합니다.
customErrorMsg
string
code language-json |
---|
|
code language-json |
---|
|
![부울 구성 요소 형식의 스크린샷](./media_1b673ea5591e814bb10c8c2327a8d4345c8b6da50.png?width=750&format=png&optimize=medium)
확인란 그룹 checkbox-group
부울과 유사하게 확인란 그룹 구성 요소 유형을 사용하면 여러 개의 확인란으로 렌더링된 참/거짓 항목을 선택할 수 있습니다.
code language-json |
---|
|
![확인란 그룹 구성 요소 형식의 스크린샷](./media_1a66c505c6ad3e5d45c1f493e5676ce69ebcca822.png?width=750&format=png&optimize=medium)
컨테이너 container
컨테이너 구성 요소 유형은 구성 요소를 그룹화할 수 있습니다. 추가 구성을 제공합니다.
collapsible
boolean
code language-json |
---|
|
![스크린샷](./media_144a48a63fe8acb3d1ee1472b114c38b773fcdc4e.png?width=750&format=png&optimize=medium)
콘텐츠 조각 content-fragment
콘텐츠 조각 선택기를 사용하여 콘텐츠 조각 및 해당 변형을 선택할 수 있습니다(필요한 경우). 추가 구성을 제공합니다.
variationName
string
code language-json |
---|
|
![콘텐츠 조각 선택기의 스크린샷](./media_11756da76e36f9d7b47e87d06371a2f6c99371c54.png?width=750&format=png&optimize=medium)
날짜/시간 date-time
날짜 시간 구성 요소 유형을 사용하면 날짜, 시간 또는 이들의 조합을 지정할 수 있습니다. 추가 구성을 제공합니다.
displayFormat
string
valueFormat
string
또한 추가 유효성 검사 유형을 제공합니다.
customErrorMsg
string
valueFormat
이(가) 충족되지 않으면 표시할 메시지code language-json |
---|
|
code language-json |
---|
|
![날짜/시간 구성 요소 형식의 스크린샷](./media_1fb7ce59e7d55ecb8462d42e25b84056e31381cc5.png?width=750&format=png&optimize=medium)
경험 조각 experience-fragment
경험 조각 선택기를 사용하여 경험 조각 및 해당 변형을 선택할 수 있습니다(필요한 경우). 추가 구성을 제공합니다.
variationName
string
code language-json |
---|
|
![경험 조각 선택기의 스크린샷](./media_192e8f6521eb9ef084f0cd392393a4ce5dccc8dc6.png?width=750&format=png&optimize=medium)
다중 선택 multiselect
다중 선택 구성 요소 유형은 선택 가능한 요소를 그룹화하는 기능을 포함하여 드롭다운에서 선택할 여러 항목을 제공합니다.
code language-json |
---|
|
code language-json |
---|
|
![다중 선택 구성 요소 형식의 스크린샷](./media_150cc6e56950fb2f7a83278ced464fba80c7ed9ac.png?width=750&format=png&optimize=medium)
![그룹화가 있는 다중 선택 구성 요소 유형의 스크린샷](./media_1dece1668ebedfa6b8c3956dc9d3277c4178c7488.png?width=750&format=png&optimize=medium)
숫자 number
숫자 구성 요소 유형을 사용하여 숫자를 입력할 수 있습니다. 추가 유효성 검사 유형을 제공합니다.
numberMin
number
numberMax
number
customErrorMsg
string
numberMin
또는 numberMax
이(가) 충족되지 않을 경우 표시되는 메시지code language-json |
---|
|
code language-json |
---|
|
![숫자 구성 요소 형식의 스크린샷](./media_15146425e109a386730d4a2edbf36bb159899e009.png?width=750&format=png&optimize=medium)
라디오 그룹 radio-group
라디오 그룹 구성 요소 유형을 사용하면 확인란 그룹과 유사한 그룹으로 렌더링된 여러 옵션에서 상호 배타적으로 선택할 수 있습니다.
code language-json |
---|
|
![스크린샷](./media_19057aca4a834513c482f4f637c785b3b14c08419.png?width=750&format=png&optimize=medium)
참조 reference
참조 구성 요소 유형을 사용하면 현재 개체에서 다른 데이터 개체를 참조할 수 있습니다.
code language-json |
---|
|
![스크린샷](./media_113db176eaad949caf55bc670dd51fe33b825464a.png?width=750&format=png&optimize=medium)
리치 텍스트 rich-text
서식 있는 텍스트를 사용하면 여러 줄의 서식 있는 텍스트를 입력할 수 있습니다. 추가 유효성 검사 유형을 제공합니다.
maxSize
number
customErrorMsg
string
maxSize
을(를) 초과할 경우 표시되는 메시지code language-json |
---|
|
code language-json |
---|
|
![텍스트 영역 구성 요소 형식의 스크린샷](./media_12bd81eda29531805af2de8c81a45684f722c94a9.png?width=750&format=png&optimize=medium)
선택 select
구성 요소 유형 선택을 사용하면 드롭다운 메뉴의 사전 정의된 옵션 목록에서 단일 옵션을 선택할 수 있습니다.
code language-json |
---|
|
![선택한 구성 요소 유형의 스크린샷](./media_1c86213678ecd6ed6128f8ec37aab80bac74b7779.png?width=750&format=png&optimize=medium)
탭 tab
탭 구성 요소 유형을 사용하면 여러 탭에서 다른 입력 필드를 함께 그룹화하여 작성자의 레이아웃 구성을 향상시킬 수 있습니다.
tab
정의는 fields
배열에서 구분 기호로 간주할 수 있습니다. tab
다음에 오는 모든 항목은 새 tab
이(가) 발견될 때까지 해당 탭에 배치되며, 그 후에는 다음 항목이 새 탭에 배치됩니다.
모든 탭 위에 표시되는 항목을 포함하려면 탭 앞에 항목을 정의해야 합니다.
code language-json |
---|
|
![스크린샷](./media_132123718b8b23e0fcbd612a3bdf5cfaeb6e1b3dd.png?width=750&format=png&optimize=medium)
텍스트 text
텍스트를 사용하면 한 줄의 텍스트를 입력할 수 있습니다. 여기에는 추가 유효성 검사 유형이 포함됩니다.
minLength
number
maxLength
number
regExp
string
customErrorMsg
string
minLength
, maxLength
및/또는 regExp
을(를) 위반할 경우 표시되는 메시지code language-json |
---|
|
code language-json |
---|
|
![텍스트 구성 요소 형식의 스크린샷](./media_1983458e1a920be3f84923c8ae42d65f78b7df63e.png?width=750&format=png&optimize=medium)