Loading...
Sitecore

Customizing Sitecore Forms


Some time ago I worked on the project where Client needed a form with some custom fields that we can’t find in Sitecore Forms out of the box.

It was the Sitecore.NET 9.1.0 (rev. 001564).

I got the design where the  time field was split to two fields: preferred date and preferred time.

We were wondering what will be the best way to achieve that functionality. We came up with the idea of totally custom field composed of two inputs.


My way

To create a custom field in Sitecore Forms we need a few things:

  1. Custom field template
  2. Model class
  3. View
  4. Settings item for element pane
  5. Custom field type item


1. Custom Field Template

When you want to create your custom field first thing is to have a completely new template.
I decided to keep all custom fields templates in sitecore/System/Fields/Custom Form Fields folder. When you create those folders click on Custom Form Fields/Insert/New Template:

The most important thing here is to have a Templates/System/Forms/Fields/Field as a base template.
Location is System/Forms/Fields/Custom Form Fields as I mentioned before. You will also need Standard values. According to Sitecore documentation if you don’t have standard values, the element (our custom field) cannot be dropped on the form. To add standard values to template click on ribbon Builder Options and Standard values.


2. Model class

In Visual Studio in your project in folder Models add a folder named Fields. Then Add/Class and name it DateTimePickerViewModel.cs
Your class should derive from InputViewModel class with type of DateTime. Override the InitItemProperties and the UpdateItemFields methods.

using Sitecore.Data.Items;
using Sitecore.ExperienceForms.Mvc.Models.Fields;
using System;

namespace CustomComponents.Forms.Models.Fields
{
    [Serializable]
    public class DateTimePickerViewModel : InputViewModel<DateTime>
    {

        protected override void InitItemProperties(Item item)
        {
            base.InitItemProperties(item);
        }
        protected override void UpdateItemFields(Item item)
        {
            base.UpdateItemFields(item);
        }
    }
}

Build and deploy.


3. View

Now when we have a model we need a view, right? According to Sitecore documentation view files for Sitecore Forms are stored in Website/Views/FormBuilder/FieldTemplates so we want to create that folders in our Visual Studio project Views folder. Then Add a Web Page (Razor) cshtml file as on the pic below and name it DateTimePicker.cshtml. Delete all of its content.

We decided to pass the date and time values to one hidden input using .js
JS takes value from text input Preferred Date

<input type=”text” class=”form-control” placeholder=”Preferred Date” />

and takes value from text input Preferred Time

<input type=”text” class=”form-control” placeholder=”Preferred Time” />

and puts them in the value of the hidden input

<input type=”hidden” class=”hidden-control” value=”@Model.Value” name=”@Html.NameFor(m=>Model.Value)” />

Here is our view:

@model CustomComponents.Forms.Models.Fields.DateTimePickerViewModel
 
<div class="input-group date-control">
     
    <span class="input-group-addon">
        <span class="icon-down-arrow2"></span>
    </span>
</div>
 
<div class="input-group time-control">
     
    <span class="input-group-addon">
        <span class="icon-down-arrow2"></span>
    </span>
</div>
 
<input type="hidden" class="hidden-control" value="@Model.Value" name="@Html.NameFor(m => Model.Value)" />

4. Settings item – elements pane

Now when we have a template, model and view it seems obvious to have an item in Sitecore. But when we work with forms elements we need one more thing  before adding the filed item.

We need a Settings Item in the core database so that our custom element has a pane in Forms Editor.

A pane can have sections for example Details and Advanced Settings. In our case the Advanced Settings section is important because we need an Allow Save property. This option is essential if we want our date and time value to be saved in ExperienceForms database after submitting a form.

Our pane will look like this:

How to:

  • Switch to the core database
  • Choose sitecore/client/Applications/FormsBuilder/Components/Layouts/PropertyGridForm/PageSettings/Settings
  • Click Duplicate on the SingleLineText  item
  • Enter name for our item: DateTimePicker and press OK
  • Under the DateTimePicker remove Validation and Conditions items
  • In Details item click Edit in ControlDefinitions and remove all besides the FieldName from Selected and Save
  • In Advanced item click Edit in ControlDefinitions and remove all but AllowSave from Selected and Save
  • In Styling item Edit ControlDefinitions and remove all but CssClass from Selected and Save
  • Ready

5. Field type item

Finally to tie it all together

  • Switch to the master database to the location
    /sitecore/system/Settings/Forms/Field Types/Basic
  • Insert From Template
    Template: /System/Forms/Field Type
    Item Name: DateTimePicker
  • Set the Settings section
    ViewPath: FieldTemplates/DateTimePicker
    Model type: CustomComponents.Forms.Models.Fields.DateTimePickerViewModel,CustomComponents.Forms
    Property editor: Property Editor Settings/DateTimePicker – the one we created in the core database
  • Set the Data section
    Field template: Fields/Custom Form Fields/DateTimePicker – the one we created before in paragraph 1.
  • Set the Appearance section
    Icon: OfficeWhite/16×16/calendar_clock.png – with this icon our element will appear in Sitecore Forms Editor
    BackgroundColor: Steel
  • Save your work

Now we are ready to use our new custom element in Sitecore Forms


Finally the form with our custom field after additional styling will look like this

Preferred Date picker:

Preferred Time picker:

If we are talking about customizing Sitecore Forms, we should also take under consideration the very important thing which is Sitecore-Forms-Extensions by Bart Verdonck.
https://github.com/bartverdonck/Sitecore-Forms-Extensions

When I started to work on the form which I mentioned at the beginning I also needed a captcha field. Then I came across the Barts Extensions. You really have to check it out before working on any Sitecore Form because there are a lot of custom fields commonly used in forms so there is no need to create them by yourself from scratch.

Thank you Bart 🙂

You can find an installation guide here:
https://github.com/bartverdonck/Sitecore-Forms-Extensions#installation
and extensive documentation here:
http://onelittlespark.bartverdonck.be/sitecoreformsextentions/9.1/


2 comments
Leave a Reply

Your email address will not be published. Required fields are marked *