적응형 양식 편집기 introduction-to-authoring-adaptive-forms

새 적응형 양식 만들기또는 AEM Sites 페이지에 적응형 양식 추가작업을 할 때 현대적이고 확장 가능한 데이터 캡처 코어 구성 요소를 사용하는 것이 좋습니다. 이러한 구성 요소는 적응형 양식 만들기 작업이 대폭 개선되어 우수한 사용자 경험을 보장할 수 있게 되었음을 나타냅니다. 이 문서에서는 기초 구성 요소를 사용하여 적응형 양식을 작성하는 이전 접근법에 대해 설명합니다.

버전
문서 링크
AEM 6.5
여기 클릭
AEM as a Cloud Service
이 문서

개요 overview

적응형 양식을 사용하여 멋지고, 반응이 빠르고, 동적이고, 적응력이 뛰어난 양식을 만들 수 있습니다. AEM Forms적응력 양식을 만들고 작업하는 데 직관적인 사용자 인터페이스와 기본 구성 요소를 제공합니다. 양식 모델이나 스키마를 기반으로 하거나 양식 모델 없이 적응형 양식을 만들도록 선택할 수 있습니다. 요구 사항에 적합할 뿐만 아니라 기존 인프라 투자와 자산을 확장하는 양식 모델을 신중하게 선택해야 합니다. 다음 옵션 중에서 선택하여 적응형 양식을 만들 수 있습니다.

  • 양식 데이터 모델(FDM) 사용
    데이터 통합 를 사용하면 의 서로 다른 데이터 소스의 엔티티와 서비스를 적응형 Forms을 만드는 데 사용할 수 있는 양식 데이터 모델(FDM)에 통합할 수 있습니다. 생성 중인 적응형 양식에 여러 데이터 소스에서 데이터를 가져오고 쓰는 작업이 포함된 경우 양식 데이터 모델(FDM)을 선택합니다.

  • 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 템플릿을 사용하는 경우 데이터 모델 오브젝트를 확인할 수 있습니다.

  • 속성 브라우저

    구성 요소의 속성을 편집할 수 있습니다. 속성은 구성 요소에 따라 변경됩니다. 적응형 양식 컨테이너의 속성을 표시하려면

    구성 요소를 선택한 다음 를 선택합니다 필드 수준 > 적응형 양식 컨테이너 ​을 선택한 다음 을 선택합니다 속성 .

  • 자산 브라우저

    이미지, 문서, 페이지, 비디오 등과 같은 다양한 유형의 콘텐츠를 구분합니다.

  • 구성 요소 브라우저

    적응형 양식을 빌드하는 데 사용할 수 있는 구성 요소를 포함합니다. 구성 요소를 적응형 양식으로 드래그하여 양식 요소를 추가하고 요구 사항에 따라 추가된 요소를 구성할 수 있습니다. 다음 표에서는 구성 요소 브라우저에 나열된 구성 요소에 대해 설명합니다.

구성 요소
기능
Adobe Sign 차단
Adobe Sign을 사용하여 서명하는 동안 채워질 필드에 대한 플레이스홀더가 포함된 텍스트의 블록을 추가합니다.
버튼
구성하여 저장, 재설정, 다음으로 이동, 이전으로 이동 등과 같은 액션을 수행할 수 있는 버튼을 추가합니다.
Captcha
Google reCAPTCHA 서비스를 사용하여 CAPTCHA 유효성 확인을 추가합니다.
차트
적응형 양식과 문서에 사용할 수 있는 차트를 추가하여 반복 가능한 패널 및 테이블 행의 2차원 데이터를 시각적으로 표현할 수 있습니다.
확인란
확인란을 추가합니다.
데이터 입력 필드
양식의 날짜 입력 필드 구성 요소를 사용하여 고객은 상자 세 개에 각각 일, 월, 년을 채울 수 있습니다. 구성 요소의 디자인을 사용자 정의하고 날짜 형식을 변경할 수 있습니다. 예: 고객은 MM/DD/YYYY 또는 DD/MM/YYYY 형식으로 날짜를 입력할 수 있습니다.
날짜 선택
날짜를 선택하는 캘린더 필드를 추가합니다.
문서 조각
재사용 가능한 서신의 구성 요소를 추가할 수 있습니다.
문서 조각 그룹
레터 템플릿에 단일 단위로 사용할 수 있는 관련 문서 조각 그룹을 추가할 수 있습니다.
드롭다운 목록
드롭다운 목록 추가 - 단일 또는 다중 선택
이메일

