チュートリアル: JSSアプリケーションでのSitecoreフォームの使用
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
このチュートリアルでは、JSSアプリケーションでSitecoreフォームを使用する方法を説明し、SitecoreフォームAPIを利用したフォームをReactとNext.jsに実装する例を挙げます。
JSSには、Forms APIを使用するReactの例が付属しています。フォームスキーマデータを他のフレームワークと一緒に使用することは可能ですが、サンプルコンポーネントは提供されていません。
このチュートリアルでは、JSSの基本を理解し、ReactアプリまたはNext.js JSSアプリを設定してSitecoreにデプロイしていることを前提としています。
このチュートリアルでは、次の方法について説明します。
-
Sitecoreでフォームを作成します。
-
JSSアプリケーション用のフォームレンダリングコンポーネントを作成します。
-
フォーム レンダリングをアプリ ルートに追加します。
-
JSSアプリケーションにフォームを実装します。
Sitecoreでフォームを作成する
JSSでフォームを使用するには、フォームをSitecoreで作成する必要があります。
フォームを作成するには:
-
SitecoreのFormsダッシュボードで、Createをクリックします。
-
新しいフォームを最初から作成するには、「 Blank form」をクリックするか、フォームの基になるテンプレートを選択します。
-
フォームに 送信 ボタンを追加するには、Form elementsペインのStructureセクションで、Submitボタン要素をフォーム キャンバスにドラッグします。
-
フォームデータを保存し、フォームが自動的にクリアされないようにするには、送信アクションをSave DataとRedirect to pageに設定します。
手記JSSアプリでは、送信後にアプリケーションを別のページにリダイレクトすることは、クライアント側のルーティングで簡単に実現でき、ページを実際に再読み込みする必要はありません。
JSSアプリケーション用のフォームレンダリングコンポーネントの作成
JSSアプリにフォームを追加するには、フォームをレンダリングするコンポーネントが必要です。フォーム レンダリング コンポーネントは通常のJSSコンポーネントですが、フォームでは切断モードがサポートされていないため、最初にSitecoreで作成する必要があります。
フォームレンダリングコンポーネントを作成するには:
-
JSS CLIを使用して、Sitecoreでコンポーネント定義を作成します。 jss deploy component Form --allowedPlaceholders jss-main。
-
許可されたプレースホルダーを、フォームの追加を許可するプレースホルダー名に変更します。
-
Sitecoreコンテンツ エディタで、作成されたレンダリング アイテム(/sitecore/layout/Renderings/Project/$yourappname/Form)に移動します
-
Datasource locationフィールドを /sitecore/formsに設定します。
-
Datasource templateフィールドを /sitecore/templates/System/Forms/Formに設定します。
-
Rendering Contents ResolverフィールドをSitecore Forms Resolverに設定します。これにより、JSSはアイテムデータではなくフォームデータをコンポーネントに配信します。
フォーム レンダリングをアプリ ルートに追加する
フォーム レンダリングをアプリ ルートに追加するには:
-
エクスペリエンス エディターで、フォームを追加するJSSルートアイテムに移動します。
-
新しいFormコンポーネントを、許可されているプレースホルダーに挿入します。
-
以前に作成したSitecoreフォームを関連コンテンツとして選択します。
手記コンポーネントに実装がないことを示す警告が表示されます。これは、フォームの外観をまだ定義していないためです。
JSSアプリケーションにフォームを実装します
JSSアプリケーションでのフォームの実装は、アプリケーションの作成に使用したフレームワークSDKによって異なります。
JSSアプリにフォームを実装するには、次のいずれかの方法に従います。