AEM Forms as a Cloud Service 上でコアコンポーネントとヘッドレスアダプティブフォームを使用して魅力的なフォームを作成する方法 build-engaging-forms-using-core-components-and-headless

ブラウザーを開き、Cloud Service オーサー環境の URL を入力します。

Cloud Service オーサー環境にログインします。
{width="50%"}

AEM Forms UI に移動するには、Forms／フォームとドキュメント ​をクリックします。

{width="50%"}

環境設定や情報に関連するポップアップを解除します。使用可能なすべてのフォームが表示されます。

フォームの送信エンドポイントを作成します。

1. 新しいブラウザータブで、https://pipedream.com/requestbin を開きます。

2. 公開 bin を作成 をクリックし、エンドポイント URL をコピーします。
   {width="50%"}

   {width="50%"}

ウィザードインターフェイスを使用してアダプティブフォームを作成します。

1. レッスン 1 で使用したブラウザータブで、AEM Forms as a Cloud Service web インターフェイスに移動し、フォーム＆ドキュメントに移動します。
   

2. 作成／アダプティブフォーム をクリックします。
   

3. 選択画面から、コアコンポーネントを使用した空白 テンプレートを選択します（下図を参照）。
   

4. 「スタイル」タブをクリックし、「wknd-theme」テーマを選択します（下図を参照）。
   

5. 「送信」タブをクリックし、「REST エンドポイントに送信」カードを選択し、「POST リクエストの URL」フィールドで公開 bin を指定します（下図を参照）。
   

6. 「作成」をクリックします。フォームの名前とタイトルを指定します。例えば、登録 ​などです。「作成」をクリックします。

7. アダプティブフォームエディターが開きます。ポップアップまたはダイアログを閉じて、環境設定や情報を表示します。左側のパネルにあるコンポーネントブラウザーをクリックし、ヘッダー ​コンポーネントと​ フッター コンポーネントをそれぞれ空白のフォームの上部と下部に追加します。
   

8. コンポーネントブラウザーからコンポーネントをドラッグ＆ドロップして、次のようなフォームを作成します。

   {width="50%"}

フォームに検証機能を追加します。

1. 電話番号 ​コンポーネントをクリックして、ポップアップメニューを表示します。レンチアイコン ​をクリックして、フィールドを設定します。

2. 「検証」タブ ​を開き、フィールドに​ 必須 ​とマークを付け、「完了」をクリックします。成功メッセージが表示されます。
   {width="50%"}

   {width="50%"}

フォームをプレビューして送信します.

1. 「プレビュー」をクリックして、エンドユーザーの観点からフォームをプレビューします。

2. ダミーデータでフォームに入力します。

3. フォームを送信します。
   

4. 「リクエスト bin」タブで、送信されたデータを確認します。
   

ルールを使用してフォームにインタラクティブ機能を追加します。

1. 「チェックボックスをオンにして 5％オフを受け取る」コンポーネントをクリックします。オプションツールバーで、ルールアイコンをクリックします。「ルールエディター」オプションが開きます。

2. ルールを作成します。「チェックボックスをオンにして 5％オフを受け取ります」オプションが選択されている場合、クレジットカードを適用するオプションは無効になります。

フォームを公開します。

1. AEM Forms 管理インターフェイス（例：https://author-p105303-e986623.adobeaemcloud.com/ui%23/aem/aem/forms.html/content/dam/formsanddocuments）を開き、フォームを選択します。

2. 「公開する」をクリックします。

   

   成功メッセージが表示されます。

   

   フォームの公開 URL は、次のようになります。https://publish-p105303-e986623.adobeaemcloud.com/content/forms/af/registration.html

3. 公開されたフォームを表示するには、上記の URL のプログラム ID（pXXXXXX）と環境 ID（eXXXXXX）を、お使いの環境の ID に置き換えます。

管理者権限でコマンドプロンプトまたはシェルを開きます。

{width="50%"}

コマンドプロンプトで、次のコマンドを使用して c:\git フォルダーに移動します。

cd c:\git

次のコマンドを使用して、テーマのフロントエンドコードを複製します。

git clone -b WKND https://github.com/adobe/aem-forms-theme-canvas

次のコマンドをリストに表示された順序で使用して、aem-forms-theme-canvas ディレクトリに移動し、Visual Studio Code を開きます。

cd aem-forms-theme-canvas
code .

