1. ReactのJSSフォーム

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

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

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

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

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

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

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

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

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

    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サーバーに直接送信されるようにする必要があります。

  3. JSSアプリを接続モードで起動します。

    jss start:connected

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

この記事を改善するための提案がある場合は、 お知らせください!