범용 편집기에서 양식 조각 만들기

범용 편집기에서 양식 조각을 만들려면 다음 단계를 수행합니다.

1. AEM Forms as a Cloud Service 작성자 인스턴스에 로그인합니다.

2. Adobe Experience Manager > 양식 > 양식 및 문서 ​를 선택합니다.

3. 만들기 > 적응형 양식 조각 ​을 클릭합니다.

   

   적응형 양식 조각 만들기 마법사가 나타납니다.

4. 템플릿 선택 ​탭에서 Edge Delivery Services 기반 템플릿을 선택하고 다음 을 클릭합니다.
   

5. 조각의 제목, 이름, 설명 및 태그를 지정합니다. 조각에 고유한 이름을 지정해야 합니다. 동일한 이름의 다른 조각이 존재하는 경우 조각은 생성되지 않습니다.

6. GitHub URL ​을 지정합니다. 예를 들어 GitHub 저장소의 이름이 edsforms이고 wkndforms 계정 아래에 있는 경우 URL은 https://github.com/wkndforms/edsforms입니다.

   

7. (선택 사항) 양식 모델 탭을 클릭하여 열고 다음에서 선택 드롭다운 메뉴에서 다음 조각 모델 중 하나를 선택합니다.

   

   • 양식 데이터 모델(FDM): 데이터 소스의 데이터 모델 오브젝트와 서비스를 조각에 통합합니다. 양식에 여러 소스의 데이터를 읽고 써야 하는 경우 양식 데이터 모델(FDM)을 선택하십시오.

   • JSON 스키마: 데이터 구조를 정의하는 JSON 스키마를 연결하여 양식을 백엔드 시스템과 통합합니다. 이렇게 하면 스키마 요소를 사용하여 동적 콘텐츠를 추가할 수 있습니다.

   • 없음: 양식 모델을 사용하지 않고 처음부터 조각을 만들도록 지정합니다.

   note note
   NOTE
   범용 편집기에서 양식이나 조각을 양식 데이터 모델(FDM)과 통합하여 다양한 백엔드 데이터 소스를 사용하는 방법을 알아보려면 범용 편집기에서 양식 데이터 모델과 양식 통합을 참조하십시오.

8. (선택 사항) 고급 탭에서 조각의 게시 일자 또는 게시 취소 일자 ​를 지정합니다.

   

9. 만들기 ​를 클릭하여 조각을 생성합니다. 편집 옵션이 포함된 성공 대화 상자가 나타납니다.

   

10. 편집 ​을 클릭하여 기본 템플릿이 적용된 범용 편집기에서 조각을 엽니다.

    

11. 조각 콘텐츠 디자인: 양식 구성 요소(텍스트 필드, 드롭다운, 확인란)를 추가하여 재사용 가능한 섹션을 빌드합니다. 자세한 구성 요소 지침은 범용 편집기를 사용하여 AEM Forms용 Edge Delivery Services 시작하기를 참조하십시오.

12. 구성 요소 속성 구성: 사용 사례에 따라 필드 이름, 유효성 검사 규칙 및 기본값을 설정합니다.

13. 저장 및 미리보기: 조각을 저장하고 미리보기 모드를 사용하여 레이아웃과 기능을 확인합니다.

    

유효성 검사 체크포인트:

• 범용 편집기에서 오류 없이 조각이 로드됩니다.
• 모든 양식 구성 요소가 올바르게 렌더링됩니다.
• 필드 속성 및 유효성 검사 규칙이 예상대로 작동합니다.
• 조각이 저장되고 양식 및 문서 콘솔에서 사용할 수 있습니다.

조각이 완료되면 모든 Edge Delivery Services 양식에 통합할 수 있습니다.

이 예에서는 직원 및 감독자 정보 섹션 모두에 Contact Details 조각을 사용하는 Employee Details 양식을 만드는 방법을 보여 줍니다. 이 접근 방식을 사용하면 개발 노력을 줄이면서 일관된 데이터 수집을 보장할 수 있습니다.

양식에 양식 조각을 통합하려면 다음을 수행하십시오.

1. 편집 모드에서 양식을 엽니다.

2. 양식에 양식 조각 구성 요소를 추가합니다.

3. 콘텐츠 브라우저를 열고 콘텐츠 트리 ​의 적응형 양식 구성 요소로 이동합니다.

4. 조각을 추가하려는 섹션으로 이동합니다. 예를 들어 직원 세부 정보 패널로 이동할 수 있습니다.

   

5. 추가 아이콘을 클릭하고 적응형 양식 구성 요소 목록에서 원하는 양식 조각 구성 요소를 추가합니다.
   

   양식 조각 구성 요소를 선택하면 해당 조각이 양식에 추가됩니다. 추가된 조각의 속성 ​을 열어 해당 속성을 구성할 수 있습니다. 예를 들어 조각의 속성 ​에서 제목을 숨길 수 있습니다.

   

6. 기본 탭에서 조각 참조 ​를 선택합니다. 양식 모델에 따라 양식에 사용할 수 있는 모든 조각이 나타납니다.

   예를 들어 /content/forms/af 조각으로 이동하여 Contact Details 조각을 선택할 수 있습니다.

   

7. 선택 ​을 클릭합니다.

   양식 조각은 양식에 대한 참조를 통해 추가되며 독립형 양식 조각과 동기화 상태를 유지합니다.

   

   note note
   NOTE
   조각 편집 버튼을 사용하면 편집할 양식 조각으로 직접 이동할 수 있습니다.

   미리보기 모드 ​에서 양식을 미리 보고 양식이 어떻게 나타나는지 확인할 수 있습니다.

   

   마찬가지로 3~7단계를 반복하여 Supervisor Details 패널에도 Contact Details 조각을 삽입할 수 있습니다.

   

AEM Forms 사용자 인터페이스를 사용하여 양식 조각에 대해 여러 작업을 수행할 수 있습니다.

1. AEM Forms as a Cloud Service 작성자 인스턴스에 로그인합니다.

2. Adobe Experience Manager > 양식 > 양식 및 문서 ​를 선택합니다.

3. 양식 조각을 선택하면 다음과 같이 도구 모음에 선택한 조각에서 수행할 수 있는 작업이 표시됩니다.

   

   table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 html-authored no-header
   작업	설명
   편집	편집 모드에서 양식 조각을 엽니다.
   속성	양식 조각의 속성을 수정할 수 있습니다.
   복사	양식 조각을 복사하여 원하는 위치에 붙여넣을 수 있습니다.
   미리보기	조각을 HTML로 미리 보거나 XML 파일의 데이터를 조각과 병합하여 사용자 정의 미리보기를 수행할 수 있습니다.
   다운로드	선택한 조각을 다운로드합니다.
   검토 시작/검토 관리	선택한 조각에 대한 검토를 시작하고 관리할 수 있습니다.
   게시/게시 취소	선택한 조각을 게시/게시 취소합니다.
   삭제	선택한 조각을 삭제합니다.
   비교	미리보기 목적으로 두 개의 조각을 비교합니다.