이메일 주소를 캡처하는 필드를 추가합니다. 이메일 구성 요소는 기본적으로 다음 정규 표현식을 사용하여 이메일 주소를 확인합니다.

^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$

파일 첨부

사용자가 지원 문서를 검색하고 양식에 첨부할 수 있는 버튼을 추가합니다.

참고: 첨부 파일 구성 요소는 Adobe Sign에 사용되는 적응형 양식에서 사전 정의된 파일 형식 세트를 지원합니다. 자세한 내용은 지원되는 파일 형식을 참조하십시오.

첨부 파일 나열
파일 첨부 구성 요소를 통해 업로드된 모든 첨부 파일을 나열하는 필드를 추가합니다.
바닥글
일반적으로 회사 로고, 양식 제목과 요약이 포함된 페이지 머리글을 추가합니다.
헤더
일반적으로 저작권 정보와 다른 페이지에 대한 링크가 포함된 페이지 바닥글을 추가합니다.
이미지
이미지를 삽입할 수 있습니다.
이미지 선택
고객은 이미지를 선택하여 정보를 제공할 수 있습니다. 이 정보를 사용하여 맞춤형 서비스를 고객에게 제공할 수 있습니다.
다음 버튼
버튼을 추가하여 양식에서 다음 패널로 이동합니다.
숫자 상자
숫자 값을 캡처하는 필드 추가
숫자 스텝퍼
양식의 숫자 스텝퍼를 사용하여 고객은 사전 정의된 단계에 따라 증감할 수 있는 숫자 값을 입력할 수 있습니다.
패널

패널 또는 하위 패널을 추가합니다.

하위 패널 추가 버튼을 사용하여 상위 패널 도구 모음에서 패널 구성 요소를 추가할 수도 있습니다. 마찬가지로 패널 도구 모음 추가 버튼을 사용하여 패널별 도구 모음을 추가할 수 있습니다. 패널 편집 대화 상자를 사용하여 패널 도구 모음의 위치를 구성할 수 있습니다.

암호 상자
암호를 캡처하는 필드를 추가합니다.
이전 버튼
사용자가 이전 페이지 또는 패널로 돌아가는 데 필요한 버튼을 추가합니다.
라디오 버튼
라디오 버튼을 추가합니다.
재설정 버튼
버튼을 추가하여 양식 필드를 재설정합니다.
저장 버튼
버튼을 추가하여 양식 데이터를 저장합니다.
스크리블 서명
스크리블 서명을 캡처하는 필드를 추가합니다.
분리자
양식에서 패널을 시각적으로 구분할 수 있습니다.
서명 단계
사용자가 양식을 확인하고 서명할 수 있도록 양식과 서명 필드에 제공된 정보를 표시합니다.
텍스트
정적 텍스트를 지정할 수 있습니다.
제출 버튼
제출 버튼을 추가하여 양식을 구성된 제출 액션에 제출합니다.
요약 단계
양식을 제출하고, 양식이 제출되면 작성자가 지정한 요약 텍스트를 표시합니다.
전환
전환 또는 활성화/비활성화 액션을 수행하는 스위치를 추가합니다. 전환 구성 요소에서는 두 개 이상의 옵션을 추가할 수 없습니다. 스위치에는 켜기 또는 끄기 등 두 가지 값만 있을 수 있으므로 필수 항목은 적용되지 않습니다. 사용자 입력에 상관없이 적어도 한 개의 값이 저장됩니다.
행 및 열에 데이터를 구성할 수 있는 표를 추가합니다.
전화 번호

필드를 추가하여 전화 번호를 캡처합니다. 전화 구성 요소를 사용하여 작성자는 다음 전화 번호 유형 중 하나를 구성할 수 있습니다. 각 유형은 유효성 확인에 필요한 기본 정규 표현식과 연결됩니다.

  • Type International은 ^[+][0-9]{0,14}$에서 검증합니다.
  • Type USPhoneNumber는 {'+1 ('999') '999-9999}에서 검증합니다.
  • Type UKPhoneNumber는 text{'+'99 999 999 9999}에서 검증합니다.
  • Type Custom은 기본 유효성 확인 패턴을 제공하지 않습니다. 마지막으로 선택한 전화 번호 유형 값을 얻습니다. 사용자 고유의 유효성 확인 패턴을 지정할 수도 있습니다.
