ウォークスルー

サブミッション・アクションクラスを作成する

カスタム送信アクションを作成する際は、SubmitActionBase クラスから継承するクラスを作成しなければなりません。

サブミットアクションクラスを作成するには:

1. SubmitActionBaseから継承するRedactDataクラスを作成します。

2. RedactDataパラメータを指定します。

3. Executeメソッドを上書きし、ブール値検証パラメータを提供します。例えば:

   using System; using System.Linq; using Microsoft.Extensions.DependencyInjection; using Sitecore.Analytics; using Sitecore.DependencyInjection; using Sitecore.ExperienceForms.Data; using Sitecore.ExperienceForms.Models; using Sitecore.ExperienceForms.Mvc.Models.Fields; using Sitecore.ExperienceForms.Processing; using Sitecore.ExperienceForms.Processing.Actions;

   namespace Sitecore.ExperienceForms.Gdpr.Samples.SubmitActions { public class RedactData : SubmitActionBase { private readonly IRedactDataProvider _redactDataProvider = ServiceLocator.ServiceProvider.GetService(); private readonly ITracker _tracker = Tracker.Current;

   public RedactData(ISubmitActionData submitActionData) : base(submitActionData) { }

   protected override bool Execute(RedactDataSubmitActionData data, FormSubmitContext formSubmitContext) { var consentCheckBox = formSubmitContext.Fields.FirstOrDefault(f => Guid.Parse(f.ItemId) == data.ConsentCheckboxFieldId);

   if (consentCheckBox is CheckBoxViewModel checkboxVm) { if (checkboxVm.Value) { var contactId = _tracker?.Contact?.ContactId; if (contactId != null) { _redactDataProvider.RedactContactSubmissions(contactId.Value); } } } else { return false; }

   return true; } } }

   using System;

   namespace Sitecore.ExperienceForms.Gdpr.Samples.SubmitActions { public class RedactDataSubmitActionData { public Guid ConsentCheckboxFieldId { get; set; } } }

4. サブミッションアクションクラスをビルドしてデプロイします。

SPEAKエディターコントロールを作成する

次のステップは、フォームフィールドを連絡先情報フィールドにマッピングできるUIを作成することです。Sitecoreフォームの場合、送信アクションエディタはコアデータベースにあります: /sitecore/client/Applications/FormsBuilder/Components/Layouts/Actions

!注この例では、Sitecore Rocks Visual Studioプラグインが必要です。このプラグインはVisual Studio 2019以前のバージョンと互換性があります。

コントロールを作成するには:

1. /sitecore/client/Applications/FormsBuilder/Components/Layouts/Actionsへナビゲート。

2. 右クリックでアクションを選び、追加をクリックしてから新しいアイテムをクリックします。

3. /sitecore/client/Speak/Templates/Pages/Speak-BasePageテンプレートをクリックし、「新しいアイテム名を入力して」欄にRedactDataを入力し、「**OK」**をクリックします。

4. 作成したRedactDataアイテムを右クリックして「 タスク」をクリックし、「 デザインレイアウト」をクリックしてください。

5. レイアウトダイアログボックスで、/sitecore/client/Speak/Layouts/Layoutsに移動してSpeak-FlexLayoutのレイアウトをクリックし、「**OK」**をクリックします。

6. 左上で 「レンダリングを追加 」をクリックし、「 レンダリングを選択する 」ダイアログボックスで「 すべて 」をクリックしてPageCodeを検索してください。

   

7. PageCodeをクリックしてOKをクリックします。

8. PageCodeレンダリングプロパティで、PageCodeScriptFileNameプロパティをページコードスクリプトを含むJavaScriptパスに設定します:/sitecore/shell/client/Applications/FormsBuilder/Layouts/Actions/RedactData.js。

9. SpeakCoreVersionプロパティをSpeak 2-xに設定してください。

10. Search Text Viewレンダリングを選択し、「 追加 」をクリックして追加: HeaderTitle、HeaderSubtitle。

11. 2つのアイテムについては、プロパティ セクションで以下のIDプロパティを設定します。

    • IsVisible – False
    • PlaceholderKey – ページ・ボディ

12. 以下のレンダリングを追加してください:

    • MainBorder タイプ Border。
    • CheckboxesDropList 型 DropListの。 PlaceholderKey プロパティを MainBorder.Contentに設定します。
    • FormClientApi 型 FormClientApiの。 PlaceholderKey プロパティを MainBorder.Contentに設定します。

    現在のレンダリングは次のようになります:

    

エディター用のパラメータを含むフォルダを追加してください

次に、エディターのパラメータを含むフォルダを追加する必要があります。

PageSettingsフォルダを追加するには:

1. /sitecore/client/Applications/FormsBuilder/Components/Layouts/Actionsに移動し、先ほど作成したRedactDataアイテムを右クリックし、「追加」をクリックし、「新しいアイテム」をクリックします。

2. Search PageSettingsテンプレートを選択し、名前PageSettingsを入力してOKをクリックします。

3. 作成したPageSettingsアイテムを右クリックして「 追加、新しいアイテム」をクリックします。

4. SearchしてText Parametersテンプレートを選択し、「 追加 」を2回クリックし、以前作成したレイアウトのIDと同じ名前でアイテム名を付けます。

   • HeaderTitle – ダブルクリックして テキスト欄 に入力: GDPR Redact Data。
   • HeaderSubtitle – ダブルクリックして テキスト欄 で入力: 提出されたデータを編集するには、同意チェックボックスを選択してください。

