Walkthrough: Create a submit action that redacts form submissions

Version: 10.4

The right to erasure (also known as the right to be forgotten) concerns a users's right for personal data to be deleted. This topic describes how to use Sitecore Forms to remove users' personal information from submitted forms.

Warning

This topic describes how to configure your Sitecore Forms implementation to support data privacy compliance. This topic is not exhaustive and it should not be construed or used as legal advice about the content, interpretation, or application of any law or regulation.

To facilitate Sitecore and their partners in complying with data privacy obligations, Sitecore Forms provides an API to anonymize database records of users' personal information. It accomplishes this by masking all field submission values to ~REDACTED~, nullifying the contact IDs, and deleting any files uploaded by the contact.

This walkthrough describes how to create a custom submit action that redacts form submissions and removes files uploaded by a specific contact. The scenario used in this topic describes how to display a consent check box that visitors can tick to finalize the redaction of their personal data. When the visitor selects the box and clicks Submit, redaction occurs. All the visitor's submissions will be redacted and all files uploaded by the visitor will be removed.

Important

In this scenario, the contact is obtained through Sitecore Analytics. Therefore, redaction is not executed in CMS-only mode. Sitecore Forms creates the redact data provider through dependency injection, therefore you can override its implementation using configuration files.

The client script used in this walkthrough lets the form designer use a checkbox element as the consent check box. For example:

This walkthrough describes how to:

Create a submit action class

When you create a custom submit action, you must create a class that inherits from the SubmitActionBase<TParametersData> class.

To create the submit action class:

Create the RedactData class that inherits from SubmitActionBase<TParametersData>.
Specify the RedactData parameter.

Override the Execute method and provide the boolean validation parameters. For example:

RequestResponse

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;
        }
    }
}

RequestResponse

using System;

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

Build and deploy the submit action class.

Create the SPEAK editor control

The next step is to create the UI that enables mapping the form fields to the contact details fields. For Sitecore Forms, submit action editors are in the core database: /sitecore/client/Applications/FormsBuilder/Components/Layouts/Actions

Note

In this example, you must have the Sitecore Rocks Visual Studio plugin. The plugin is compatible with Visual Studio 2019 or earlier.

To create the control:

Navigate to /sitecore/client/Applications/FormsBuilder/Components/Layouts/Actions.
Right-click Actions, click Add, and then click New Item.
Click the /sitecore/client/Speak/Templates/Pages/Speak-BasePage template, and in the Enter the name of the new item field, enter RedactData and click OK.
Right-click the RedactData item you just created and click Tasks, and click Design Layout.
In the Layout dialog box, navigate to /sitecore/client/Speak/Layouts/Layouts and click the Speak-FlexLayout layout and click OK.
In the upper-left corner, click Add Rendering and in the Select Renderings dialog box, click All and search for PageCode:
Click PageCode and click OK.
In the PageCode rendering properties, set the PageCodeScriptFileName property to the JavaScript path that contains the page code script: /sitecore/shell/client/Applications/FormsBuilder/Layouts/Actions/RedactData.js.
Set the SpeakCoreVersion property to Speak 2-x.
Search for and select the Text View rendering and click Add to add: HeaderTitle, and HeaderSubtitle.
For the two items, in the Properties section, set the following ID properties:
- IsVisible – False
- PlaceholderKey – Page.Body
Add the following renderings:
- MainBorder of type Border.
- CheckboxesDropList of type DropList. Set the PlaceholderKey property to MainBorder.Content.
- FormClientApi of type FormClientApi. Set the PlaceholderKey property to MainBorder.Content.
Your rendering now looks like this:

Add a folder that contains parameters for the editor

Next, you must add a folder that contains the parameters for the editor.

To add the PageSettings folder:

Navigate to /sitecore/client/Applications/FormsBuilder/Components/Layouts/Actions, and right-click the RedactData item you created earlier, click Add, and click New item.
Search for and select the PageSettings template, enter the name PageSettings and click OK.
Right-click the PageSettings item that you just created and click Add, New Item.
Search for and select the Text Parameters template, click Add twice, and name the items identically to the IDs in the layout you created previously:
- HeaderTitle – double-click and in the Text field enter: GDPR Redact Data.
- HeaderSubtitle – double-click and in the Text field enter: To redact submitted data, select the consent check box.
Right-click the PageSettings item again and click Add, New Item. Search for and click the DropList Parameters template and click Add and name the item CheckboxesDropList.

Double-click the CheckboxesDropList item and set the following field values:

CheckboxesDropList Parameter	ValueFieldName	DisplayFieldName
CheckboxesDropList	itemId	name

Right-click the PageSettings item again and click Add, New Item. Search for and click the FormClientApi-Parameters template and click Add and name the item FormClientApi.
Double-click the FormClientApi item and on the Format field value table, add a binding between itemId and itemId, and another binding between name and name. In the IncludedFieldTypeIds field, find and click Field Types/Basic/Checkbox in the left list box, then click > to copy it to the right list box.
Navigate to /sitecore/client/Applications/FormsBuilder/Components/Layouts/Actions and right-click the PageSettings item that you created earlier.
Add a new item named Stylesheet of type Page-Stylesheet-File:
Click the new stylesheet item and set the Stylesheet value to: /sitecore/shell/client/Applications/FormsBuilder/Layouts/Actions/Actions.css.

Create the client script for the editor

Now you must create the client script for the editor.

To create the script:

Use the base Submit actions editor script. The Submit actions editor script always has the following base:

RequestResponse

(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);

Use the EditActionSubAppRenderer component. The editors are loaded in a frame in a Speak dialog by the EditActionSubAppRenderer component.

They must pass the dialog header title and subtitle to the parent, and set when the submit button is enabled.

The script works as follows:

initialized – collects the data from the fields into an array.
loadDone – iterates the form controls, and sets their dynamic data to the fields array. If the current submit action Parameters property value is not in the fields list (for example, if the field is deleted, or the form copied), it includes an ID value not in the selection list item in the array. Then it binds the SPEAK form to the Parameters object.
getData – when the submit button is clicked, the getData function is called. It iterates the form data in order to collect the new Parameters object. Empty selections (field mappings) are omitted.

Your final script should look like this:

RequestResponse

(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);

Create the submit action item

To create the submit action item:

Navigate to /sitecore/system/Settings/Forms/Submit Actions.
Right-click Submit Actions, click Insert, and click Insert from template.
In the /System/Forms/Submit Action template, in the Item Name field, enter the name Redact Data and click Insert.
Navigate to the item you just created and in the Settings section, in the Model Type field, set the value to the class type name.
In the Error Message field, enter an error message, for example, Failed to redact data!
In the Editor field, select the editor that you just created, for example, RedactData.
In the Appearance section, select the icon that you want to display in the Form elements pane.

In the Form elements pane, when you click Add a submit action, you can now click the Redact Data action.

Do you have some feedback for us?

If you have suggestions for improving this article,