3

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

1
  • Did my answer worked for you? If not please let me know, if yes please mark it as an answer. Aug 7 '19 at 14:56
2

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.

1
  • 1
    @keerthi, If it resolves your problem please vote up + mark as 'answered' :) Apr 8 '17 at 14:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.