Working with Custom Fields in Sitecore Forms

 

Introduction

While working with Sitecore Forms, we have out-of-the-box elements which we generally use to quickly build a form by dragging them in the form builder window.

Besides that, it is quite possible that you need to create your own custom fields. These fields are required to match our needs, which are not provided in the suite.

To better explain, let me give you a scenario. Suppose you need to build a form which takes user input like Firstname. Lastname and User Rating for some product.

For firstname and lastname, we can simply use Single-Line Text element but for User Rating if we want to use some Range Slider then it is not available in Form elements provided by Sitecore.

In this case, we need to create custom fields which can solve the mentioned problem. The custom fields then behave like in-build elements which can be dragged and drop like any other elements.

We also have an option to add custom properties to that element that are required to create the element while page load. Example, for range slider we need to provide minimum, maximum, default value and incremental value while loading the element on page load.

Solution

In this blog, I will explain how you can build your custom field in Sitecore. As I mentioned already, I will be creating a Range Slider as a custom field with custom properties.

The properties I need to create are: Minimum Value, Maximum Value, Incremental Value and Default Value.

This range-slider library I have picked from https://rangeslider.js.org/ and you can go thru the documents about its usage.

To make it easy, I wanted to break the whole process into 4 parts.

First Part : Creating field model class and razor file

Step 1: Create Model Class implementing InputViewModel

 

Step 2: Create razor file

[Important]

The path to keep the razor file is very important.

Step 3: Adding resource links to layout

For keeping it very simple, I have added the assets file directly on layout, you can change the concept according to your thinking.

 

After this step, deploy your changes to Sitecore root directory.

Please note: Razor file i.e rangeslider.cshtml will be deployed in \Views\FormBuilder\FieldTemplates directory. Like below:

Second Part : Creating Field Template & Field Type in Content Editor

Step 1: Create Field Template

Goto /sitecore/templates/System/Forms/Fields and Add new folder CustomFields

Now add new template item named RangeSlider, like below:

 

[Important]

Inherit Field Template

Step 2: Now, Lets create Field Type

Goto /sitecore/system/Settings/Forms/Field Types/Basic

Create a new Item named RangeSlider from /sitecore/templates/System/Forms/Field Type template.

 

[Important]

To set the Property Editor, follow the Step 2 in Third Part, You can come back later at this point once that item is ready in core database.

 

Now set the Field Template, like below:

 

If you have noticed, we have created this control in the Basic Folder, that means this control will be visible in Basic Element Section of Form Builder.

Third Part : Configuring in Core Database

To add this custom control in Form elements pane we need to follow below steps but before we can proceed, you need to go to Launchpad and click desktop menu item and change the database to Core. Upon changing go to content editor.

In the Sitecore documentation, they have suggested using the Sitecore Rocks to perform next steps but at the same time it was not configured into my Visual Studio. So, I will explain without using Sitecore Rocks.

Step 1: Create Property Editor Settings

Goto /sitecore/client/Applications/FormsBuilder/Components/Layouts/PropertyGridForm/PageSettings/Settings

Duplicate Below Item and Name it RangeSlider

/sitecore/client/Applications/FormsBuilder/Components/Layouts/PropertyGridForm/PageSettings/Settings/Text item

Why Duplicate? I was unable to create a new item from /sitecore/client/Business Component Library/version 2/Layouts/Renderings/Forms/Form/Form Parameters Template, It may be possible to create using Sitecore Rocks, but after hours of investigation, I had to clone the existing item.

Step 2: Remove existing Items under RangeSlider > Details

Remove HtmlTag and Text items

Step 3: Create new properties under Details

Since I was unable to create item using /sitecore/client/Business Component Library/version 2/Layouts/Renderings/Forms/Form/Templates/FormTextBox Parameters Template, So I decided to copy the existing items under Number Field Type since it was matching my desired type for Range Slider.

Copy under Range Slider > Details item and Name it DefaultValue

Step 4: Duplicate Name Item 3 more items and named them as Incrementer, MaximumValue, MinimumValue.

Step 5: Set Control Definition Items for Details

 

Click on Edit under Control Definitions Field and Remove highlighted items

Keep the FieldName item into the list and now we need to add 4 more properties under it.

To add, Open the content tree on left to reach the field properties which we added in Step 4.

Step 6: Set Binding Configuration for each property item

Click on DefaultValue item under Details and set the Binding Configuration as below:

Please note you can match the properties as per your model class which we created in Step 1 of First part. Keep the name in Pascal Case.

[Important]

This step is very important otherwise the values set in Form Builder will not retain.

Step 7: Repeat the step 6 for other properties.

That’s it, You are done with changes in Core Database, No need to publish since its core database and now you can switch to master database.

Fourth Part : Using Element in Sitecore Form Builder

To test, open any existing form or create a new form and check the right side pane.

Under Basic Elements you will see our Custom Form Field like below:

 

Drag into any section like below:

Put the values under the Fields and Publish the Form.

You should see the output like below:

Summary

In this blog, I tried to explain how to build a custom field in simple manner which can be understood easily. I hope this will help at some point.