SaaS CMS has officially launched! Learn more now.

Binh Nguyen Thi
Apr 29, 2024
  398
(5 votes)

Optimizely Forms - How to add extra data automatically into submission

Some words about Optimizely Forms

Optimizely Forms is a built-in add-on by Optimizely development team that enables to create forms dynamically via block-based approach. Developers could install Optimizely Forms to any Optimizely CMS or Customized Commerce site via installing nuget package.

It allows content editors to create forms dynamically as a normal block, dragging and dropping available form elements such as text box, text area, date time, file upload, image...etc into form container block. So editors can design easily any form with needed controls and re-use it at any pages for vary contexts such as user survey, user registration, user feedback, user support.

Once users submit form then data will be saved into database permanently by default. Moreover, we also can send submission data to third parties via connectors for auto-marketing purpose.

Here is illustrated image about creating form in Edit User Interface

After creating form then placing form in pages then users can see it when viewing page like this below

How Optimizely Forms works

The below image illustrates about how to apply Optimizely Forms and how it works

 

So as a developer, I realized that we can do a lot of customization around Optimizely Forms such as creating new form elements, adding more extra post submission actors, implementing custom connector.

Recently, I got a requirement that the client want to have some extra data in all submission data such as page url, page category. These extra fields must be stored in database, showed in form submissions view and exporting files as well.

This below image shows how to submission data is displayed in backend user interface.

You can see data in blue border is filled data by users, data in orange border is system data – they are not data filled by user. Is it possible to add more data as same as default system data? Yes. We can do customization for it and here is sample code that I want to share

How I do to add extra data to submission

  • First, we need a new post submission actor to add extra data to submission data. This actor should be run first by setting order to make sure that extra data is always added to submission data before all other actors.
public class MoreExtraInformationPostSubmissionActor : PostSubmissionActorBase, ISyncOrderedSubmissionActor
 {
     private readonly IUrlResolver _urlResolver;

     public MoreExtraInformationPostSubmissionActor(IUrlResolver urlResolver)
     {
         _urlResolver = urlResolver;
     }

     public int Order => 1;

     public override object Run(object input)
     {
         var hostedPageId = SubmissionData.Data["SYSTEMCOLUMN_HostedPage"] as string;

         if (!string.IsNullOrEmpty(hostedPageId))
         {
             var hostedPageUrl = _urlResolver.GetUrl(new ContentReference(hostedPageId));
             SubmissionData.Data.Add("PageUrl", hostedPageUrl);
         }
         return new SubmissionActorResult();
     }
 }
  • In order to display extra data in view and export file here is the thing that we need to add.
public class CustomFormRepository : FormRepository
{
    public override IEnumerable<FriendlyNameInfo> GetFriendlyNameInfos(FormIdentity formIden, params Type[] excludedElementBlockTypes)
    {
        var friendlyNameInfos = new List<FriendlyNameInfo>(base.GetFriendlyNameInfos(formIden, excludedElementBlockTypes));
        friendlyNameInfos.Add(new FriendlyNameInfo() { FormatType = FormatType.String, FriendlyName = "Page Url", ElementId = "PageUrl" });
        return friendlyNameInfos;
    }
}

 

  • Finally, need to override default FormRepository by new one by adding this below code in Startup.cs
  services.AddSingleton<IFormRepository, CustomFormRepository>();

The result after applying all above code changes

  • In Form submissions UI

  • In exported file

 

That is all thing that I want to share in this article. I hope that it is helpful for someones. Happy coding!

Apr 29, 2024

Comments

Please login to comment.
Latest blogs
Optimizely Graph – Faceting with Geta Categories

Overview As Optimizely Graph (and Content Cloud SaaS) makes its global debut, it is known that there are going to be some bugs and quirks. One of t...

Eric Markson | Jul 22, 2024 | Syndicated blog

Integration Bynder (DAM) with Optimizely

Bynder is a comprehensive digital asset management (DAM) platform that enables businesses to efficiently manage, store, organize, and share their...

Sanjay Kumar | Jul 22, 2024

Frontend Hosting for SaaS CMS Solutions

Introduction Now that CMS SaaS Core has gone into general availability, it is a good time to start discussing where to host the head. SaaS Core is...

Minesh Shah (Netcel) | Jul 20, 2024

Optimizely London Dev Meetup 11th July 2024

On 11th July 2024 in London Niteco and Netcel along with Optimizely ran the London Developer meetup. There was an great agenda of talks that we put...

Scott Reed | Jul 19, 2024