React 앱을 사용하여 Headless 양식 만들기 및 미리 보기 introduction

시작 키트는 React 앱을 사용하여 빠르게 시작할 수 있도록 도와줍니다. angular, Vanilla JS 및 선택한 기타 개발 환경에서 Headless 적응형 양식을 자유롭게 개발하고 사용할 수 있습니다.

Headless 적응형 양식으로 시작하는 것은 매우 쉽고 빠릅니다. 준비된 React 프로젝트를 복제하고 종속성을 설치한 다음 프로젝트를 실행합니다. React 앱 실행 및 실행에 Headless 적응형 양식이 통합되었습니다. 샘플 React 프로젝트를 사용하여 Headless 적응형 양식을 프로덕션 환경에 배포하기 전에 빌드하고 테스트할 수 있습니다.

시작하기

시작하기 전 pre-requisites

React 앱을 만들고 실행하려면 컴퓨터에 다음 항목이 설치되어 있어야 합니다.

시작하기

요구 사항을 충족하면 다음 단계를 수행하여 시작하십시오.

1. Headless 적응형 양식 시작 키트 설정 install

스타터 키트는 샘플 Headless 적응형 양식 및 해당 라이브러리가 있는 React 앱입니다. 이 키트를 사용하여 Headless 적응형 양식 및 관련 React 구성 요소를 개발하고 테스트하십시오. 다음 명령을 실행하여 Headless 적응형 양식 시작 키트를 설정합니다.

2. Headless 적응형 양식 미리 보기 preview

시작 키트를 설정한 후 샘플 Headless 적응형 양식을 미리 보고 사용자 정의 양식으로 바꿀 수 있습니다. AEM Forms 서버에서 양식을 검색하도록 시작 키트를 구성할 수도 있습니다. 양식 미리 보기

3. Headless 적응형 양식 만들기 및 렌더링 custom

Headless 적응형 양식은 양식과 해당 구성 요소(예: 필드 및 버튼)를 JSON(JavaScript 개체 표기법) 형식으로 나타냅니다. JSON 포맷을 사용하면 다양한 프로그래밍 언어에서 쉽게 구문 분석하여 사용할 수 있어 시스템 간에 양식 데이터를 편리하게 교환할 수 있는 장점이 있습니다. 앱에 포함된 샘플 Headless 적응형 양식을 보려면 /react-starter-kit-aem-headless-forms/form-definations/form-model.json 파일을 여십시오.

"이름", "이메일", "연락처 번호" 및 "메시지" 네 개의 필드가 있는 연락처 양식을 만들어 보겠습니다. 필드는 JSON 내의 오브젝트(항목)로 정의되며, 각 오브젝트(항목)에는 유형, 레이블, 이름 및 필수 속성과 같은 속성이 있습니다. 양식에는 "submit" 유형의 단추도 있습니다. 다음은 양식에 대한 JSON입니다.

{
  "afModelDefinition": {
    "adaptiveform": "0.10.0",
    "items": [
      {
        "fieldType": "text-input",
        "label": {
          "value": "Name"
        },
        "name": "name"
      },
      {
        "fieldType": "text-input",
        "format": "email",
        "label": {
          "value": "Email"
        },
        "name": "email"
      },
      {
        "fieldType": "text-input",
        "format": "phone",
        "pattern": "[0-9]{10}",
        "label": {
          "value": "Contact Number"
        },
        "name": "Phone"
      },
      {
        "fieldType": "multiline-input",
        "label": {
          "value":"Message"
        },
        "name": "message"
      },
      {
        "fieldType": "button",
        "label":{
          "value": "Submit"
        },
        "name":"submit",
        "events":{
          "click": "submitForm()"
        }
      }
    ],
    "action": "https://eozrmb1rwsmofct.m.pipedream.net",
    "description": "Contact Us",
    "title": "Contact Us",
    "metadata": {
      "grammar": "json-formula-1.0.0",
      "version": "1.0.0"
    }
  }
}

양식을 렌더링하려면 샘플 Headless 적응형 양식 JSON /react-starter-kit-aem-headless-forms/form-definations/form-model.json을(를) 위의 JSON으로 바꾸고 파일을 저장한 다음 스타터 키트가 컴파일될 때까지 기다렸다가 양식을 새로 고치십시오.

Headless 적응형 양식을 성공적으로 렌더링했습니다.

보너스

양식을 호스팅하는 웹 페이지의 제목을 Contact Us | WKND Adventures and Travel(으)로 설정해 보겠습니다. 제목을 변경하려면 편집할 react-starter-kit-aem-headless-forms/public/index.html 파일을 열고 제목을 설정합니다.

다음 단계

기본적으로 시작 키트는 Adobe의 Spectrum 구성 요소를 사용하여 양식을 렌더링합니다. 를 사용하여 나만의 구성 요소나 서드파티 구성 요소를 만들어 사용할 수 있습니다. 예를 들어 Google Material UI 또는 Chakra UI를 사용합니다.

Google 재질 UI를 사용하여 연락처 양식을 렌더링해 보겠습니다.