カスタムコンポーネントを使用したヘッドレスフォームのレンダリング developing-for-headless-forms-using-your-own-components

ヘッドレスアダプティブ Formsでは、カスタムコンポーネントを作成および実装して、フォームのアピアランスと機能を定義できます。 デフォルトのコンポーネントは標準的な動作を提供しますが、場合によっては、特定の UI 要素やインタラクション（カスタムの「通知」コンポーネントや専用の「手書き署名」フィールドなど）が必要になることがあります。

この記事では、カスタム React コンポーネントを作成し、ヘッドレスアダプティブフォームにマッピングする手順について説明します。

​1. カスタム React コンポーネントの作成

まず、フォームフィールドをレンダリングする React コンポーネントを作成します。 このコンポーネントは任意の React ライブラリ（マテリアル UI、Ant デザイン、独自のカスタムスタイルなど）を使用できます。

例えば、特定のスタイル設定を持つ読み取り専用メッセージをレンダリングするカスタム アナウンス コンポーネントを作成してみましょう。

import React from 'react';
import { useRuleEngine } from '@aemforms/af-react-renderer';
import { FieldJson, State } from '@aemforms/af-core';

const Announcement = function (props: State<FieldJson>) {
    // The useRuleEngine hook connects the component to the form logic
    const [state, handlers] = useRuleEngine(props);

    if (!state.visible) {
        return null;
    }

    return (
        <div className="custom-announcement" style={{ border: '1px solid #ccc', padding: '10px', backgroundColor: '#f9f9f9' }}>
            <h3>{state?.label?.value}</h3>
            <p>{state?.default}</p>
        </div>
    );
}

export default Announcement;

​2. カスタムコンポーネントのマッピング

カスタムコンポーネントを使用するには、mappings.ts ファイルにマッピングする必要があります。 ヘッドレス Forms ランタイムは、このマッピングを使用して、フォーム JSON の各フィールドに対してレンダリングする React コンポーネントを決定します。

コンポーネントをマッピングする主な方法には、フィールドタイプ または リソースタイプ の 2 つがあります。

フィールドタイプ別マッピング

標準マッピングは、フォーム JSON の fieldType プロパティ（text-input、checkbox、button など）に基づいています。 これは、標準コンポーネントの すべて のインスタンスをカスタムバージョンで置き換える場合に便利です。

import { mappings } from "@aemforms/af-react-components";
import Announcement from "../components/Announcement";

const customMappings: any = {
  ...mappings,
  "text-input": Announcement // This would replace ALL text-input fields (use with caution)
};

export default customMappings;

リソースタイプ別のマッピング（カスタムコンポーネント）

AEMでカスタムコンポーネント（標準テキストコンポーネントを拡張する「アナウンス」コンポーネントなど）を作成し、その特定のコンポーネントを React アプリで異なる方法で のみ レンダリングする場合は、その リソースタイプ または一意の ID でマッピングする必要があります。

このアプローチを使用すると、標準のテキストコンポーネントを通常どおりにレンダリングしながら、カスタムの「アナウンス」コンポーネントで専用の React 実装を使用できます。

import { mappings } from "@aemforms/af-react-components";
import Announcement from "../components/Announcement";

const customMappings: any = {
  ...mappings,
  // Map by resource type or custom identifier
  "my-project/components/announcement": Announcement
};

export default customMappings;

メモ： AEM フォームモデルで、mappings.ts で使用するキーに一致する正しい :type または ID を書き出していることを確認してください。

​3. マッピングの適用

最後に、ヘッドレスフォームインスタンスでこれらのカスタムマッピングが使用されていることを確認します。

import React from 'react';
import { AdaptiveForm } from '@aemforms/af-react-renderer';
import customMappings from './utils/mappings';
import formJSON from './form-def.json';

function App() {
  return (
    <AdaptiveForm
      formJson={formJSON}
      mappings={customMappings}
    />
  );
}

export default App;

これらの手順に従うと、特定の設計および機能要件に合致するコンポーネントでヘッドレスアダプティブFormsの機能を拡張できます。