적응형 양식 편집기 introduction-to-authoring-adaptive-forms
새 적응형 양식 만들기또는 AEM Sites 페이지에 적응형 양식 추가작업을 할 때 현대적이고 확장 가능한 데이터 캡처 코어 구성 요소를 사용하는 것이 좋습니다. 이러한 구성 요소는 적응형 양식 만들기 작업이 대폭 개선되어 우수한 사용자 경험을 보장할 수 있게 되었음을 나타냅니다. 이 문서에서는 기초 구성 요소를 사용하여 적응형 양식을 작성하는 이전 접근법에 대해 설명합니다.
개요 overview
적응형 양식을 사용하여 멋지고, 반응이 빠르고, 동적이고, 적응력이 뛰어난 양식을 만들 수 있습니다. AEM Forms적응력 양식을 만들고 작업하는 데 직관적인 사용자 인터페이스와 기본 구성 요소를 제공합니다. 양식 모델이나 스키마를 기반으로 하거나 양식 모델 없이 적응형 양식을 만들도록 선택할 수 있습니다. 요구 사항에 적합할 뿐만 아니라 기존 인프라 투자와 자산을 확장하는 양식 모델을 신중하게 선택해야 합니다. 다음 옵션 중에서 선택하여 적응형 양식을 만들 수 있습니다.
-
양식 데이터 모델 사용
데이터 통합을 통해 서로 다른 데이터 소스의 엔티티와 서비스를 적응형 양식을 만드는 데 사용할 수 있는 양식 데이터 모델로 통합할 수 있습니다. 생성 중인 적응형 양식에 여러 데이터 소스에서의 데이터 가져오기 및 쓰기 작업이 포함된 경우 양식 데이터 모델을 선택합니다. -
XDP 양식 템플릿 사용
XFA 기반 양식이나 XDP 양식에 투자하는 경우 최적의 양식 모델이 됩니다. XFA 기반 양식을 적응형 양식으로 변환할 수 있는 직접적인 방법을 제공합니다. 기존 XFA 규칙은 연결된 적응형 양식에서 유지됩니다. 최종 적응형 양식은 유효성 확인, 이벤트, 속성과 패턴 등 XFA 구조를 지원합니다. -
XML 스키마 정의(XSD) 또는 JSON 스키마 사용
XML 및 JSON 스키마는 조직의 백엔드 시스템에서 데이터를 생성 또는 사용하는 구조를 나타냅니다. 스키마를 적응형 양식에 연결하고 해당 요소를 사용하여 동적 콘텐츠를 적응형 양식에 추가할 수 있습니다. 스키마 요소는 적응형 양식 작성 시 콘텐츠 브라우저의 데이터 모델 오브젝트 탭에서 사용할 수 있습니다. -
아무것도 사용하지 않거나 형식 모델 없이 사용
이 옵션으로 생성된 적응형 양식은 양식 모델을 사용하지 않습니다. 해당 양식에서 생성된 데이터 XML에는 필드와 해당 값이 포함된 기본 구조가 있습니다.note note NOTE 적응형 양식 편집기나 적응형 양식 템플릿 편집기에서 양식 모델 속성을 수정할 수 있습니다. 자세한 내용은 적응형 양식의 양식 모델 속성 편집을 참조하십시오.
적응형 양식을 만들려면 적응형 양식 만들기를 참조하십시오.
적응형 양식 작성 UI adaptive-form-authoring-ui
적응형 양식 작성을 위한 터치에 적합한 UI는 직관적이며 다음과 같은 항목을 제공합니다.
- 드래그 앤 드롭 기능
- 표준 양식 구성 요소
- 자산의 통합 저장소
기존 적응형 양식을 만들거나 편집할 때 다음 UI 요소를 사용합니다.
사이드바 sidebar
사이드바를 사용하면 다음 작업을 수행할 수 있습니다.
- AEM 디지털 자산 관리(DAM) 저장소에서 자산을 검색, 조회 및 사용할 수 있습니다.
- 패널, 구성 요소, 필드와 레이아웃 등 양식 콘텐츠를 확인할 수 있습니다.
- 양식의 구성 요소를 추가할 수 있습니다.
- 구성 요소 속성을 편집할 수 있습니다.
A. 콘텐츠 브라우저 B. 속성 브라우저 C. 자산 브라우저 D. 구성 요소 브라우저
사이드바는 다음 브라우저로 구성됩니다.
-
콘텐츠 브라우저
콘텐츠 브라우저에서 다음과 같은 사항을 확인할 수 있습니다.-
양식 오브젝트
양식의 오브젝트 계층을 표시합니다. 작성자는 양식 오브젝트 트리의 해당 요소를 탭하여 특정 양식 구성 요소로 이동할 수 있습니다. 작성자는 오브젝트를 검색하고 이 트리에서 다시 정렬할 수 있습니다. -
데이터 모델 오브젝트
양식 모델 계층을 확인할 수 있습니다.
이를 통해 적응형 양식의 양식 모델 요소를 드래그 앤 드롭할 수 있습니다. 추가된 요소는 원래 속성을 유지하면서 양식 구성 요소로 자동으로 변환됩니다. 양식에서 XML 스키마, JSON 스키마 또는 XDP 템플릿을 사용하는 경우 데이터 모델 오브젝트를 확인할 수 있습니다.
-
-
속성 브라우저
구성 요소의 속성을 편집할 수 있습니다. 속성은 구성 요소에 따라 변경됩니다. 적응형 양식 컨테이너의 속성을 표시하려면
구성 요소를 선택한 다음 를 선택합니다 > 적응형 양식 컨테이너 을 선택한 다음 을 선택합니다 .
-
자산 브라우저
이미지, 문서, 페이지, 비디오 등과 같은 다양한 유형의 콘텐츠를 구분합니다.
-
구성 요소 브라우저
적응형 양식을 빌드하는 데 사용할 수 있는 구성 요소를 포함합니다. 구성 요소를 적응형 양식으로 드래그하여 양식 요소를 추가하고 요구 사항에 따라 추가된 요소를 구성할 수 있습니다. 다음 표에서는 구성 요소 브라우저에 나열된 구성 요소에 대해 설명합니다.
페이지 도구 모음 page-toolbar
상단에 있는 페이지 도구 모음은 양식을 미리 보고, 양식 속성을 변경하고, 양식 레이아웃을 편집할 수 있는 옵션을 제공합니다. 양식 작성 시 양식을 미리 보고 적절하게 변경할 수 있습니다. 페이지 도구 모음에는 다음 항목이 표시됩니다.
-
사이드 패널 전환 : 사이드바를 표시하거나 숨길 수 있습니다.
-
페이지 정보 : 페이지 속성을 보고, 양식을 게시/게시 취소하고, 양식 워크플로를 시작하고, 클래식 UI에서 양식을 열 수 있습니다.
-
에뮬레이터 : 태블릿과 휴대폰 등 다양한 디스플레이 크기의 디자인을 에뮬레이션할 수 있습니다.
-
편집: 편집, 스타일, 개발자, 디자인 등 다른 모델을 선택할 수 있습니다.
-
편집: 양식 및 해당 구성 요소의 속성을 편집할 수 있습니다. 예: 구성 요소 추가, 이미지 드롭, 필수 필드 지정 등.
-
스타일: 양식 구성 요소 모양을 스타일링할 수 있습니다. 예를 들어 스타일 모드에서는 패널을 선택하고 배경색을 지정할 수 있습니다.
-
개발자: 개발자는 다음 작업을 수행할 수 있습니다.
-
구성되는 양식에 대해 살펴보십시오.
-
장소와 시간에 따라 발생하는 문제를 디버그하면 문제 해결에 도움이 됩니다.
-
디자인. 사이드바에 나열되지 않은 사용자 정의 구성 요소 또는 기본 제공 구성 요소를 활성화하거나 비활성화할 수 있습니다.
-
-
-
미리보기: 양식을 게시할 때 모양을 미리 볼 수 있습니다.
구성 요소 도구 모음 component-toolbar
구성 요소를 선택하면 작업할 수 있는 도구 모음이 표시됩니다. 구성 요소의 속성을 자르고, 붙여넣고, 이동하고, 지정하는 옵션이 제공됩니다. 옵션은 다음과 같습니다.
A.구성: 다음을 선택할 때 구성 구성 요소 속성이 사이드바에 표시됩니다. 해당 속성을 구성하여 데이터 캡처 경험을 사용자 정의할 수 있습니다. 구성 요소의 요소 이름을 변경하고 구성 요소의 제목 필드에 레이블 텍스트를 지정할 수 있습니다. 요소 이름을 사용하면 사용자가 구성 요소를 통해 입력하는 값을 캡처할 수 있습니다. 구성 요소 속성에서 구성 요소 비헤이비어를 지정하고 사용자 입력을 관리합니다. 사이드바에서 속성을 구성하여 사용자 데이터를 캡처하고 추가 처리에 사용합니다. 적응형 양식 컨테이너 속성을 사용하여 클라이언트 라이브러리, 레이아웃, 테마, 기록 문서 설정, 저장 설정, 제출 설정 및 메타데이터 설정을 지정할 수 있습니다.
B.복사: 복사 옵션을 사용하여 구성 요소를 복사하고 양식의 다른 위치에 붙여넣을 수 있습니다. 구성 요소를 붙여넣을 때 붙여넣은 구성 요소에 새 요소 이름이 지정되지만 복사된 구성 요소의 속성은 그대로 유지됩니다.
C.자르기: 자르기 옵션을 사용하여 적응형 양식의 구성 요소를 한 위치에서 다른 위치로 이동할 수 있습니다.
D. 삭제: 구성 요소를 양식에서 삭제할 수 있습니다.
E. 삽입: 구성 요소를 선택한 구성 요소 위에 삽입할 수 있습니다.
F. 붙여넣기: 위에서 설명한 옵션을 사용하여 자르거나 복사한 구성 요소를 붙여넣을 수 있습니다.
G. 규칙 편집: 규칙 편집기를 열 수 있습니다. 추가 정보,
H. 그룹: 두 개 이상의 구성 요소를 함께 자르고 복사하거나 붙여넣으려는 경우 여러 구성 요소를 선택할 수 있습니다.
I. 상위: 상위 구성 요소를 선택할 수 있습니다. 예를 들어 텍스트 필드는 섹션에 있는 하위 섹션 내에 있습니다. 섹션은 안내서 루트 패널에 있으며 적응형 양식 컨테이너는 상위 안내서 루트 패널입니다. 구성 요소의 경우 계층이 상향식으로 정렬된 모든 옵션을 확인할 수 있습니다.
예를 들어, 상위 텍스트 상자의 경우 다음을 볼 수 있습니다.
- 하위 섹션
- 섹션
- guideRootPanel
- 적응형 양식 컨테이너
J. 기타: 추가 옵션을 제공하여 선택한 구성 요소로 작업할 수 있습니다.
- SOM 표현식 보기
- 조각으로 패널 저장 (패널만 해당)
- 하위 패널 추가 (패널만 해당)
- 패널 도구 모음 추가 (패널만 해당)
- 바꾸기 (패널에 해당되지 않음)
적응형 양식 페이지 af-page
적응형 양식 페이지는 실제 양식입니다. WCM cq:Page
구성 요소로 모델링된 다른 WCM 페이지와 비슷합니다. 다음 이미지는 일반 적응형 양식의 콘텐츠 구조를 보여 줍니다.
콘텐츠 구조에는 일반적으로 다음 기본 구성 요소가 포함됩니다.
-
guideContainer: 적응형 양식 UI의 적응형 양식 시작 으로 표시되는 적응형 양식 루트. 이 구성 요소에서 다음과 같은 사항을 지정할 수 있습니다.
- 적응형 양식의 모바일 레이아웃: 모바일 디바이스에서 양식 모양을 정의합니다.
- 감사 페이지: 양식을 제출하고 사용자가 리디렉션되는 페이지를 정의합니다.
- 제출 액션: 사용자가 양식을 제출한 후 서버에서 양식을 처리하는 방법을 정의합니다.
- 스타일링: 양식 모양을 사용자 정의하는 데 사용되는 CSS 파일 경로를 지정합니다.
-
rootPanel: 적응형 양식의 루트 패널. 이는 항목 노드 아래의 하위 패널을 포함할 수 있습니다. 루트 패널이 포함된 각 패널에 레이아웃이 연결될 수 있습니다. 패널의 레이아웃은 양식을 배치하는 방법을 나타냅니다. 예를 들어 아코디언 레이아웃에서 해당 항목은 아코디언 단계로 배치됩니다.
-
도구 모음: 적응형 양식 컨테이너는 양식 전역의 맞춤형 글로벌 도구 모음과 연결되어 있습니다. 편집 막대의 도구 모음 추가 액션을 사용하여 이 도구 모음을 추가할 수 있습니다. 이를 통해 작성자는 제출, 저장, 재설정 등과 같은 액션을 추가할 수 있습니다.
-
자산: 이 노드에는 양식 작성에 사용되는 추가 정보가 포함됩니다. 예: 양식 모델 세부 정보, 지역화 세부 정보 등.
추가 참조 see-also
- AEM 적응형 양식 만들기
- AEM 적응형 양식을 AEM Sites 페이지에 추가
- AEM 적응형 양식에 테마 적용
- AEM 적응형 양식에 구성 요소 추가
- AEM 적응형 양식에서 CAPTCHA 사용
- AEM 적응형 양식의 PDF 버전(DoR) 생성
- AEM 적응형 양식 번역
- 적응형 양식에 대해 Adobe Analytics를 활성화하여 양식 사용 추적
- Microsoft SharePoint에 적응형 양식 연결
- Microsoft Power Automate에 적응형 양식 연결
- Microsoft OneDrive에 적응형 양식 연결
- Microsoft Azure Blob Storage에 적응형 양식 연결
- Salesforce에 적응형 양식 연결
- AEM 적응형 양식에서 Adobe Sign 사용
- 적응형 양식에 대해 새 로케일 추가
- 적응형 양식 데이터를 데이터베이스로 보내기
- 적응형 양식 데이터를 REST 엔드포인트로 보내기
- 적응형 양식 데이터를 AEM 워크플로로 보내기
- Forms 포털을 사용하여 AEM 웹 사이트에 AEM 적응형 양식 나열
- 적응형 양식에 버전 관리, 댓글 및 주석 추가
- 적응형 Forms 비교