Creating custom value providers in Sitecore Forms

 

In this blog we will see how we can use the Custom Value providers in Sitecore Forms. Basically, I will be creating a custom value provider which can be used to pre-fill the field(s) in the Sitecore Form.

Actual Use Case: 

Suppose you have created a News Subscriber Form, in which a Logged in user can subscribe for newsletters from you company. In that form, you wanted to pre-fill the Firstname and Lastname fields so that user can see their details (although can change the values as well) prior submitting the request.

To re-fill or populate the fields, we can create our own custom value provider which will return the value based on parameter value set for that particular field. In short, while loading the Sitecore form, the request will attach to backend code, from which you can return the user model values fetched from XConnect or any other API or database table directly to the form field.

To understand it better, lets start by creating a Value Provider First. 

Step 1: Create a Value Provider 

In Content editor, Goto /sitecore/system/Settings/Forms/Value Providers path and create your site folder, In case I have created as Sample Site: 

 

Step 2: Create new Value provider item 

Now right click the folder and Insert new item from template item “Value Provider” which can be found from path : /sitecore/templates/System/Forms/Value Provider

 

 

Step 3: Binding with Class file 

In your project solution, create a new folder Forms and again create sub folder ValueProviders

Then create a new class UserValueProvider 

Once this class is created, add the class namespace with solution name like below:

 

Step 4: Implementing IFieldValueProvider 

When you create a value provider, you must create a class that inherits from the IFieldValueProvider interface.

In the above screenshot, I have created dictionary which will behave as data source, having values against userName and lastName. Just think userName as column name and Arjun as value OR data as in Json format like below: 

{

“userName” : “Arjun”,

“lastName” : “Arora”

}

Code Behind:

public class UserValueProvider : IFieldValueProvider

{

        readonly Dictionary<string, string> userValues;

        public UserValueProvider()

        {

            userValues = new Dictionary<string, string>() {

                {"userName","Arjun" },

                {"lastName","Arora" }

            };

        }

        public FieldValueProviderContext ValueProviderContext { get; set; }

        public object GetValue(string parameters)

        {

            //Can be XConnect API call to fetch Contact Facets

            //Can be any External call to fetch Contact details from Database or other source.

            if (userValues.Any() && userValues.Where(x => x.Key == parameters).Count() > 0)

            {

                return System.Convert.ToString(userValues[parameters]);

            }

            return string.Empty;

        }

 }

 Step 5: Creating a Form

In this step we will create a simple form having 2 Single-line text, like below: 

Format it little bit by adding sections.

Step 6: Attaching a value provider to field 

In this step, we will bind our newly created Custom Value provider to the field FirstName: 

If you check thoroughly, the field name is different from Value provider parameters text. The text value firstName is the actual value which will be passed to the method GetValue, parameters variable.

Step 7: Repeat the same step for LastName

Provide “lastName” as text in Value provider parameters textbox.

Save the changes and publish all the items including provider and form. 

Step 8: Debugging

If you attached the code, you see that once form is loaded, the first request comes for first field and the param value is userName as below:

 

I have used this value to search the item from c# dictionary, and “Arjun” will return as value.

Same request will come for lastName field as well, and in that case “Arora” will return.

Step 9: Results

After completion of both the request, you will see that both fields has the value pre-populated. Like below:

 

Conclusion:

Custom value providers could be very helpful in providing the personalized experience to the user. This gives the power to developer to provide the data values across various channels as well. This also act as the single point value providers across all the Sitecore forms which can be very effective and easy maintainable.