ウォークスルー
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
このウォークスルーでは、JSSアプリケーションでSitecoreフォームを使い、Sitecore Forms APIを活用したフォームの実装例をReactやNext.jsで紹介します。
!注JSSにはForms APIを消費するReactの例があります。他のフレームワークでフォームのスキーマデータを利用することは可能ですが、サンプルコンポーネントは提供されていません。
このウォークスルーは、JSSの基本に精通しており、ReactまたはNext.js JSSアプリをセットアップしてSitecoreにデプロイしていることを前提としています。
このウォークスルーでは、以下の方法を説明します:
- フォームはSitecoreで作成してください。
- JSSアプリケーション用のフォームレンダリングコンポーネントを作成します。
- フォームレンダリングをアプリルートに追加してください。
- フォームをJSSアプリケーションに実装してください。
Sitecoreでフォームを作成してください
JSSでフォームを使用するには、フォームをSitecoreで作成する必要があります。
フォームを作成するには:
-
Sitecoreの フォーム ダッシュボードで 「作成」をクリックします。
-
新しいフォームを一から作成するには、「 空白フォーム」をクリックし、フォームの基準となるテンプレートを選択してください。
-
フォームに「送信」ボタンを追加するには、「 フォーム要素 」の 「構造 」セクションで、送信 ボタンの要素をフォームキャンバスにドラッグしてください。
-
フォームデータを保存し、フォームが自動的にクリアされないようにするには、送信アクションをSave Dataに設定し、ページへリダイレクトしてください。
!注JSSアプリでは、アプリケーションを送信後に別のページにリダイレクトすることはクライアント側のルーティングで簡単に実現できます。ページの実際の再読み込みである必要はありません。
JSSアプリケーション用のフォームレンダリングコンポーネントを作成します
フォームをJSSアプリに追加するには、フォームをレンダリングするためのコンポーネントが必要です。フォームレンダリングコンポーネントは通常のJSSコンポーネントですが、フォームの切断モードはサポートされていないため、まずSitecoreで作成する必要があります。
フォームレンダリングコンポーネントを作成するには:
- JSS CLI: jss deploy component Form --allowedPlaceholders jss-mainを使ってコンポーネント定義をSitecore作成します。
- フォームを追加したいプレースホルダー名に許可されている場所を変更してください。
- 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アプリでフォームを実装するには、以下のいずれかの方法に従ってください。