チュートリアル: 連絡先の詳細を更新するカスタム送信アクションの作成
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
送信ボタンは、ナビゲーション(「前へ」ボタンと「次へ」ボタン)に使用したり、フォームを送信したり、送信アクションをトリガーしたりするために使用できます。ナビゲーションに使用するか、フォームを送信するために使用するかに関係なく、すべての送信ボタンに送信アクションを追加できます。たとえば、送信アクションの「次のボタンにデータを保存する」を追加すると、連絡先が「次へ」をクリックしてフォームの次のページに移動したときに、データがFormsデータベース に保存されるようになります。
デフォルトでは、トリガーゴール、トリガーキャンペーンアクティビティ、トリガー結果、ページにリダイレクト、およびデータの保存送信アイテムを追加できます。このチュートリアルでは、連絡先の詳細の更新に使用するフォーム フィールドを選択できるカスタム送信アクションを作成する方法について説明します。

このチュートリアルでは、カスタム送信アクションを作成する一例について説明します。あなたの経験や好みによっては、物事を違った方法で行うことを好むかもしれません。
submitアクション クラスを作成する
submitアクション クラスを作成する
フォーム(ページ)を送信するには、コンタクトが「送信」ボタンをクリックする必要があります。ユーザーが 送信 をクリックしたときに実行するさまざまな種類のアクションを追加できます。たとえば、「データの保存」送信アクションでは、データがデータベースに保存され、「キャンペーン活動のトリガー」送信アクションでは、事前設定されたキャンペーン活動が選択されます。
このチュートリアルでは、連絡先の更新 送信アクションを作成します。
submitアクションは、アクションに渡されるJSONオブジェクトのパラメーターを格納します。JSONオブジェクトは、TParametersDataクラスで指定された型のインスタンス (この場合はUpdateContactDataクラス) に解析されます。したがって、この例では、UpdateContactDataパラメーターを使用してSubmitActionBase<TParametersData> から継承する派生クラスUpdateContactを作成します。
submitアクションクラスを作成するには:
-
UpdateContactDataクラスを作成します。
-
UpdateContactクラスを作成します。
-
DLLをビルドしてSitecoreインスタンスの <root>/binディレクトリにコピーします。
SPEAKエディター コントロールを作成する
SPEAKエディター コントロールを作成する
次の手順では、フォーム フィールドを連絡先の詳細フィールドにマッピングできるUIを作成します。Sitecore Formsの場合、送信アクション エディターはcoreデータベースにあります。
/sitecore/client/Applications/FormsBuilder/Components/Layouts/Actions
この例では、Sitecore Rocks Visual Studioプラグインが必要です。このプラグインは、Visual Studio 2019以前と互換性があります。
コントロールを作成するには:
-
コア・データベースで、/sitecore/client/Applications/FormsBuilder/Components/Layouts/Actions
-
Actionsを右クリックし、Addをクリックして、New Itemをクリックします。
-
/sitecore/client/Speak/Templates/Pages/Speak-BasePageテンプレートを選択し、新しい品目の名前を入力してください フィールドに「UpdateContact」と入力してOKをクリックします。
-
BrowserTitleと __Display nameをUpdate contactに設定します。
-
作成したUpdateContactアイテムを右クリックしてTasksをクリックし、Design Layoutをクリックします。
-
Layoutダイアログボックスで、/sitecore/client/Speak/Layouts/Layoutsに移動してSpeak-FlexLayoutレイアウトを選択し、OKをクリックします。
-
左上隅のAdd Renderingをクリックし、Select Renderingsダイアログ ボックスでAllをクリックしてPageCode (/sitecore/client/Speak/Layouts/Renderings/Common/PageCode) を検索します。

-
PageCodeを選択し、OKをクリックします。
-
PageCodeプロパティで、PageCodeScriptFileNameプロパティを、ページ コード スクリプトを含むJavaScriptパスに設定します。 /sitecore/shell/client/Applications/FormsBuilder/Layouts/Actions/UpdateContact.js

-
SpeakCoreVersion プロパティをSpeak 2-xに設定します。
-
Textビュー レンダリング(/sitecore/client/Business Component Library/version 2/Layouts/Renderings/Common/Text)を検索して選択し、Addをクリックして、各レンダリング プロパティのIdフィールドにHeaderTitle, HeaderSubtitle, and ValueNotInListTextアイテムを追加します。
-
3つの項目について、Propertiesセクションで、次のIDプロパティを設定します。
-
IsVisible – False
-
PlaceholderKey – Page.Body
手記これらのアイテムは、アクション エディターのダイアログ タイトル、サブタイトル、および見つからない値を設定するテキストとして使用されます。ここでtextプロパティを入力すると、テキストはすべての言語で表示されますが、ローカライズはできません。
-
-
次のレンダリングを追加します。
-
MainBorderタイプBorder (/sitecore/client/Business Component Library/version 2/Layouts/Renderings/Containers/Border)の
-
MapContactFormタイプForm (/sitecore/client/Business Component Library/version 2/Layouts/Renderings/Forms/Form)のFieldsLayoutプロパティを1-1-1-1に設定し、PlaceholderKeyプロパティをMainBorder.Contentに設定します。
レンダリングリストは次のようになります。