사용 약관
사용자가 양식을 작성하기 전에 검토할 수 있도록 작성자가 약관을 지정하는 데 사용할 수 있는 필드를 추가합니다.
텍스트 상자

사용자가 필수 정보를 지정할 수 있는 텍스트 상자를 추가합니다.

기본적으로 텍스트 상자 구성 요소는 일반 텍스트만 허용합니다. 리치 텍스트를 허용하도록 텍스트 상자 구성 요소를 활성화할 수 있습니다. 리치 텍스트가 활성화된 텍스트 구성 요소는 헤더를 추가하고, 문자 스타일(볼드체, 이탤릭체, 밑줄)을 변경하고, 순차 목록 및 비순차 목록을 만들고, 텍스트 배경 및 색상을 변경하고, 하이퍼링크를 추가하는 옵션을 제공합니다. 텍스트 상자에 대한 리치 텍스트를 활성화하려면 구성 요소 속성에서 리치 텍스트 허용 옵션을 활성화합니다.

제목
적응형 양식의 제목을 지정합니다.
단계 확인

사용자 확인 용도의 채워진 양식을 표시하기 위한 플레이스홀더를 추가합니다.

참고: 구성 요소 확인에 포함된 적응형 양식은 익명 사용자를 지원하지 않습니다. 또한 적응형 양식 조각에서는 구성 요소 확인을 사용하지 않는 것이 좋습니다.

페이지 도구 모음 page-toolbar

상단에 있는 페이지 도구 모음은 양식을 미리 보고, 양식 속성을 변경하고, 양식 레이아웃을 편집할 수 있는 옵션을 제공합니다. 양식 작성 시 양식을 미리 보고 적절하게 변경할 수 있습니다. 페이지 도구 모음에는 다음 항목이 표시됩니다.

  • 사이드 패널 전환 toggle-side-panel : 사이드바를 표시하거나 숨길 수 있습니다.

  • 페이지 정보 theme-options : 페이지 속성을 보고, 양식을 게시/게시 취소하고, 양식 워크플로를 시작하고, 클래식 UI에서 양식을 열 수 있습니다.

  • 에뮬레이터 눈금자 : 태블릿과 휴대폰 등 다양한 디스플레이 크기의 디자인을 에뮬레이션할 수 있습니다.

  • 편집: 편집, 스타일, 개발자, 디자인 등 다른 모델을 선택할 수 있습니다.

    • 편집: 양식 및 해당 구성 요소의 속성을 편집할 수 있습니다. 예: 구성 요소 추가, 이미지 드롭, 필수 필드 지정 등.

    • 스타일: 양식 구성 요소 모양을 스타일링할 수 있습니다. 예를 들어 스타일 모드에서는 패널을 선택하고 배경색을 지정할 수 있습니다.

    • 개발자: 개발자는 다음 작업을 수행할 수 있습니다.

      • 구성되는 양식에 대해 살펴보십시오.

      • 장소와 시간에 따라 발생하는 문제를 디버그하면 문제 해결에 도움이 됩니다.

      • 디자인. 사이드바에 나열되지 않은 사용자 정의 구성 요소 또는 기본 제공 구성 요소를 활성화하거나 비활성화할 수 있습니다.

  • 미리보기: 양식을 게시할 때 모양을 미리 볼 수 있습니다.

구성 요소 도구 모음 component-toolbar

Touch UI의 구성 요소 도구 모음

구성 요소를 선택하면 작업할 수 있는 도구 모음이 표시됩니다. 구성 요소의 속성을 자르고, 붙여넣고, 이동하고, 지정하는 옵션이 제공됩니다. 옵션은 다음과 같습니다.

A.구성: 다음을 선택할 때 구성 ​구성 요소 속성이 사이드바에 표시됩니다. 해당 속성을 구성하여 데이터 캡처 경험을 사용자 정의할 수 있습니다. 구성 요소의 요소 이름을 변경하고 구성 요소의 제목 필드에 레이블 텍스트를 지정할 수 있습니다. 요소 이름을 사용하면 사용자가 구성 요소를 통해 입력하는 값을 캡처할 수 있습니다. 구성 요소 속성에서 구성 요소 비헤이비어를 지정하고 사용자 입력을 관리합니다. 사이드바에서 속성을 구성하여 사용자 데이터를 캡처하고 추가 처리에 사용합니다. 적응형 양식 컨테이너 속성을 사용하여 클라이언트 라이브러리, 레이아웃, 테마, 기록 문서 설정, 저장 설정, 제출 설정 및 메타데이터 설정을 지정할 수 있습니다.

