설명서AEM as a Cloud Service사용 안내서

적응형 양식 블록을 사용하여 양식 만들기

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

작성 대상:

  • 관리자
  • 개발자

https://video.tv.adobe.com/v/3427881?quality=12&learn=on

AEM Forms Edge Delivery는 데이터를 캡처하고 캡처한 데이터를 저장하는 양식을 쉽게 만들 수 있는 적응형 양식 블록이라는 블록을 제공합니다. 적응형 양식 블록으로 사전 구성된 새 AEM 프로젝트를 만들거나 기존 AEM 프로젝트에 적응형 양식 블록을 추가할 수 있습니다.

이러한 양식은 데이터를 Microsoft Excel 또는 Google Sheets 파일에 직접 제출하므로 Google Sheets, Microsoft Excel 및 Microsoft SharePoint의 활발한 에코시스템과 강력한 API를 사용하여 쉽게 제출 데이터를 처리하거나 기존 비즈니스 워크플로를 시작할 수 있습니다.

문서 기반 작성 에코시스템

사전 요구 사항

시작하기 전에 다음 단계를 완료했는지 확인하십시오.

양식 만들기

1단계: Microsoft Excel 또는 Google 시트를 사용하여 양식을 작성합니다.

복잡한 프로세스를 탐색하는 대신 스프레드시트를 사용하여 쉽게 양식을 만들 수 있습니다. 양식 구조를 구성할 행과 열을 정의할 수 있습니다. 각 행은 개별 양식 필드를 나타내며, 열 헤더는 해당 필드 속성을 정의합니다.

예를 들어 행이 enquiry 양식의 필드를 간략하게 설명하고 열 헤더가 해당 속성을 정의하는 다음 스프레드시트를 고려하십시오.

문의 스프레드시트

계속해서 양식을 만들려면

  1. Microsoft SharePoint 또는 Google Drive에서 AEM Edge Delivery 프로젝트 폴더에 액세스합니다.

  2. AEM Edge Delivery 프로젝트 디렉터리 내의 어느 곳에나 Microsoft Excel 통합 문서 또는 Google 시트를 만듭니다. 예를 들어 Google Drive의 AEM Edge Delivery 프로젝트 디렉터리에 enquiry라는 스프레드시트를 만듭니다.

    Google Drive의 샘플 콘텐츠

  3. 프로젝트에 지정된 구성에 따라 시트가 해당 AEM 사용자(예: helix@adobe.com)와 공유되고 있는지 확인합니다. 사용자에게 시트에 대한 편집 권한을 부여합니다.

  4. 작성된 스프레드시트를 연 다음 기본 시트 이름을 “shared-default”로 바꿉니다.

    기본 시트의 이름을 “shared-default”로 바꾸기

  5. 양식 필드를 추가하려면 “shared-default” 시트에 행과 열 헤더를 삽입합니다. 각 행은 해당 필드 속성을 정의하는 열 헤더로 양식 필드를 나타내야 합니다.

    빠른 시작을 하려면 문의 스프레드시트 콘텐츠를 스프레드시트에 복사하는 것이 좋습니다. 콘텐츠를 복사하면 스프레드시트를 저장합니다.

    embed

    https://video.tv.adobe.com/v/3427468?quality=12&learn=on

  6. AEM Sidekick을 사용하여 시트를 미리 봅니다.

    AEM Sidekick을 사용하여 시트 미리보기

    미리보기 시 새 브라우저 탭에 시트 내용이 JSON 형식으로 표시됩니다. 이는 다음 섹션의 양식을 렌더링하는 데 필요하므로 미리보기 URL을 캡처해야 합니다. URL 형식은 다음과 같습니다.

    code language-json 
        https://<branch>--<repository>--<owner>.hlx.live/<form-path>/<form-file-name>.json
    • <branch>는 GitHub 저장소의 분기를 나타냅니다.
    • <repository>는 GitHub 저장소를 나타냅니다.
    • <owner>는 GitHub 저장소를 호스팅하는 GitHub 계정의 사용자 이름을 나타냅니다.

    예를 들어 프로젝트 저장소의 이름이 “portal”이고 “wkndforms” 계정 아래에서 “main” 분기를 사용하는 경우 URL은 다음과 같습니다.

    https://main--portal--wkndforms.hlx.page/enquiry.json

2단계: Edge Delivery Services(EDS) 페이지를 사용하여 양식을 미리 봅니다.

지금까지 양식의 구조를 준비했습니다. 이제 양식을 미리 보려면 다음 작업을 수행하십시오.

  1. Microsoft SharePoint 또는 Google Drive의 계정으로 연 다음 AEM Edge Delivery 프로젝트 디렉터리로 이동합니다.

  2. 양식을 임베드할 문서 파일(예: index 파일)을 엽니다. 또는 새 문서를 만들 수 있습니다.

  3. 양식을 추가하려는 문서 내에서 원하는 위치로 이동합니다.

  4. 양식을 렌더링하기 위해 양식 블록을 작성합니다. 삽입 > 표를 선택하고 열 1개 및 행 2개가 있는 표를 만듭니다. 표의 이름을 “Form”으로 지정하고 두 번째 행에 미리보기 URL을 붙여넣습니다. 아래 그림과 같이 URL이 일반 텍스트가 아닌 하이퍼링크 형식이어야 합니다.

    table 0-row-1 1-row-1
    양식
    https://main–wefinance–wkndforms.hlx.live/enquiry.json

    웹 페이지에 적응형 양식 블록 추가

    이 블록은 양식이 임베드된 플레이스홀더 역할을 합니다. 블록의 두 번째 행에서 <form>.json 파일의 미리보기 URL을 하이퍼링크로 추가합니다.

    note important
    IMPORTANT
    URL 형식이 일반 텍스트로 표시되지 않고 하이퍼링크로 지정되었는지 확인합니다.

  5. AEM Sidekick을 사용하여 문서를 미리 봅니다. 이제 페이지에 양식이 표시됩니다. 예를 들어 다음은 문의 스프레드시트를 기반으로 한 양식입니다.

    샘플 EDS 양식

    이제 양식을 작성하고 제출 버튼을 클릭하면 스프레드시트가 아직 데이터를 허용하도록 설정되지 않았기 때문에 다음과 유사한 오류가 발생합니다.

    양식 제출 시 오류

다음 단계

스프레드시트를 준비하여 양식 제출 시 데이터를 수신합니다.

추가 참조

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