「親フォルダー内のすべてのファイルの作成者を信頼する」を選択し、「はい、私は作成者を信頼します」をクリックします。

{width="50%"}

クラウドサービスのパブリッシュ環境でホストされているフォームをレンダリングするには、env_template ファイルの名前を変更します。ファイル名を変更するには、env_template ファイルを右クリックして、「名前を変更」オプションを選択します。

{width="50%"}

{width="50%"}

.env ファイルの変数に次の値を設定して、ファイルを保存します。

• AEM_URL：クラウドサービスのパブリッシュ環境を指定します。例：https://publish-p105303-e986623.adobeaemcloud.com/

• AEM_ADAPTIVE_FORM：フォームのパスを指定します。例えば、フォームのパスが /content/forms/af/registration の場合、この変数の値は registration になります。

  {width="50%"}

AEM 環境でローカルユーザーを作成します。

コマンドプロンプトウィンドウで、次のコマンドを実行します。

npm install

次のコマンドを実行して、フォームをプレビューします。

npm run live

上記のコマンドを実行したら、 webpack compiled メッセージが表示され、AEM ログインページにリダイレクトされます。

AEM ログインページで「ローカルでログイン（管理者タスクのみ）」をクリックします。

作成したローカルユーザーの資格情報を入力すると、フォームがブラウザーのタブに表示されます。

{width="50%"}

Visual Studio Code で、PROJECT\src\site\_variables.scss ファイルを開きます。$error のカラーは赤の網掛けです。

{width="50%"}

ブラウザーでフォームを送信して、「名前（名）」フィールドが赤くなるのを確認します。

$error の色を #5736eb に設定して、ファイルを保存します。

{width="50%"}

ブラウザーを更新し、フォームを送信します。名フィールドのエラーカラーが、それに応じて変更されました。

コマンドプロンプトで、Ctrl + C キーを押して、Y キーを押し、Enter キー を押して npm プロセスを終了します。次の一連の演習と競合しないように、npm サーバーを停止することが重要です。

Visual Studio Code とコマンドプロンプトウィンドウを閉じます。

管理者権限でコマンドプロンプトを開きます。

{width="50%"}

コマンドプロンプトで、次のコマンドを使用して c:\git フォルダーに移動します。

cd c:\git

次のコマンドを使用して、アダプティブフォームの React スタータープロジェクトを複製します。

git clone https://github.com/adobe/react-starter-kit-aem-headless-forms

次のコマンドをリストに表示された順序で使用して、react-starter-kit-aem-headless-forms ディレクトリに移動し、Visual Studio Code を開きます。

cd react-starter-kit-aem-headless-forms

code .

Visual Studio Code ウィンドウが開きます。

{width="50%"}

env_template ファイルを.env ファイルに名前変更します。名前を変更するには、env_template ファイルを右クリックし、「名前を変更」オプションを選択します。

{width="50%"}

.env ファイル内の変数に次の値を設定します。変数を更新したら、ファイルを保存します。

• AEM_URL：クラウドサービスパブリッシュ環境の URL を指定します。例：https://publish-p105303-e986623.adobeaemcloud.com

• AEM_FORM_PATH：前のレッスンで作成したアダプティブフォームのパスを指定します。例：/content/forms/af/registration/

  

コマンドウィンドウを開き、react-starter-kit-aem-headless-forms ディレクトリにいることを確認し、次のコマンドを実行します。

npm install

コマンドプロンプトウィンドウで、次のコマンドを実行します。

npm start

上記のコマンドは、React スペクトルフロントエンドライブラリを使用して AEM から取得したフォーム定義をヘッドレス方式でレンダリングするローカル開発サーバーを起動します。

「チェックボックスをオンにして 5％オフを受け取る」オプションを選択します。クレジットカードを適用する後続のオプションは無効になります。

「チェックボックスをオンにして 5％オフを受け取る」のチェックを解除して、クレジットカードオプションを有効にします。

ブラウザーで AEM Forms 管理インターフェイスを開きます。

contactus フォームを選択し、「編集」をクリックします。アダプティブフォームエディターでフォームが開きます。

「電話番号」フィールドを選択し、ツールバーの​ 編集アイコン（鉛筆アイコン） ​をクリックします。ポップアップツールバーが表示されない場合は、編集モードに切り替えます。 右上の「編集」ボタンをクリックし、左にある「プレビュー」ボタンをクリックします。