5. PageSettingsアイテムを右クリックして「追加、新しいアイテム」をクリックします。SearchDropList Parametersテンプレートをクリックし、「追加」をクリックし、アイテム名をCheckboxesDropList。

6. CheckboxesDropList項目をダブルクリックして、以下のフィールド値を設定します:

   チェックボックスDropListパラメータ

   ValueFieldName

   ディスプレイフィールドネーム

   チェックボックスドロップリスト

   itemId

   名称

7. PageSettingsアイテムを右クリックして「追加、新しい項目」をクリックします。Search →→FormClientApi→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→

8. FormClientApiアイテムをダブルクリックし、「フォーマットフィールド値」テーブルでitemIdとitemIdの間にバインディングを追加し、nameとnameの間に別のバインディングを追加します。IncludedFieldTypeIdsフィールドで、左側のリストボックスでField Types/Basic/Checkboxを見つけてクリックし、**>**をクリックして右のリストボックスにコピーします。

   

9. /sitecore/client/Applications/FormsBuilder/Components/Layouts/Actionsに移動し、先ほど作成したPageSettingsアイテムを右クリックします。

10. 新しい項目を追加してください。 StylesheetのタイプPage-Stylesheet-File:

    

11. 新しいスタイルシート項目をクリックし、Stylesheetの値を以下に設定します: /sitecore/shell/client/Applications/FormsBuilder/Layouts/Actions/Actions.css。

編集者用のクライアントスクリプトを作成します

次に、編集者用のクライアントスクリプトを作成しなければなりません。

スクリプトを作成するには:

1. 基本のSubmit Actions編集スクリプトを使用してください。Submit actions編集スクリプトは常に以下の基本を持っています:

   (function (speak) { var parentApp = window.parent.Sitecore.Speak.app.findApplication('EditActionSubAppRenderer');

   speak.pageCode("underscore", function (_) { return { initialized: function () { this.on({ "loaded": this.loadDone }, this);

   if (parentApp) { parentApp.loadDone(this, this.HeaderTitle.Text, this.HeaderSubtitle.Text); parentApp.setSelectability(this, true); } },

   loadDone: function (parameters) { this.Parameters = parameters || {}; },

   getData: function () { return this.Parameters; } }; }); })(Sitecore.Speak);

2. EditActionSubAppRendererコンポーネントを使いましょう。エディターは、EditActionSubAppRendererコンポーネントによってSpeakダイアログのフレーム内に読み込まれます。

   ダイアログヘッダーのタイトルとサブタイトルを親に渡し、送信ボタンが有効になるタイミングを設定します。

   スクリプトの仕組みは以下の通りです。

   • initialized – はフィールドからデータを配列に収集します。
   • loadDone – フォームコントロールを反復し、その動的データをフィールド配列に設定します。現在の送信アクションのパラメータプロパティ値がフィールドリストに含まれていない場合(例えばフィールドが削除されたりフォームがコピーされた場合)、配列内の選択リスト項目に含まれていないID値が含まれます。その後、SPEAKフォームをパラメータオブジェクトにバインドします。
   • getData – 送信ボタンをクリックするとgetData関数が呼び出されます。新しいパラメータオブジェクトを収集するためにフォームデータを反復処理します。空の選択(フィールドマッピング)は省略されます。

   最終的なスクリプトは次のようになります:

   (function (speak) { var parentApp = window.parent.Sitecore.Speak.app.findApplication('EditActionSubAppRenderer'); speak.pageCode("underscore", function (_) { return { initialized: function () {

   this.on({ "loaded": this.loadDone }, this);

   this.Fields = this.FormClientApi.getFields(); this.CheckboxesDropList.Items = this.Fields;

   if (parentApp) { parentApp.loadDone(this, this.HeaderTitle.Text, this.HeaderSubtitle.Text); parentApp.setSelectability(this, true); } }, loadDone: function (parameters) { this.Parameters = parameters || {}; this.CheckboxesDropList.SelectedValue = this.Parameters.consentCheckboxFieldId; }, getData: function () { this.Parameters.consentCheckboxFieldId = this.CheckboxesDropList.SelectedValue; return this.Parameters; } }; }); })(Sitecore.Speak);

アクションアイテムを提出する

アクションアイテムを提出するには:

1. /sitecore/system/Settings/Forms/Submit Actionsへナビゲート。

2. 右クリックで 「アクションを送信」をクリックし、「 挿入」をクリックし、「 テンプレートから挿入」をクリックします。

3. /System/Forms/Submit Actionテンプレートのアイテム名欄で、名前Redact Dataを入力して挿入をクリックします。

4. 作成したアイテムに移動し、設定 セクションのModel Typeフィールドで値をクラスタイプ名に設定します。

5. エラーメッセージ欄には、例えば「*データの編集に失敗!」*といったエラーメッセージを入力してください。

6. エディターフィールドで、今作成したエディターを選択してください。例えばRedactData。

7. 「外観」セクションで、フォーム要素ペインで表示したいアイコンを選択します。

   フォーム要素のペインで「 Add a submit action」をクリックすると、「 Redact Data 」アクションをクリックできます。