Forms

AEM은 제출된 데이터를 Microsoft Excel 또는 Google Sheet 문서로 수집하는 양식 서비스를 제공합니다.

웹 사이트의 양식을 통해 제출된 데이터가 스프레드시트로 직접 유입되므로 비즈니스 사용자가 쉽게 액세스할 수 있습니다. Google Sheets는 물론 Microsoft Excel 및 Sharepoint에서 생생한 에코시스템과 강력한 API에 액세스할 수 있으므로 이러한 데이터는 보다 복잡한 자동화된 워크플로우와 상호 작용할 수도 있습니다.

데이터 수집을 위한 시트 준비

  1. 프로젝트 디렉터리 아래 아무 곳에나 Excel 통합 문서 또는 Google 시트를 만듭니다. 이 문서에서는 OneDrive에 있는 email-form.xlsx 를 AEM 프로젝트의 루트에 추가합니다.

  2. AEM 사용자(예: helix@adobe.com)이 프로젝트에 대해 구성되어 있는 경우 권한 편집 시트에.

  3. 만든 통합 문서를 열고 기본 시트의 이름을 로 변경합니다. incoming.


    참고: 다음 경우에 AEM은 이 통합 문서에 데이터를 전송하지 않습니다. incoming 시트가 없습니다.

  4. Sidekick에서 시트를 미리 봅니다.
    참고: 시트를 이전에 미리 본 경우에도 를 생성한 후 다시 미리 보아야 합니다. incoming 첫 번째 시트입니다.

  5. 수집 중인 데이터와 일치하는 헤더가 있는 시트를 설정합니다. 이 작업은 수동으로 수행하거나 AEM Admin Service의 양식 경로로 POST 요청을 전송하여 수행할 수 있습니다. Admin Service는 POST 본문에서 데이터를 보고 데이터를 수집하고 Forms 서비스를 최대한 활용하는 데 필요한 머리글/테이블 및 시트를 만듭니다.
    시트를 설정하는 POST 요청 형식에 대한 자세한 내용은 관리 API 설명서와 다음 예제를 참조하십시오.

    요청:

    code language-none
    POST /form/{owner}/{repo}/{ref}/en/email-form.json HTTP/1.1
    {"data":{"firstName":"test"}}
    

    응답:

    code language-none
    HTTP/1.1 200 OK
    {"rowCount":2,"columns":["firstName"]}
    

    curl 또는 Postman과 같은 도구를 사용하여 이 POST을 요청할 수 있습니다. 예:

    code language-none
    curl -s -i -X POST 'https://admin.hlx.page/form/{owner}/{repo}/{ref}/en/email-form.json' \
    --header 'Content-Type: application/json' \
    --data '{"data":{"firstName":"test"}}'
    

    위의 POST 요청을 통해 Admin Service에서 양식 설정에 사용할 샘플 데이터, 즉 양식 필드 및 샘플 값을 제공하고 있습니다.
    시트를 설정하려면 Admin Service를 사용하는 것이 좋지만 수동으로 헤더를 만들려면 문서를 참조하십시오 수동 Forms 시트 설정.

  6. 전송 후 POST admin service에 요청하면 통합 문서에 대한 다음 변경 사항이 표시됩니다.

    1. 이름이 인 시트 helix-default 이(가) 만들어졌습니다. 이 시트의 데이터는 GET 시트가 요청됩니다. 스프레드시트 공식을 사용하여 의 데이터를 요약하기에 좋은 위치입니다. incoming 다른 곳에서의 소비용 시트.

      참고: 다음 helix-default 시트에는 개인 식별 정보나 공개적으로 액세스할 수 없는 기타 데이터가 포함되어서는 안 됩니다.

    2. 이름이 인 시트 slack 이(가) 만들어졌습니다. 스프레드시트로 데이터를 수집할 때마다 Slack 채널에 자동 알림을 설정할 수 있습니다. 현재 AEM은 AEM Engineering Slack 조직과 Adobe 엔터프라이즈 지원 조직에 대한 알림만 지원합니다.

      1. Slack 알림을 설정하려면 다음을 입력합니다. teamId Slack 작업 공간 및 channel 이름 또는 ID. Slack 봇에 요청할 수도 있습니다( 를 사용하여). debug 명령)을 참조하십시오. teamIdchannel ID 사용 channel 채널 이름을 바꾸면 유지되므로 이름 대신 ID를 사용하는 것이 좋습니다.

        참고: 이전 양식에는 다음이 없습니다. teamId 열. 다음 teamId 이(가)에 포함되었습니다. channel 열로 구분됨 # 또는 /.
      2. 원하는 항목 입력 제목 다음 범위 내에서 필드 Slack 알림에 표시할 필드의 이름을 입력합니다. 각 제목은 쉼표로 구분해야 합니다(예: name, email).

