Sitecore Composite Custom Fields

Most of us who are working in Sitecore might have implemented Sitecore custom fields in content editor.  Let’s make it a bit complex by implementing composite custom fields.

Requirement

We need to have two dropdowns in Sitecore Content Editor. If user changes the first dropdown, then the second dropdown values should be populated based on the selection of the first dropdown. Looks like simple right? But it’s not. I have tried with normal asp.net way (Using ASP.NET AutoPostBack) but no luck. It seems Sitecore can’t handle custom dropdown’s postback event properly. Then I thought why not use Jquery/JavaScript to populate the second dropdown.

Let’s do some coding.

Custom Control Class

This custom control consists of
two ComboBox one hidden TextBox (To get and set the value of the whole control) and one Js file to handle onchange event of the first ropDown. The code is below.

namespace SC.CustomFields.ANFieldsnamespace SC.CustomFields.ANFields
{    
    public class MakeList : Sitecore.Web.UI.HtmlControls.Control    
    {        
        protected override void OnLoad(EventArgs e)        
        {            
            if (!Sitecore.Context.ClientPage.IsEvent)            
            { 
                //Add hidden field for value                
                var txtFieldValue = new Sitecore.Shell.Applications.ContentEditor.Text();                
                txtFieldValue.ID = "txtFieldValue";                
                txtFieldValue.Attributes.Add("style", "display:none;"); 
                Controls.Add(txtFieldValue);

                //get the current value                
                var currentValue = this.Value;
                txtFieldValue.Value = currentValue;
                string selectedMake = "";
                string selectedModel = "";
                if (!string.IsNullOrEmpty(currentValue))
                {                    
                    var values = currentValue.Split('|');
                    if (values.Length == 2)
                    {                        
                        selectedMake = values[0];
                        selectedModel = values[1]; 
                    }
                    else
                    {                        
                         selectedMake = currentValue;
                    }
                }

                //add make dropdown
                var ddlMake = new Combobox();
                var makes = GetMakeList();
                foreach (var make in makes)
                {                    
                    ddlMake.Controls.Add(new ListItem { Value = make.Value, Header = make.Key, Selected = (selectedMake == make.Value) });
                }
                Controls.Add(ddlMake);
                ddlMake.ID = "ddlMake";

                ///Add Model dropdown
                var ddlModel = new Combobox();
                Controls.Add(ddlModel);
                ddlModel.ID = "ddlModel"; 

                //Add JS code to handle populating model dropdown
                var scriptContainer = new HtmlGenericControl("script");
                scriptContainer.Attributes.Add("type", "text/javascript");
                scriptContainer.Attributes.Add("src", "/scripts/CustomFields.js");
                Controls.Add(scriptContainer);

                if (!string.IsNullOrEmpty(selectedMake))
                {
                    var models = GetModelList(selectedMake);
                    foreach (var model in models)
                    {                        
                        ddlModel.Controls.Add(new ListItem { Value = model.Value, Header = model.Key, Selected = (selectedModel == model.Value) });
                    }
                }
            }
            else
            {                
                this.Value = ((Sitecore.Shell.Applications.ContentEditor.Text)FindControl("txtFieldValue")).Value;
            }
        }
    }
}

The External Custom Field Js File:

Sitecore uses Jquery as well. So to access Jquery methods inside sitecore content editor use $sc

$sc(window).load(function () {
    //Add Make dropdown change vent
    $sc(document).on("change", "#ddlMake", function () {
        var make = $sc("#ddlMake").val();
        var apiUrl = "/api/sitecore/model/GetModelsByMake/?make=" +  make;

        $sc.getJSON(apiUrl, function (data) {
            alert(data.length);
            var modelDropDown = $sc("#ddlModel");
            modelDropDown.empty();

            //populate option values
            $sc.each(data, function (index, item) { 
                modelDropDown.append($sc("<option>", { value: item.Value, text: item.Key }, "</option>"));
            });

            setMakeModelValue();
         });
    });

    //Set value in hidden fields
    $sc(document).on("change", "#ddlModel", function () {
        setMakeModelValue();
    });
});

function setMakeModelValue() {
    var val = $sc("#ddlMake").val() + "|" + $sc("#ddlModel").val();
    $sc("#txtFieldValue").val(val);
}

Register CustomField in Core Database:

Here is the way how to register custom fields in sitecore core database. It needs to be added under system >> Field Types. You need to provide assembly

name and class name. See the screen shot below

 

Use the custom Fields in Template:

Content Screenshot:

So when I change make dropdown its populating model dropdown through ajax.