Create a dropdown list with external data in Sitecore Forms

Sitecore Forms comes with an out-of-the-box dropdown list field that allows you to choose between a static or a dynamic data source. In today’s blog post I am sharing a simple way to create a custom dropdown list that displays external data from systems such as Salesforce.

The complete code can be found in my Github repository. The Sitecore package can be downloaded here

The default dropdown list field comes with a flexible way to define what options are available for visitors. You can choose “Static” and entry manually the options you want or you can choose “Dynamic” and select a path in the Content Tree from which the child items will be shown as options.

Figure 1: Dropdown list field in Forms

In some cases, neither options meet the business requirements. You might come across a scenario where data from a CRM system should be shown instead. For example, a list of countries should come from Salesforce.

The proposed solution in this post is to reuse as much as possible from the OOTB dropdown list field. Also, I should mention that this solution applies only to Sitecore 9.1 since in the Sitecore 9.0 the dropdown list implementation is different. At the end of this blog post, I share how to implement it in the Sitecore 9.0.

Let’s start with the code.

Create a Field Settings Manager

We will start by creating a class that extends from the interface Sitecore.ExperienceForms.FieldSettings.IFieldSettingsManager. This interface is found in the Sitecore.ExperienceForms assembly and is responsible for populating the options in the dropdown list field.

IFieldSettingsManager contains two methods:

  • GetSettings – Here is where you are going to implement the logic to populate the options. You might want to call some service to read information from an external system (e.g. Salesforce) and convert them into a ListFieldItemCollection.
  • SaveSettings – The OOTB dropdown list field uses this method to create the options as Sitecore items in the Content Tree when static data source is selected. We don’t need to implement any code in our example.

Below you find a sample code.

Figure 2: A sample code of a field settings manager for populating items from Salesforce (or any external system)

Note: Sitecore Forms expects the field settings manager class to contain the [Serializable] attribute.

Create a ViewModel class

Next, we need to create a view model class for the custom dropdown list. This is a really simple class that basically derives from the Sitecore.ExperienceForms.Mvc.Models.Fields.DropDownListViewModel class and overwrites DataSourceSettingsManager property to reuse our own field settings manager class.

Figure 3: View model extending DropdownListViewModel and overwriting DataSourceSettingsManager property

Note: Sitecore Forms expects the view model class class to contain the [Serializable] attribute.

Tying everything together

Now, in the Content Editor, navigate to /sitecore/system/Settings/Forms/Field Types/Lists and create a new field type (template: /sitecore/templates/System/Forms/Field Type). Give it the name “Salesforce Dropdown list”, and enter the following values:

  • View Path: FieldTemplates/DropDownList. We are reusing the same as the OOTB Dropdown list field.
  • Model Type: Custom.Feature.Forms.Models.Fields.SalesforceDropdownListViewModel, Custom.Feature.Forms. Enter here the full qualified namespace to the view model we have just created.
  • Property Editor: Property Editor Settings/DropdownList. Let’s keep the same as the OOTB dropdown list field for the sake of simplicity. I have created a custom one, however. You can find it in my Github repository.
  • Field Template: Fields/Dropdown List. We are reusing the same as the OOTB Dropdown list field.
  • Icon: OfficeWhite/32×32/drop_down_list.png. Or any of your choice.
  • BackgroundColor: Grass.

With all that done, you should have now a dropdown list getting data from external sources.

How do I implement this in the Sitecore 9.0.x?

As I mentioned early, the dropdown list implementation is slightly different. Here is how we implement it.

Create a List Data Source Provider

We will start by creating a class that extends from the interface Sitecore.ExperienceForms.Mvc.DataSource.IListDataSourceProvider. This interface is found in the Sitecore.ExperienceForms.Mvc assembly and is responsible for populating the options in the dropdown list field in Sitecore 9.0.x.

Figure 4: List Data Source Provider implementation

Create a View Model Class

Next, we need to create a view model class for the custom dropdown list. This class derives from the Sitecore.ExperienceForms.Mvc.Models.Fields.DropDownListViewModel class and overwrites ListDataSourceProvider property to reuse our own List Data Source Provider class.

Figure 5: Figure 3: View model extending DropdownListViewModel and overwriting ListDataSourceProvider property

Note: Different than conventionally implemented, in this case base.InitItemProperties must be called last because it is in this moment that the options in the dropdown list get populated.

Now, just tie everything together as done previously.

That was it for today’s blog post.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s