1. Sitecore Formsのチュートリアル

チュートリアル: フォーム送信を編集する送信アクションを作成する

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

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

消去する権利(忘れられる権利とも呼ばれます)は、個人データを削除するユーザーの権利に関係します。このトピックでは、Sitecore Formsを使用して、送信されたフォームからユーザーの個人情報を削除する方法について説明します。

警告

このトピックでは、データ プライバシー コンプライアンスをサポートするようにSitecore Formsの実装を設定する方法について説明します。このトピックは網羅的なものではなく、法律や規制の内容、解釈、または適用に関する法的助言として解釈または使用すべきではありません。

サイトコアおよびそのパートナーがデータプライバシー義務を遵守するのを容易にするために、Sitecore Formsは、ユーザーの個人情報のデータベースレコードを匿名化するAPIを提供しています。これは、すべてのフィールド送信値を ~REDACTED~にマスクし、連絡先IDを無効にし、連絡先によってアップロードされたファイルを削除することで実現されます。

このチュートリアルでは、フォーム送信を編集し、特定のコンタクトによってアップロードされたファイルを削除するカスタム送信アクションを作成する方法について説明します。このトピックで使用するシナリオでは、訪問者が自分の個人データの編集を完了するためにチェックできる同意チェック ボックスを表示する方法について説明します。訪問者がボックスを選択して「 Submit」をクリックすると、墨消しが行われます。訪問者のすべての提出物は編集され、訪問者がアップロードしたすべてのファイルが削除されます。

Warning for deletion of personal data
大事な

このシナリオでは、コンタクトはSitecore Analyticsを通じて取得されます。したがって、墨消しはCMSのみのモードでは実行されません。Sitecore Formsは依存関係の挿入によってリダクション データ プロバイダーを作成するため、設定ファイルを使用してその実装をオーバーライドできます。

このチュートリアルで使用するクライアント スクリプトを使用すると、フォーム デザイナーは同意チェック ボックスとしてcheckbox要素を使用できます。例えば:

GDPR Redact Data

このチュートリアルでは、次の方法について説明します。

submitアクション クラスを作成する

カスタム送信アクションを作成する場合は、SubmitActionBase<TParametersData> クラスを継承するクラスを作成する必要があります。

submitアクションクラスを作成するには:

  1. SubmitActionBase<TParametersData>から継承する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<RedactDataSubmitActionData>
        {
            private readonly IRedactDataProvider _redactDataProvider = ServiceLocator.ServiceProvider.GetService<IRedactDataProvider>();
            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. submitアクション クラスをビルドしてデプロイします。

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

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

メモ

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

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

  1. /sitecore/client/Applications/FormsBuilder/Components/Layouts/Actionsに移動します。

  2. Actionsを右クリックし、Addをクリックして、New Itemをクリックします。

  3. /sitecore/client/Speak/Templates/Pages/Speak-BasePageテンプレートをクリックし、Enter the name of the new itemフィールドに「RedactData」と入力してOKをクリックします。

  4. 作成したRedactDataアイテムを右クリックしてTasksをクリックし、Design Layoutをクリックします。

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

  6. 左上隅のAdd Renderingをクリックし、Select Renderingsダイアログ ボックスでAllをクリックしてPageCodeを検索します。

    Select Renderings dialog box
  7. PageCode 」をクリックし、「 OK」をクリックします。

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

  9. SpeakCoreVersionプロパティをSpeak 2-xに設定します。

  10. レンダリングText Viewを検索して選択し、Addをクリックして「 HeaderTitle」と「 HeaderSubtitle」を追加します。

  11. 2つの項目について、Propertiesセクションで、次のIDプロパティを設定します。

    • IsVisibleFalse

    • PlaceholderKeyPage.Body

  12. 次のレンダリングを追加します。

    • MainBorderタイプBorderの。

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

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

    レンダリングは次のようになります。

    Renderings and Placeholders list

エディターのパラメーターを含むフォルダーを追加します

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

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

  1. /sitecore/client/Applications/FormsBuilder/Components/Layouts/Actionsに移動し、前に作成したRedactDataアイテムを右クリックしてAddをクリックし、New itemをクリックします。

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

  3. 作成したPageSettingsアイテムを右クリックし、AddNew Itemの順にクリックします。

  4. Text Parametersテンプレートを検索して選択し、Addを2回クリックして、前に作成したレイアウトのIDと同じ名前をアイテムに付けます。

    • HeaderTitle –ダブルクリックし、Text fieldに次のように入力します: GDPR Redact Data

    • HeaderSubtitle –ダブルクリックし、Text fieldに次のように入力します。 To redact submitted data, select the consent check box.

  5. PageSettingsアイテムを再度右クリックし、AddNew Itemの順にクリックします。DropList Parametersテンプレートを検索してクリックし、Addをクリックしてアイテムに「CheckboxesDropList」という名前を付けます。

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

    CheckboxesDropListパラメータ

    値フィールド名

    DisplayFieldName (ディスプレイフィールド名)

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

    アイテムID

    名前

  7. PageSettingsアイテムを再度右クリックし、AddNew Itemの順にクリックします。FormClientApi-Parametersテンプレートを検索してクリックし、Addをクリックしてアイテムに「FormClientApi」という名前を付けます。

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

    Format field and options
  9. /sitecore/client/Applications/FormsBuilder/Components/Layouts/Actionsに移動し、前に作成したPageSettings項目を右クリックします。

  10. Page-Stylesheet-File型のStylesheetという名前の新しいアイテムを追加します。

    Add New Item dialog box
  11. 新しいスタイルシートアイテムをクリックし、Stylesheet値を /sitecore/shell/client/Applications/FormsBuilder/Layouts/Actions/Actions.cssに設定します。

エディターのクライアントスクリプトを作成する

次に、エディタのクライアントスクリプトを作成する必要があります。

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

  1. 基本のSubmitアクション エディター スクリプトを使用します。Submitアクション エディター スクリプトには、常に次の基本があります。

    (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 – フォームコントロールを反復処理し、その動的データをfields配列に設定します。現在の送信アクションの「パラメータ」プロパティ値がフィールドリストにない場合 (たとえば、フィールドが削除された場合やフォームがコピーされた場合)、配列の選択リスト項目にないID値が含まれます。次に、SPEAKフォームをParametersオブジェクトにバインドします。

    • getData – 送信ボタンをクリックすると、getData関数が呼び出されます。新しいParametersオブジェクトを収集するために、フォーム データを反復処理します。空の選択 (フィールドマッピング) は省略されます。

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

    (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. Submit Actionsを右クリックし、Insertをクリックして、Insert from templateをクリックします。

  3. /System/Forms/Submit ActionテンプレートのItem Nameフィールドに、名前Redact Dataを入力し、Insertをクリックします。

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

  5. Error Messageフィールドに、次のようなエラー メッセージを入力します。Failed to redact data!

  6. Editorフィールドで、作成したばかりのエディタ (RedactDataなど) を選択します。

  7. Appearanceセクションで、フォーム要素 ウィンドウに表示するアイコンを選択します。

    フォーム要素 ウィンドウでAdd a submit actionをクリックすると、Redact Dataアクションをクリックできるようになりました。

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