시트에 데이터 보내기

이제 시트가 데이터 수집 준비되었으며 다음을 보낼 수 있습니다. POST 의 시트에 직접 요청 hlx.page, hlx.live 또는 프로덕션 도메인

POST https://ref–repo–owner.hlx.(page|live)/email-form
POST https://my-domain.com/email-form

참고: URL에는 .json 확장명. 시트는 다음에 대해 게시되어야 합니다. POST 작업할 작업 .live 또는 프로덕션 도메인에서

에서 양식 데이터의 형식을 지정하는 방법에는 몇 가지가 있습니다. POST 본문.

  • 이름/값 쌍의 배열로서
    https://gist.github.com/dylandepass/9ba6b83700dfce1fa90a47bde62c2e9
  • 키/값 쌍을 가진 개체로
    <script src=“https://gist.github.com/dylandepass/2b5f694723dfdb3d304fcafc613d6595.js”></script>
  • 다음으로: x-www-form-urlencoded 본문(content-type 헤더를으로 설정해야 합니다. application/x-www-form-urlencoded)
    <script src=“https://gist.github.com/dylandepass/b72b2e30313bc80beb02e12b1d7201ff.js”></script>

됐습니다. 양식 서비스는 매분마다 실행되므로 시트에 수집된 데이터를 빠르게 볼 수 있습니다.

작성자가 만든 Forms

대부분의 경우 작성자가 양식을 만들고 웹 사이트의 방문자에게 표시할 양식 필드를 결정하게 하는 것이 좋습니다. 일반적으로 를 사용합니다. helix-default 작성자가 양식을 정의할 수 있는 위치로 양식 제출에 사용되는 동일한 스프레드시트의 시트

일반적으로 스프레드시트를 참조하고 양식을 렌더링하고 제출을 통해 사용자 흐름을 처리하는 양식 블록이 있습니다.

그러한 작업의 간단한 예 form 블록을 찾을 수 있음 여기 및 적응형 Forms 블록 을 사용할 수 있습니다 여기.

reCAPTCHA, 접근성, 파일 업로드, 필드 유효성 검사, 전자 서명, 성능 모니터링, 스프레드시트 기반 규칙, 기록 문서(DoR) 등의 기능이 있는 양식이 필요한 경우 🔗 적응형 Forms 블록. 기본 정보(예: 연락처 양식 또는 서비스 요청)를 수집하는 간단한 양식부터 여러 섹션, 규칙 및 Adobe Sign, Adobe Workfront 및 외부 시스템과의 통합이 포함된 복잡한 양식까지 다양한 양식을 지원합니다. 데이터를 스프레드시트로 보내거나 엔터프라이즈 수준 양식을 위한 외부 시스템에 연결하는 데도 사용할 수 있습니다. 자세한 내용은 다음을 참조하십시오. 🔗 AEM Forms Edge Delivery Services 설명서.

양식 정의를 위한 스프레드시트의 모양을 보여주는 다음 예를 참조하십시오.

지원되는 양식 필드는 확장 가능하며 form 시작점을 제공하는 예제로 봐야 합니다.

예를 들어, Google 문서에서 다음 블록을 추가하여 이전에 나열된 코드 베이스를 사용하여 완전한 기능의 양식이 이 페이지에 추가되었습니다.

자유롭게 시도해 보고 양식 데이터가 수신 시트. 양식 서비스에서 스프레드시트로 이동하는 데 몇 분이 걸릴 수 있습니다.

recommendation-more-help
10a6ce9d-c5c5-48d9-8ce1-9797d2f0f3ec