Sitecore 9 Forms: Custom Grouped dropdown

I came across a requirement from a client that they wanted to show Country and it’s states grouped in a dropownlist. I created a custom grouped dropdown to fit into the scenario. Since this is an extension of dropdownlist, no speak knowledge required. 

Let’s get started

Step 1: Create custom dropdown list

Create a custom dropdownlist under
/sitecore/system/Settings/Forms/Field Types/Lists based on Field Type(/sitecore/templates/System/Forms/Field Type) template like below

Step 2: Create a code behind class and razor view

create a code behind class like this in VS project

using System.Collections.Generic;
using Sitecore.Data.Items;
using Sitecore.Diagnostics;
using Sitecore.ExperienceForms.Mvc.Models.Fields;

namespace Sitecore.Project.Example.Views.StateDropdown
{
	public class StateDropdown : DropDownListViewModel
	{
		protected override void InitItemProperties(Item item)
		{
			Assert.ArgumentNotNull(item, nameof(item));
			base.InitItemProperties(item);
		}

		protected override void UpdateItemFields(Item item)
		{
			Assert.ArgumentNotNull(item, nameof(item));
			base.UpdateItemFields(item);
		}

		public Dictionary<string, Dictionary<string, string>> Regions()
		{
			if(string.IsNullOrEmpty(DataSource)) return new Dictionary<string, Dictionary<string, string>>();
			Dictionary<string, Dictionary<string, string>> counrtyCollection = new Dictionary<string, Dictionary<string, string>>();
			Item item = Context.Database.GetItem(DataSource);
			var children = item.GetChildren();
			foreach (Item child in children)
			{
				counrtyCollection.Add(child.Fields["Name"].Value, new Dictionary<string, string>());
				foreach (Item desc in child.Children)
				{
					counrtyCollection[child.Fields["Name"].Value].Add(desc.Fields["Name"].Value, desc.Fields["Code"].Value);
				}
			}
			return counrtyCollection;
		} 
	}
}

Create a razor view like this and build project

@using Sitecore.ExperienceForms.Mvc.Html
@model Sitecore.Project.Example.Views.StateDropdown.StateDropdown
@{
	var regions = Model.Regions();
}
<label for="@Html.IdFor(m => Model.Value)" class="@Model.LabelCssClass">@Html.DisplayTextFor(t => Model.Title)</label>
<select id="@Html.IdFor(m => Model.Value)" data-trigger name="@Html.NameFor(m => Model.Value)" class="@Model.CssClass" placeholder="Select Your Work Location" data-sc-tracking="@Model.IsTrackingEnabled" data-sc-field-name="@Model.Name" @Html.GenerateUnobtrusiveValidationAttributes(m => m.Value)>
	<option placeholder>Select Your Work Location</option>
	@foreach (var region in regions)
	{
		<optGroup data-id="@region.Value" label="@region.Key">
			@foreach (var state in region.Value)
			{
				<option value="@state.Value">@state.Key</option>
			}
		</optGroup>
	}
</select>
@Html.ValidationMessageFor(m => Model.Value)

Step 3: Fill out the fields

Fill out the View Path, Model Type and Property Editor(should be Property Editor Settings/DropDown List).  

you are now all set to utilize the custom dropdown list in Forms Designer. Don’t forget to publish the field!

Hope this is helpful. Any questions, please leave a comment.

Happy Sitecoring.