Multi Pick List in CRM 2011/2013

I have a one req. in one of the CRM Projects where user want multiple selection option in Option Set

we can create a Multiple Pick List for Dynamic CRM 2011/2013 form too.


User can enter multiple data from Pick List by Checkbox. This will also work on in major browsers (IE, Firefox, Chrome). See the below screen shot.



Below is the js code:

// var_sc_optionset >>  Provide schema-name for Option Set field
// var_sc_optionsetvalue >> Provide schema-name for field which will
//                          store the multi selected values for Option Set
// OS >> Provide Option Set field object
//       (Ex:- document.getElementById("Option Set field schema-name"))
// OSV >> Provide text field object which will store the
//        multi selected values for Option Set
//       (Ex:- document.getElementById("text field schema-name"))

//Method to convert an optionset to multi select Option Set
function ConvertToMultiSelect(var_sc_optionset, var_sc_optionsetvalue, OS, OSV) {

    if (OS != null && OSV != null) {
        OS.style.display = "none";

        // Create a DIV container
        var addDiv = document.createElement("div");
        addDiv.id = var_sc_optionsetvalue + "_m";
        addDiv.style.width = "100%";
        addDiv.style.height = "80px";
        addDiv.style.background = "#ffffff";
        addDiv.style.color = "white";
        addDiv.style.overflow = "auto";
        addDiv.style.border = "1px #6699cc solid";
        OS.parentNode.appendChild(addDiv);

        // Initialise checkbox controls
        for (var i = 1; i < OS.options.length; i++) {
            var pOption = OS.options[i];
            if (!IsChecked(pOption.innerHTML, OS, OSV)) {
                var addInput = document.createElement("input");
                addInput.type = "checkbox";
                addInput.style.border = "none";
                addInput.style.width = "25px";
                addInput.style.align = "left";
                addInput.style.color = "#000000";
                addInput.onclick = function () {
                    OnSave(OS, var_sc_optionsetvalue);
                    createTable(var_sc_optionsetvalue);
                }

            }
            else {
                var addInput = document.createElement("input");
                addInput.type = "checkbox";
                addInput.checked = "checked";
                addInput.style.border = "none";
                addInput.style.width = "25px";
                addInput.style.align = "left";
                addInput.style.color = "#000000";
                addInput.onclick = function () {
                    OnSave(OS, var_sc_optionsetvalue);
                    createTable(var_sc_optionsetvalue);
                }

            }
            //Create Label
            var addLabel = document.createElement("label");
            addLabel.style.color = "#000000";
            addLabel.innerHTML = pOption.innerHTML;

            var addBr = document.createElement("br"); //it's a 'br' flag

            OS.nextSibling.appendChild(addInput);
            OS.nextSibling.appendChild(addLabel);
            OS.nextSibling.appendChild(addBr);
        }
    }
}

//Supported functions

// Check if it is selected
function IsChecked(pText, OS, OSV) {
    if (OSV.value != "") {
        var OSVT = OSV.value.split(",");

        for (var i = 0; i < OSVT.length; i++) {
           if (OSVT[i] == pText)
              return true;
        }
    }

    return false;
}

// var_sc_optionsetvalue >> Provide schema-name for field which will
//                          store the multi selected values for Option Set
// OS >> Provide Option Set field object
// Save the selected text, this field can also be used in Advanced Find
function OnSave(OS, var_sc_optionsetvalue) {
    var getInput = OS.nextSibling.getElementsByTagName("input");
    var result = "";

    for (var i = 0; i < getInput.length; i++) {
        if (getInput[i].checked) {
            result += getInput[i].nextSibling.innerHTML + ",";
        }
    }

    //save value
    control = Xrm.Page.getControl(var_sc_optionsetvalue);
    attribute = control.getAttribute();
    attribute.setValue(result);
}

function createTable(var_sc_optionsetvalue) {
    //get option set value
    var OptionValue = Xrm.Page.getAttribute(var_sc_optionsetvalue);
    var c_OptionValue = Xrm.Page.getControl(var_sc_optionsetvalue);
    var d_OptionValue = var_sc_optionsetvalue + "_d";

    if (OptionValue.getValue() != null) {

        c_OptionValue.setVisible(true);
        var OptionValueHtml = "<div style=\"overflow-y:auto;width:100%; min-height: 5em; max-height: 1000px;\">";

        OptionValueHtml += "<table style='width:100%;height: 100%;'>";
        var OptionValueV = OptionValue.getValue();

        var OptionValueT = OptionValueV.split(",");
        var cols = 0;
        for (var row = 0; row < OptionValueT.length - 1; row++) {
            OptionValueHtml += "<tr  style='height:20px;'>";
            for (var i = cols; i < cols + 3; i++) {
                OptionValueHtml += "<td style='width:33%;'>";
                if (OptionValueT[i] != null || OptionValueT[i] != undefined) {

                    OptionValueHtml += OptionValueT[i];
                }
                OptionValueHtml += "</td>";
            }
            cols = cols + 3;
            OptionValueHtml += "</tr>";
            if (cols >= OptionValueT.length) {
                break;
            }
        }

        OptionValueHtml += "</table>";
        OptionValueHtml += "</div>";
        document.getElementById(d_OptionValue).innerHTML = OptionValueHtml;
    }
    else {
        c_OptionValue.setVisible(false);
    }
}

Comments

Popular posts from this blog

Workflow Activity Input and Output Parameters and Data Types in MS CRM 2013/15/16

Get Workflow Guid in Javascript using OData query

Convert Plugin to Sandbox mode,