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.
