カスタム React ライブラリを使用したヘッドレスフォームのレンダリング

カスタムコンポーネントを作成および実装して、組織の要件やガイドラインに従ってヘッドレスアダプティブフォームの外観と機能（動作）をカスタマイズできます。

これらのコンポーネントの主な目的は、フォームフィールドの外観やスタイルを制御することと、それらのフィールドを通じて収集されたデータをフォームモデルインスタンス内に格納することです。わかりにくいと思われるかもしれませんが、心配はいりません。これらの目的については、後ほど詳しく説明します。ここでは、カスタムコンポーネントを作成し、それらのコンポーネントを使用してフォームをレンダリングし、イベントを利用してデータの格納と REST エンドポイントへの送信を行う、最初の手順に的を絞ります。

このチュートリアルでは、Google マテリアル UI コンポーネントを使用して、カスタム React コンポーネントを使用したヘッドレスアダプティブフォームのレンダリング方法を説明します。ただし、このライブラリに限定されず、任意の React コンポーネントライブラリを自由に利用したり、独自のカスタムコンポーネントを開発したりできます。

この記事の最後には、スターターキットを使用したヘッドレスフォームの作成と公開の記事で作成した​ お問い合わせ ​フォームは、次のように変わります。

Google マテリアル UI コンポーネントを使用してフォームをレンダリングする主な手順は、次のとおりです。

1. Google マテリアル UI をインストールする

デフォルトでは、スターターキットはアドビの Spectrum コンポーネントを使用しています。これを、Google マテリアル UI を使用するように設定します。

    npm install @mui/material @emotion/react @emotion/styled --force

Google マテリアル UI の npm ライブラリがインストールされ、スターターキットの依存関係にライブラリが追加されます。これで、マテリアル UI コンポーネントを使用して、フォームコンポーネントをレンダリングできるようになりました。

2. カスタム React コンポーネントを作成する

デフォルトのテキスト入力コンポーネントを Google マテリアル UI のテキストフィールドコンポーネントに置き換えるカスタムコンポーネントを作成します。

ヘッドレスフォーム定義で使用されるコンポーネントタイプ（fieldType または :type）ごとに別のコンポーネントが必要です。例えば、前のセクションで作成したお問い合わせフォームでは、Name、Email および Phone の各フィールドは text-input タイプ（fieldType: "text-input"）であり、Message フィールドは multiline-input タイプ（"fieldType": "multiline-input"）です。

fieldType: "text-input" プロパティを使用するすべてのフォームフィールドをマテリアル UI のテキストフィールドコンポーネントでオーバーレイするカスタムコンポーネントを作成しましょう。

そのカスタムコンポーネントを作成し、カスタムコンポーネントを fieldType プロパティにマッピングするには：

     import React from 'react';
     import {useRuleEngine} from '@aemforms/af-react-renderer';
     import {FieldJson, State} from '@aemforms/af-core';
     import { TextField } from '@mui/material';
     import Box from '@mui/material/Box';
     import { richTextString } from '@aemforms/af-react-components';
     import Typography from '@mui/material/Typography';


     const MaterialtextField = function (props: State<FieldJson>) {

         const [state, handlers] = useRuleEngine(props);

         return(

         <Box>
             <Typography component="legend">{state.visible ? richTextString(state?.label?.value): ""} </Typography>
             <TextField variant="filled"/>
         </Box>

         )
     }

     export default MaterialtextField;

state.visible の部分では、コンポーネントが表示されるように設定されているかどうかをチェックします。そのように設定されている場合は、フィールドのラベルが richTextString(state?.label?.value) を使用して取得され、表示されます。

カスタムコンポーネント materialtextfield の準備が整いました。fieldType: "text-input" のすべてのインスタンスを Google マテリアル UI のテキストフィールドに置き換えるように、このカスタムコンポーネントを設定しましょう。

3. カスタムコンポーネントをヘッドレスフォームフィールドにマッピングする

サードパーティのライブラリコンポーネントを使用してフォームフィールドをレンダリングするプロセスは、マッピングと呼ばれます。各 (fieldType) を、サードパーティライブラリの対応するコンポーネントにマッピングします。

マッピング関連情報はすべて mappings.ts ファイルに追加されます。mappings.ts ファイル内の ...mappings ステートメントでは、(fieldType または :type) を Adobe Spectrum コンポーネントでオーバーレイするデフォルトのマッピングを参照しています。

最後の手順で作成した materialtextfield コンポーネントのマッピングを追加するには：

次の手順

Google マテリアル UI を使用したカスタムコンポーネントでフォームをレンダリングすることに成功しました。「Submit」ボタン（対応する Google マテリアル UI コンポーネントにマッピングされている）をクリックして、フォームを送信してみましたか？ まだであれば、まず試してみてください。

フォームはデータを任意のデータソースに送信しますか？ そうでなくても、ご心配なく。それは、フォームがランタイムライブラリと通信するように設定されていないからです。

ランタイムライブラリと通信できるようにフォームを設定するには、どうすればよいでしょうか？ それをすべて詳しく説明する記事が近日公開予定です。どうぞお楽しみに。