1. ReactのJSSフォーム

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

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

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

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

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

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

  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 { withRouter } from 'react-router-dom';
import { sitecoreApiHost, sitecoreApiKey } from '../../temp/config';

const JssReactForm = ({ fields, history }) => (
  <Form
    form={fields}
    sitecoreApiHost={sitecoreApiHost}
    sitecoreApiKey={sitecoreApiKey}
    onRedirect={(url) => history.push(url)}
  />
);

export default withRouter(JssReactForm);
    メモ

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

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

    jss start:connected

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

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