React アプリを使用したヘッドレスフォームの作成とプレビュー introduction

スターターキットは、React アプリの使用をすぐに開始するのに役立ちます。Angular、Vanilla JS およびその他の任意の開発環境で、ヘッドレスアダプティブフォームを自由に開発および使用できます。

ヘッドレスアダプティブフォームから始めると、作業を簡単かつ迅速に行えます。既製の React プロジェクトのクローンを作成し、依存関係をインストールして、プロジェクトを実行します。 ヘッドレスアダプティブフォームが React アプリに統合され稼働状態になっています。サンプルの React プロジェクトを使用して、ヘッドレスアダプティブフォームを作成し、実稼動環境にデプロイする前にテストすることができます。

では、開始しましょう。

事前準備 pre-requisites

React アプリを作成して実行するには、コンピューターに次のものがインストールされている必要があります。

はじめに

要件を満たしたら、次の手順を実行して作業を開始します。

1. ヘッドレスアダプティブフォームのスターターキットをセットアップする install

スターターキットは、サンプルのヘッドレスアダプティブフォームとそれに対応するライブラリを備えた React アプリです。このキットを使用して、ヘッドレスアダプティブフォームとそれに対応する React コンポーネントを開発しテストします。ヘッドレスアダプティブフォームのスターターキットをセットアップするには、次のコマンドを実行します。

2. ヘッドレスアダプティブフォームをプレビューする preview

スターターキットをセットアップした後、サンプルのヘッドレスアダプティブフォームをプレビューしてから、独自のカスタムフォームに置き換えることができます。また、AEM Forms サーバーからフォームを取得するように、スターターキットを設定することもできます。フォームをプレビューするには、次の手順に従います。

3. 独自のヘッドレスアダプティブフォームを作成しレンダリングする custom

ヘッドレスアダプティブフォームは、フォームとそのコンポーネント（フィールドやボタンなど）を、JSON（JavaScript Object Notation）形式で表します。JSON 形式を使用する利点は、様々なプログラミング言語で簡単に解析および使用できるので、システム間でフォームデータを交換する際に便利であることです。アプリに付属しているサンプルのヘッドレスアダプティブフォームを表示するには、/react-starter-kit-aem-headless-forms/form-definations/form-model.json ファイルを開きます。

「Name」、「Email」、「Contact Number」、「Message」の 4 つのフィールドを持つ、お問い合わせフォームを作成しましょう。これらのフィールドは JSON 内でオブジェクト（項目）として定義され、各オブジェクト（項目）には type、label、name、required などのプロパティがあります。フォームには、name が「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"
    }
  }
}

フォームをレンダリングするには、サンプルのヘッドレスアダプティブフォーム JSON コード /react-starter-kit-aem-headless-forms/form-definations/form-model.json を、上記の JSON コードに置き換え、ファイルを保存し、スターターキットがコンパイルしてフォームを更新するまで待ちます

これで、ヘッドレスアダプティブフォームが正常にレンダリングされました。

ボーナス

フォームをホストする web ページのタイトルを Contact Us | WKND Adventures and Travel に設定しましょう。タイトルを変更するには、react-starter-kit-aem-headless-forms/public/index.html ファイルを開いて編集し、タイトルを設定します。

次の手順

デフォルトでは、スターターキットはアドビの Spectrum コンポーネントを使用して、フォームをレンダリングします。独自のコンポーネントを作成して使用することも、サードパーティのコンポーネントを使用することもできます。例えば、Google マテリアル UI や Chakra UI を使用できます。

Google マテリアル UI を使用して、お問い合わせフォームをレンダリングしてみましょう。