Cascading Droplist field in Sitecore

Question

I have item in sitecore which contains a field country and region.

Now when I select the country I need to load the related region like cascading dropdown.

Is there any possiblity of creating custom fields type for cascading dropdown

Answer 1

Yes, you can implement a custom field. You have several ways to do this. One of our project I used iframe field type for it. In my opinion this is the easiest way for complex custom fields. Actually I wrote a blogpost about the basics 2 days ago. Here is the whole solution which contains a similar custom field (for Sitecore 8.2 update 2, I gues it works for Sitecore 8.0 too).

So basically you can build up your MVC structure and use this in your iframe. You need to register your root:

using Sitecore.Pipelines;
using System.Web.Mvc;
using System.Web.Routing;

namespace MyProject.Pipelines
{
    public class RegisterRoutes
    {
        public void Process(PipelineArgs args)
        {
            RouteTable.Routes.MapRoute("SimpleField", "myFields/SimpleField/Render", new { controller = "SimpleField", action = "Render" });
        }
    }
}

Controller:

using Sitecore.Configuration;
using Sitecore.Data;
using System.Web.Mvc;

namespace MyProject.Controllers
{
    public class SimpleFieldController : Controller
    {
        public ActionResult Render()
        {
            return View("~/Views/SimpleField/Render.cshtml");
        }
    }
}

View:

<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,300italic,400italic,600italic,700italic,300,600,700,800" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/sitecore/shell/themes/standard/default/Default.css" />
<link rel="stylesheet" type="text/css" href="/sitecore/shell/themes/standard/default/Content Manager.css" />
<style>
    #ll-fields {
        padding: 10px 10px 10px 10px;
    }
</style>
<div id="ll-fields" class="scEditorSections">
    <div class="scEditorFieldMarker">
        <div class="scEditorFieldLabel">Text:</div>
        <div>
            <input type="text" id="ll-text" class="scContentControl scCombobox" />
        </div>
    </div>
</div>

<script type="text/javascript" src="/scripts/field/field-base.js"></script>
<script type="text/javascript" src="/scripts/field/text-field.js"></script>
<script>
    textField.getValue();

    document.getElementById('ll-text').onchange = function () {
        textField.setValue();
    };

    textField.updateIframeDisplaySettings();
</script>

field-base.js:

function fieldBase () {}

fieldBase.getParentIframe = function () {
    var iframes = window.parent.document.getElementsByTagName('iframe');
    var parent;
    Array.prototype.forEach.call(iframes, function (el, i) {
        if (fieldBase.getIframeDocument(el) === window.document) {
            parent = el;
            return;
        }
    });
    return parent;
};

fieldBase.getIframeDocument = function (iframe) {
    return iframe.contentDocument || iframe.contentWindow.document;
};

text-field.js:

function textField() { }

textField.setValue = function () {
    fieldBase.getParentIframe().setAttribute('sc_value', document.getElementById('ll-text').value);
}

textField.getValue = function () {
    document.getElementById('ll-text').value = fieldBase.getParentIframe().getAttribute('sc_value');
}

textField.updateIframeDisplaySettings = function () {
    var parentIframe = fieldBase.getParentIframe();
    parentIframe.style = "height: 87px";
    parentIframe.scrolling = "no";
}

So this is just a base idea. But from this point you can do everything what you want in your Controller and View. You can check the github solution what I linked above.