Pages

Wednesday 12 February 2014

Converting Option set into CheckBox

For converting Option set into check box we require the following code. here in the below snippet I have created an option set and multiple line of text. I am storing all the checked options in a Multiple line of text and later again retrieving. Where the multiple line of text field is hidden

Step 1: Create an option set
 

Step 2:- Create a multiline of text field
 

Now add both the field to the form and uncheck the visibility of multipleline of text field from its property

Now add the Following snippet codes

For Onload Code
-------------->
 function Form_onload() {

    var optionset = document.getElementById("optionset_schema_name");
    var multiline = document.getElementById("multiline_schema_name");

    if (optionset != null && multiline != null) {

        optionset.style.display = "none";            //"none" represents override of existing, the optionset field is overrided
        var pdiv = document.createElement('div');    //Create an element
        pdiv.style = 'overflow-y:auto; height:100px; border:2px #6699cc solid; background-color:#ffffff;';

        //overflow y represents vertical scroll bar for options if options are more which will display if options are more.

        optionset.parentNode.appendChild(pdiv);

// Convert option set to check box

        for (var i = 1; i < optionset.options.length; i++) {
            var OptionSetItems = optionset.options[i];
            if (!IsChecked(OptionSetItems.text, multiline)) {
                var addInput = document.createElement('input');
                addInput.type = 'checkbox';
                addInput.style.pixelWidth = 30;
            }
            else {
                var addInput = document.createElement('input');
                addInput.type = 'checkbox';
                addInput.checked = true;
                addInput.style.pixelWidth = 30;
            }

            var addLabel = document.createElement('label');
            addLabel.innerText = OptionSetItems.text;
            var addBr = document.createElement('br');

        
            optionset.nextSibling.appendChild(addInput);
            optionset.nextSibling.appendChild(addLabel);
            optionset.nextSibling.appendChild(addBr);

        }
    }
}


// To check if which check box is selected
function IsChecked(pText, multiline) {
    if (multiline.value != "") {
        var multiline = multiline.value.split(",");
        for (var i = 0; i <multiline.length; i++) {
            if (multiline[i] == pText)
                return true;
        }
    }
    return false;
}







On Save Code
---------------->
 function Form_onSave() {
 
    var optionset = document.getElementById("
optionset_schema_name");
 
    var multiline = "";
    var getInput = optionset.nextSibling.getElementsByTagName("input");

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

//placing all the options into multiline of text
        }
    }
    Xrm.Page.getAttribute("
multiline_schema_name").setValue(multiline);

}



After Adding the code to your entity, the option sets will be displayed as shown  in the below manner.
 

No comments:

Post a Comment