SitecoreフォームをJSS Reactアプリに実装する

Version: 22.x

日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

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

JSSアプリでSitecoreフォームを使用するには、セッションCookieが機能している必要があります。この目的のために、次のことを行います。

お使いの環境でSSLが有効になっているか、Sitecoreインスタンスで安全なCookieを無効にする必要があります。
React JSSアプリでは、REST Layout Serviceを使用する必要があります。
JSS Reactアプリケーションをサーバー側でレンダリングしています。

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

JSSアプリケーションのルートディレクトリで、次のコマンドを実行して必要なパッケージをインストールします。
RequestResponse
```
npm install @sitecore-jss/sitecore-jss-forms @sitecore-jss/sitecore-jss-react-forms
```
フォームをレンダリングするには、Sitecore Formsスキーマのレンダリング方法をアプリケーションに指示する必要があります。レンダリングアプリのsrcディレクトリにあるコンポーネントファイル( src/components/JssReactForm.tsxなど)に、フォームコンポーネントを実装します。
RequestResponse
```
import { Form } from '@sitecore-jss/sitecore-jss-react-forms';
import React from 'react';
import { useNavigate } from 'react-router-dom';
import { sitecoreApiHost, sitecoreApiKey } from '../../temp/config';

const JssReactForm = ({ fields }) => {

  const navigate = useNavigate();

  return (
    <Form
      form={fields}
      sitecoreApiHost={sitecoreApiHost}
      sitecoreApiKey={sitecoreApiKey}
      onRedirect={(url) => navigate(url)}
    />
  );

};

export default JssReactForm;
```
メモ

headlessモードでは、リクエストをSitecoreインスタンスに直接送信するとエラーが発生します。sitecoreApiHostをempty string(sitecoreApiHost={''}など) に設定して、リクエストがNode.jsサーバーに直接送信されるようにする必要があります。
JSSアプリを接続モードで起動します。
RequestResponse
```
jss start:connected
```

ページにダンプされたフォームデータはJSONとして表示されます。

何かフィードバックはありますか?

この記事を改善するための提案がある場合は、