ラベルを「携帯電話番号」に変更します。フォーム内の空のスペースをクリックすると、フォームに加えた変更が保存されます。

「AEM Forms 管理インターフェイス」タブで、登録フォームを選択し、「非公開」をクリックします。「非公開」ボタンが表示されない場合、手順 3 に進んで変更を直接公開します。

「非公開」をクリックします。次のダイアログで「閉じる」をクリックします。

ブラウザーが更新されたら、登録フォームを選択し、「公開」をクリックします。

「公開する」をクリックします。次のダイアログで「閉じる」をクリックします。

ヘッドレスフォームが表示された状態で、ブラウザータブを更新します。「電話番号」のラベルが「携帯電話番号」に変更されていることに注意してください。

react-starter-kit-aem-headless-forms プロジェクトの起動に使用するコマンドプロンプトウィンドウを開き、CTRL + C キーを押し、
「Y」を入力して、Enter キーを押して npm プロセスを終了します。次の一連の演習と競合しないように、npm サーバーを停止することが重要です。

Visual Studio Code とコマンドプロンプトウィンドウを閉じます。

管理者権限でコマンドプロンプトを開きます。

{width="50%"}

コマンドプロンプトで、次のコマンドを使用して c:\git フォルダーに移動します。

cd c:\git

次のコマンドをリストに表示された順序で実行して、mui という名前のフォルダーを作成し、次のコマンドを使用して mui フォルダーに移動します。

mkdir mui

cd mui

次のコマンドを使用して、アダプティブフォームの React スタータープロジェクトを複製します。

git clone -b mui-lab https://github.com/adobe/react-starter-kit-aem-headless-forms

次のコマンドをリストに表示された順序で使用して、react-starter-kit-aem-headless-forms フォルダーに移動し、Visual Studio Code でコードを開きます。

cd react-starter-kit-aem-headless-forms

code .

env_template ファイルを .env ファイルに名前変更します。名前を変更するには、env_template ファイルを右クリックし、「名前を変更」を選択します。

{width="50%"}

.env ファイル内の変数に次の値を設定します。変数を更新したら、ファイルを保存します。Ctrl + S キーを使用してファイルを保存します。

• AEM_URL：クラウドサービスパブリッシュ環境の URL を指定します。例：https://publish-p105303-e986623.adobeaemcloud.com

• AEM_FORM_PATH：前のレッスンで作成したアダプティブフォームのパスを指定します。例：/content/forms/af/registration/

  

コマンドウィンドウを開き、react-starter-kit-aem-headless-forms ディレクトリにいることを確認し、次のコマンドを実行します。

npm install

コマンドプロンプトウィンドウで、次のコマンドを実行します。

npm start

このコマンドは、ローカル開発サーバーを起動し、Google Material UI フロントエンドライブラリを使用して、AEM から取得したフォーム定義をヘッドレスにレンダリングします。

このフォームレンディションで同じビジネスロジックの実行を評価するには：

「チェックボックスをオンにして 5%オフを受け取る」を選択します。後続のオプション「We.Finance のコーポレートクレジットカードフォームを申し込みますか？」が無効になります。

{width="50%"}

Visual Code で、src/components/textinput/index.tsx にある index.tsx ファイルを開いて、テキスト入力コンポーネントに移動します。

コード 103 行目の先頭に // を追加します。行がコメントに変換されます。

//const Cmp = \'outlined\' === appliedCssClassNames ? OutlinedInput: Input;

別のバリアントのコンポーネントを使用するために、104 行目に次のコードを追加して、ファイルを保存します。Ctrl + S キーを使用してファイルを保存します。

const Cmp = OutlinedInput;

「OutlinedInput」バリアントは正しく大文字と小文字を使用する必要があります。さもないと、コンパイルが失敗します。ローカル開発環境のコンパイルは、コマンドプロンプトで自動的に開始されます。次のメッセージが表示されるまで待ちます

webpack 5.75.0 compiled with 3 warnings in 6659 ms
inside proxy req
setting new origin header

自動的に更新されない場合は、ブラウザーを更新し、テキスト入力コンポーネントが別のバリアントを使用していることを確認します。

この変更は、エンドユーザーに対して AEM Forms Server のフォーム定義に変更を加えずに行われ、検討中のヘッドレスチャネルに固有のものです。
例えば、このラボの web チャネルです。

{width="50%"}

Visual Studio Code とコマンドプロンプトウィンドウを閉じます。