-
エディターのパラメーターを含むフォルダーを追加します
エディターのパラメーターを含むフォルダーを追加します
次に、エディタのパラメータを含むフォルダを追加する必要があります。 PageSettingsフォルダを追加するには:
-
コア・データベースで /sitecore/client/Applications/FormsBuilder/Components/Layouts/Actionsに移動し、前に作成したUpdateContactアイテムを右クリックしてAddをクリックし、New itemをクリックします。
-
PageSettingsテンプレート(/sitecore/client/Speak/Templates/Pages/PageSettings)を検索して選択し、名前PageSettingsを入力してOKをクリックします。
-
作成したPageSettingsアイテムを右クリックし、Add、New Itemの順にクリックします。
-
/sitecore/client/Business Component Library/version 2/Layouts/Renderings/Common/Text/Text Parametersテンプレートを選択し、Addを3回クリックして、前に作成したレイアウトのIDとまったく同じ名前をアイテムに付けます。
-
HeaderTitle – ダブルクリックし、Textフィールドに「 Map form fields to contact details」と入力します。
-
HeaderSubtitle – ダブルクリックし、Textフィールドに次のように入力します。 Map the fields in the form to the contact details that you want to update.
-
ValueNotInListText – ダブルクリックし、Textフィールドに次のように入力します。 value not in selection list.
-
-
/sitecore/client/Applications/FormsBuilder/Components/Layouts/Actions/UpdateContactに移動し、作成したPageSettings項目を右クリックします。
-
「 New Folder 」をクリックし、「 MapContactForm」という名前を付けます。
-
MapContactFormフォルダーをクリックし、次のフィールド値を持つ3つのFormDropListパラメーター テンプレート (/sitecore/client/Business Component Library/version 2/Layouts/Renderings/Forms/Form/Templates/FormDropList Parameters) を追加します。
FormDropListパラメーター
値フィールド名
DisplayFieldName (ディスプレイフィールド名)
フォームラベル
バインディング構成
FirstName
itemId
name
First name
firstNameFieldId/SelectedValue
LastName
itemId
name
Last name
lastNameFieldId/SelectedValue
Email
itemId
name
Email
emailFieldId/SelectedValue
-
UpdateContactアイテムを右クリックし、タスク > デザイン レイアウト をクリックして、UpdateContactレイアウトに移動します。フォーム レンダリングのConfigurationItemプロパティを、FormDropListパラメーターを含むMapContactFormフォルダーのIDに設定します。
-
/sitecore/client/Applications/FormsBuilder/Components/Layouts/Actions/UpdateContactに移動し、前に作成したPageSettings項目を右クリックします。
-
Page-Stylesheet-File (/sitecore/client/Speak/Templates/Pages/Page-Stylesheet-File) のStylesheetという名前の新しいアイテムを追加します。

-
新しいスタイルシートアイテムをクリックし、スタイルシートの値を次のように設定します。 /sitecore/shell/client/Applications/FormsBuilder/Layouts/Actions/Actions.css
エディターのクライアントスクリプトを作成する
エディターのクライアントスクリプトを作成する
次に、エディタのクライアントスクリプトを作成する必要があります。前の手順でUpdateContactアイテムを作成したときに、スクリプトへのパスを次のように設定しました。
スクリプトを作成するには:
-
基本のSubmitアクション エディター スクリプトを使用します。Submitアクション エディター スクリプトには、常に次の基本があります。
-
EditActionSubAppRendererコンポーネントを使用します。エディタは、EditActionSubAppRendererコンポーネントによってSpeakダイアログのフレームに読み込まれます。ダイアログ ヘッダーのタイトルとサブタイトルを親に渡し、送信ボタンが有効になったときに設定する必要があります。
この例では、連絡先の詳細を更新する送信アクションを作成するために、キャンバス コンポーネントFormDesignBoardを検索するスクリプトを使用して、フォーム キャンバス上のフィールドからデータを取得し、それらを単純な配列に変換します (空の項目、その後にitemIdプロパティとnameプロパティを持つ項目が続きます)。そのため、FormDropList Parameters項目では、ValueFieldNameフィールドとDisplayFieldNameフィールドにitemIdとnameを入力しました。スクリプトは次のように機能します。
-
initialized – フィールドからデータを配列に収集します。次に、すべてのフォーム ドロップ リストを検索し、そのIsSelectionRequiredプロパティを false
-
loadDone – フォームコントロールを反復処理し、その動的データをfields配列に設定します。現在の送信アクションParametersプロパティ値がフィールドリストにない場合 (たとえば、フィールドが削除された場合やフォームがコピーされた場合)、配列の選択リスト項目にないid - 値が含まれます。次に、SPEAKフォームをParametersオブジェクトにバインドします。
-
getData – 送信ボタンをクリックすると、getData関数が呼び出されます。フォームデータを反復処理して、新しいParametersオブジェクトを収集します。空の選択 (フィールドマッピング) は省略されます。
最終的なスクリプトは次のようになります。
-
サブミットアクションアイテムを作成する
サブミットアクションアイテムを作成する
サブミットアクションアイテムを作成するには:
-
Masterデータベースで、/sitecore/system/Settings/Forms/Submit Actions
-
Submit Actionsを右クリックし、Insertをクリックして、Insert from templateをクリックします。
-
/System/Forms/Submit Actionテンプレートを選択し、Item Nameフィールドに名前Update Contact Detailsを入力して、Insertをクリックします。
-
作成したアイテムに移動し、SettingsセクションのModel Typeフィールドで、値をクラス タイプ名に設定します。たとえば、Sitecore.ExperienceForms.Samples.SubmitActions.UpdateContact.
-
Error Messageフィールドに、次のようなエラー メッセージを入力します。Update contact failed!
-
Editorフィールドで、作成したばかりのエディタ (Update contactなど) を選択します。
-
Appearanceセクションで、フォーム要素 ウィンドウに表示するアイコンを選択します。
フォーム要素 ウィンドウでAdd a submit actionをクリックすると、Update Contact Detailsアクションを選択できるようになりました。