JSS ReactアプリでSitecoreフォームを実装してください

Sitecoreフォームを作成し、SitecoreのJSSアプリルートに追加した後、JSSフォームコンポーネントを実装してJSSアプリケーション内でSitecoreフォームをレンダリングできます。

JSSアプリでSitecoreフォームを使用するには、動作するセッションクッキーが必要です。この目的のために:

• 環境でSSLを有効にするか、Sitecoreインスタンスでセキュアクッキーを無効にしている必要があります。
• React JSSアプリは RESTレイアウトサービスを使う必要があります。
• サーバー側で JSS Reactアプリケーションをレンダリングしています。

React JSSアプリケーションでSitecoreフォームをレンダリングするには:

1. JSSアプリケーションのルートディレクトリで、次のコマンドを実行して必要なパッケージをインストールします:

   npm install @sitecore-jss/sitecore-jss-forms @sitecore-jss/sitecore-jss-react-forms

2. フォームをレンダリングするには、アプリケーションにSitecoreフォームスキーマのレンダリング方法を伝える必要があります。レンダリングアプリのsrcディレクトリのコンポーネントファイルで、例えばsrc/components/JssReactForm.tsx、フォームコンポーネントを実装します:

   import { Form } from '@sitecore-jss/sitecore-jss-react-forms'; import React from 'react'; import { withRouter } from 'react-router-dom'; import { sitecoreApiHost, sitecoreApiKey } from '../../temp/config';

   const JssReactForm = ({ fields, history }) => (

   history.push(url)} /> );

   export default withRouter(JssReactForm);

   !注headlessモードでは、リクエストを直接Sitecoreインスタンスに送るとエラーが発生します。 sitecoreApiHostを 空文字列に設定する必要があります。例えばsitecoreApiHost={''}、のようにリクエストは直接Node.jsサーバーに送られます。

3. JSSアプリを接続モードで起動してください:

   jss start

フォームデータがJSONとしてページにダンプされているのを見ることができます。