B.복사: 복사 옵션을 사용하여 구성 요소를 복사하고 양식의 다른 위치에 붙여넣을 수 있습니다. 구성 요소를 붙여넣을 때 붙여넣은 구성 요소에 새 요소 이름이 지정되지만 복사된 구성 요소의 속성은 그대로 유지됩니다.

C.자르기: 자르기 옵션을 사용하여 적응형 양식의 구성 요소를 한 위치에서 다른 위치로 이동할 수 있습니다.

D. 삭제: 구성 요소를 양식에서 삭제할 수 있습니다.

E. 삽입: 구성 요소를 선택한 구성 요소 위에 삽입할 수 있습니다.

F. 붙여넣기: 위에서 설명한 옵션을 사용하여 자르거나 복사한 구성 요소를 붙여넣을 수 있습니다.

G. 규칙 편집: 규칙 편집기를 열 수 있습니다. 추가 정보,

H. 그룹: 두 개 이상의 구성 요소를 함께 자르고 복사하거나 붙여넣으려는 경우 여러 구성 요소를 선택할 수 있습니다.

I. 상위: 상위 구성 요소를 선택할 수 있습니다. 예를 들어 텍스트 필드는 섹션에 있는 하위 섹션 내에 있습니다. 섹션은 안내서 루트 패널에 있으며 적응형 양식 컨테이너는 상위 안내서 루트 패널입니다. 구성 요소의 경우 계층이 상향식으로 정렬된 모든 옵션을 확인할 수 있습니다.

예를 들어, 상위 텍스트 상자의 경우 다음을 볼 수 있습니다.

  • 하위 섹션
  • 섹션
  • guideRootPanel
  • 적응형 양식 컨테이너

J. 기타: 추가 옵션을 제공하여 선택한 구성 요소로 작업할 수 있습니다.

  • SOM 표현식 보기
  • 조각으로 패널 저장 (패널만 해당)
  • 하위 패널 추가 (패널만 해당)
  • 패널 도구 모음 추가 (패널만 해당)
  • 바꾸기 (패널에 해당되지 않음)

적응형 양식 페이지 af-page

적응형 양식 페이지는 실제 양식입니다. WCM cq:Page구성 요소로 모델링된 다른 WCM 페이지와 비슷합니다. 다음 이미지는 일반 적응형 양식의 콘텐츠 구조를 보여 줍니다.

적응형 양식 WCM 페이지의 콘텐츠 구조

콘텐츠 구조에는 일반적으로 다음 기본 구성 요소가 포함됩니다.

  • guideContainer: 적응형 양식 UI의 적응형 양식 시작 ​으로 표시되는 적응형 양식 루트. 이 구성 요소에서 다음과 같은 사항을 지정할 수 있습니다.

    • 적응형 양식의 모바일 레이아웃: 모바일 디바이스에서 양식 모양을 정의합니다.
    • 감사 페이지: 양식을 제출하고 사용자가 리디렉션되는 페이지를 정의합니다.
    • 제출 액션: 사용자가 양식을 제출한 후 서버에서 양식을 처리하는 방법을 정의합니다.
    • 스타일링: 양식 모양을 사용자 정의하는 데 사용되는 CSS 파일 경로를 지정합니다.
  • rootPanel: 적응형 양식의 루트 패널. 이는 항목 노드 아래의 하위 패널을 포함할 수 있습니다. 루트 패널이 포함된 각 패널에 레이아웃이 연결될 수 있습니다. 패널의 레이아웃은 양식을 배치하는 방법을 나타냅니다. 예를 들어 아코디언 레이아웃에서 해당 항목은 아코디언 단계로 배치됩니다.

  • 도구 모음: 적응형 양식 컨테이너는 양식 전역의 맞춤형 글로벌 도구 모음과 연결되어 있습니다. 편집 막대의 도구 모음 추가 액션을 사용하여 이 도구 모음을 추가할 수 있습니다. 이를 통해 작성자는 제출, 저장, 재설정 등과 같은 액션을 추가할 수 있습니다.

  • 자산: 이 노드에는 양식 작성에 사용되는 추가 정보가 포함됩니다. 예: 양식 모델 세부 정보, 지역화 세부 정보 등.

추가 참조 see-also

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab