EFFと協力する準備をしましょう

ウェブアプリケーションに埋め込み可能なフォームを追加する前に、SitecoreのインスタンスとウェブアプリケーションをEFFと連携させる準備をしなければなりません。

SitecoreのインスタンスおよびウェブアプリケーションをEFFと連携させる準備をするには:

1. Sitecore Headless Services 21.0.0のzipパッケージをインストールしてください。
2. APIキーを作成しましょう。
3. Sitecore Embeddable FormsをダウンロードしてZIPファイルSitecore解凍し、sitecore-embeddableforms.umd.jsファイルをウェブアプリケーションディレクトリにコピーします。
4. cssフォルダをウェブアプリケーションのルートディレクトリにコピーしてください。

ウェブページに埋め込み可能なフォームを追加してください

Sitecore Headless Servicesをインストールし、APIキーを作成し、必要なファイルを追加した後、ウェブページにSitecoreフォームを追加できます。

ウェブページにフォームを追加するには:

1. フォームを表示したいウェブページに、EFFスクリプトを参照するscriptタグを追加してください:

   パラメータ

   概要

   sc_apikey

   レイアウトサービスおよび提出エンドポイントへの認証のためのAPIキーです。

   sc_site

   任意です。レイアウトサービスと投稿エンドポイントをホストしているSitecoreウェブサイトのURLです。このパラメータを含めない場合、EFFはこのスクリプトがレイアウトサービスと投稿エンドポイントを含むSitecoreインスタンス上でホストされていると想定します。

2. Sitecoreフォーム項目を指定するためのscef-formタグを追加します:

   属性

   概要

   formId

   ページに追加したいSitecoreフォームアイテムのIDです。

以下は埋め込み可能なフォームを含むサンプルHTMLページです。

!注この手順は、フォームにカスタムフォーム要素が含まれている場合のみ適用されます。

Sitecoreフォームに カスタムフォーム要素が含まれている場合、そのカスタムフォーム要素をレンダリングするクラスを作成し、埋め込み可能なフォームを含むウェブページでそのクラスを参照する必要があります。

カスタムフォーム要素を埋め込み可能な形式で表示するには:

1. カスタムフォーム要素をレンダリングするクラスを作成します。

   以下の例では、カスタムフォーム要素は*/sitecore/system/Settings/Forms/Field Types/Basic*フォルダ内のSingle-Line textアイテムに基づいています。

   import { css, html } from 'https://unpkg.com/lit@^2?module'; import { ifDefined } from 'https://unpkg.com/lit@^2/directives/if-defined.js?module'; export class ScefCustomLineText { id = "YOUR-CUSTOM-FORM-ELEMENT-ITEM-ID-WITHOUT-BRACKETS"; render( field, themeElement, placeholderText, errorMessage ) { return html`

   ${field.title} Load Custom Label scef-customlinetext

   0 ? field.maxLength : undefined )} placeholder=${ifDefined(placeholderText)} data-sc-tracking=${field.isTrackingEnabled} data-sc-field-name=${field.name} data-sc-field-key=${field.fieldKey} ?disabled=${field.disabled} .value=${field.value} @input="${field.validate}" />

   ${errorMessage}

   \`; } }

2. 埋め込み可能なフォームが載っているウェブページに、クラスを指すscriptタグを追加してください。

   属性

   概要

   useOn

   EFFに対してスクリプトの処理方法を示します。 customfield が唯一の利用可能な値です。

   guid

   カスタムフォーム要素アイテムのID。

   ctor

   カスタムフォーム要素をレンダリングするクラスです。

   renderMode

   カスタムフォーム要素をレンダリングするメソッドです。

   src

   カスタムフォーム要素をレンダリングするクラスのURLです。

以下は、カスタムフォーム要素を備えた埋め込み可能なフォームを含むサンプルHTMLページです: