적응형 양식 작성 소개 introduction-to-authoring-adaptive-forms
개요 overview
적응형 양식을 사용하면 매력적인 반응형, 동적 및 적응형 양식을 만들 수 있습니다. AEM Forms은 적응형 양식을 만들고 작업할 수 있는 직관적인 사용자 인터페이스와 기본 구성 요소를 제공합니다. 양식 모델 또는 스키마를 기반으로 하거나 양식 모델 없이 적응형 양식을 만들도록 선택할 수 있습니다. 요구 사항에 적합할 뿐만 아니라 기존 인프라 투자와 자산을 확장하는 양식 모델을 신중하게 선택해야 합니다. 다음 옵션 중에서 선택하여 적응형 양식을 만들 수 있습니다.
-
양식 데이터 모델 사용
데이터 통합을 사용하면 개별 데이터 원본의 엔터티 및 서비스를 적응형 양식을 만드는 데 사용할 수 있는 양식 데이터 모델에 통합할 수 있습니다. 생성 중인 적응형 양식에 여러 데이터 소스에서 데이터를 가져오고 쓰는 작업이 포함된 경우 양식 데이터 모델을 선택합니다. -
XDP 양식 템플릿 사용
XFA 기반 양식이나 XDP 양식에 투자하는 경우 최적의 양식 모델이 됩니다. XFA 기반 양식을 적응형 양식으로 전환하는 직접적인 방법을 제공합니다. 기존 XFA 규칙은 연결된 적응형 양식에 유지됩니다. 결과 적응형 양식은 유효성 검사, 이벤트, 속성 및 패턴과 같은 XFA 구문을 지원합니다. -
XML 스키마 정의(XSD) 또는 JSON 스키마 사용
XML 및 JSON 스키마는 조직의 백엔드 시스템에서 데이터를 생성 또는 사용하는 구조를 나타냅니다. 스키마를 적응형 양식에 연결하고 해당 요소를 사용하여 적응형 양식에 다이내믹 콘텐츠를 추가할 수 있습니다. 적응형 양식을 작성할 때 스키마 요소는 콘텐츠 브라우저의 데이터 모델 개체 탭에서 사용할 수 있습니다. -
양식 모델 사용 안 함 또는 사용 안 함
이 옵션을 사용하여 만든 적응형 양식은 양식 모델을 사용하지 않습니다. 해당 양식에서 생성된 데이터 XML에는 필드와 해당 값이 포함된 기본 구조가 있습니다.
적응형 양식 만들기에 대한 자세한 내용은 적응형 양식 만들기를 참조하십시오.
적응형 양식 작성 UI adaptive-form-authoring-ui
적응형 양식 작성을 위해 터치에 적합한 UI는 직관적이며 다음을 제공합니다.
- 드래그 앤 드롭 기능
- 표준 양식 구성 요소
- 자산의 통합 저장소
기존 적응형 양식을 만들거나 편집할 때 다음 UI 요소를 사용합니다.
A. 사이드바 B. 페이지 도구 모음 C. 적응형 양식 페이지
사이드바 sidebar
사이드바를 사용하면 다음 작업을 수행할 수 있습니다.
- 패널, 구성 요소, 필드와 레이아웃 등 양식 콘텐츠를 확인할 수 있습니다.
- 구성 요소 속성을 편집할 수 있습니다.
- AEM 디지털 자산 관리(DAM) 저장소에서 자산을 검색, 조회 및 사용할 수 있습니다.
- 양식의 구성 요소를 추가할 수 있습니다.
A. 콘텐츠 브라우저 B. 속성 브라우저 C. 자산 브라우저 D. 구성 요소 브라우저
사이드바는 다음 브라우저로 구성됩니다.
-
콘텐츠 브라우저
콘텐츠 브라우저에서 다음을 볼 수 있습니다.-
양식 오브젝트
양식의 오브젝트 계층을 표시합니다. 작성자는 양식 오브젝트 트리의 해당 요소를 탭하여 특정 양식 구성 요소로 이동할 수 있습니다. 작성자는 오브젝트를 검색하고 이 트리에서 다시 정렬할 수 있습니다. -
데이터 모델 오브젝트
양식 모델 계층을 확인할 수 있습니다.
적응형 양식에 양식 모델 요소를 끌어다 놓을 수 있습니다. 추가된 요소는 원래 속성을 유지하면서 양식 구성 요소로 자동으로 변환됩니다. 양식에서 XML 스키마, JSON 스키마 또는 XDP 템플릿을 사용하는 경우 데이터 모델 오브젝트를 확인할 수 있습니다.
-
-
속성 브라우저
구성 요소의 속성을 편집할 수 있습니다. 속성은 구성 요소에 따라 변경됩니다. 적응형 양식 컨테이너의 속성을 보려면 다음 작업을 수행하십시오.
구성 요소를 선택한 다음 > 적응형 양식 컨테이너 를 선택하고 을 선택합니다.
-
자산 브라우저
이미지, 문서, 페이지, 비디오 등과 같은 다양한 유형의 콘텐츠를 구분합니다.
-
구성 요소 브라우저
적응형 양식을 작성하는 데 사용할 수 있는 구성 요소를 포함합니다. 구성 요소를에서 적응형 양식으로 드래그하여 양식 요소를 추가하고, 요구 사항에 따라 추가된 요소를 구성할 수 있습니다. 다음 표에서는 구성 요소 브라우저에 나열된 구성 요소에 대해 설명합니다.
구성 요소 작업에 대한 우수 사례 best-practices
적응형 양식 구성 요소로 작업할 때 기억해야 할 몇 가지 우수 사례와 주요 사항은 다음과 같습니다.
-
각 구성 요소에는 모양 및 기능을 제어하는 관련 속성이 있습니다. 구성 요소의 속성을 구성하려면 구성 요소를 선택하고 을 선택하여 속성 브라우저에서 구성 요소 속성을 엽니다.
-
구성 요소는 요소 이름으로 식별됩니다. 을(를) 선택하면 속성 브라우저에서 요소 이름 필드 값을 변경하여 구성 요소의 이름을 변경할 수 있습니다. 요소 이름 필드는 문자, 숫자, 하이픈(-) 및 밑줄(_)만 허용합니다. 다른 특수 문자는 허용되지 않으며 요소 이름은 문자로 시작해야 합니다.
-
양식에 제목이 표시되는 한 속성 브라우저를 열지 않고 양식 편집기에서 적응형 양식 구성 요소의 제목 속성을 수정할 수 있습니다. 방법은 다음과 같습니다.
-
제목 속성이 있고 제목 숨기기 속성이 비활성화된 구성 요소를 선택하려면 선택하십시오.
-
제목을 편집할 수 있게 하려면 을(를) 선택하십시오.
-
제목을 수정하고 Return 키를 선택하거나 구성 요소 외부 아무 곳이나 선택하여 변경 사항을 저장합니다. Esc 키를 선택하여 변경 내용을 취소합니다.
-
-
이메일 및 전화와 같은 일부 적응형 양식 구성 요소에는 즉시 사용 가능한 유효성 검사 패턴이 포함되어 있습니다. 그러나 구성 요소 속성의 패턴 아코디언 아래에 있는 유효성 검사 패턴 필드를 업데이트하여 사용자 지정 유효성 검사를 지정할 수 있습니다. 기본 유효성 검사에 대한 자세한 내용은 위 표의 구성 요소 설명 을 참조하십시오.
-
숫자 상자 및 이메일과 같은 적응형 양식 필드는 특수한 HTML5 입력 유형을 포함하도록 구성할 수 있습니다. 이러한 필드가 모바일 장치와 태블릿에 초점을 맞추면 키패드는 필드에 정보를 입력하는 데 일반적으로 사용되는 특정 알파벳, 숫자 및 문자를 앞에 표시합니다. 사용자가 키패드의 문자 집합 사이를 전환할 필요 없이 빠르게 정보를 입력할 수 있도록 돕는다. 구성 요소에 특수 입력을 허용하려면 구성 요소 속성에서 HTML 유형 번호 사용 확인란을 활성화하십시오.
-
리치 텍스트를 허용하도록 텍스트 상자 구성 요소를 활성화할 수 있습니다. 텍스트 상자에 서식 있는 텍스트를 사용하려면 구성 요소 속성에서 서식 있는 텍스트 허용 확인란을 활성화하십시오.
-
텍스트 상자, 전자 메일 및 전화 구성 요소를 활성화하여 브라우저의 자동 채우기 설정에 저장된 정보에서 이름, 주소, 신용 카드, 전화 및 전자 메일과 같은 필드의 값을 자동으로 채울 수 있습니다. 이 기능을 사용하려면 구성 요소 속성에서 자동 채우기 사용 을 선택하고 자동 채우기 특성 을(를) 선택하십시오. 사용자가 적응형 양식을 채울 때 브라우저의 자동 채우기 프로필에서 또는 사용자가 이전에 채운 값을 기반으로 값이 제안됩니다. 사용자 브라우저의 자동 채우기 설정이 켜져 있는 경우 자동 채우기가 작동합니다.
-
구성 요소 속성에서 라디오 단추 및 확인란 항목에 대한 값을
{value}={text}
형식으로 지정하십시오. -
기본적으로 파일 첨부 구성 요소에서는 하나의 파일만 첨부할 수 있습니다. 그러나 여러 첨부 파일을 지원하도록 구성 요소 속성을 구성할 수 있습니다. 또한 사용자가 동일한 파일 이름으로 여러 파일을 첨부할 경우 일부 문제가 발생할 수 있습니다. 따라서 양식 제출 시 제출된 각 첨부 파일에 대한 고유 식별자를 연결하는 것이 좋습니다. 방법은 다음과 같습니다.
- AEM Forms 서버에서 Adobe Experience Manager > 도구 > 작업 > 웹 콘솔 로 이동합니다.
- 적응형 Forms 구성 서비스 를 찾아 선택합니다.
- 응용 Forms 구성 서비스 대화 상자에서 파일 이름을 고유하게 만들기 를 사용하도록 설정합니다. 기본적으로 비활성화되어 있습니다.
-
사용자가 Safari 브라우저를 사용하여 PDF을 첨부할 수 있도록 하려면 application/pdf 이(가) 첨부 파일 구성 요소의 지원되는 파일 형식 속성에 추가되어 있는지 확인하십시오. 이전 AEM Forms 버전으로 만든 적응형 양식에는 지원되는 파일 형식 속성에 application/pdf 대신 .pdf 이(가) 포함되어 있을 수 있습니다.
적응형 양식에 대한 자세한 내용은 적응형 양식 작업 모범 사례를 참조하세요.
페이지 도구 모음 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 파일 경로를 지정합니다.
-
루트 패널: 적응형 양식의 루트 패널입니다. 이는 항목 노드 아래의 하위 패널을 포함할 수 있습니다. 루트 패널이 포함된 각 패널에 레이아웃이 연결될 수 있습니다. 패널의 레이아웃은 양식을 배치하는 방법을 나타냅니다. 예를 들어 아코디언 레이아웃에서 해당 항목은 아코디언 단계로 배치됩니다.
-
도구 모음: 적응형 양식 컨테이너에는 양식에 대해 전역적인 연결된 전역 도구 모음이 있습니다. 편집 막대의 도구 모음 추가 액션을 사용하여 이 도구 모음을 추가할 수 있습니다. 이를 통해 작성자는 제출, 저장, 재설정 등과 같은 액션을 추가할 수 있습니다.
-
자산: 이 노드에는 양식 작성에 사용되는 추가 정보가 포함됩니다. (예: 양식 모델 세부 정보, 현지화 세부 정보 등)