Multi Select Checkboxes – Custom Controls-Part2 in CRM 2011

Some days back I have a Requirement of making Custom checkbox of Language like showing below.

There are some values of Language as shown above.and there is one more checkbox called Other and when i click check on Other Checkbox the Textbox value of Other will be visible.and you can specify the Other Language value.and if you uncheck the Other checkbox the Textbox of Other will be disappear.

First DownLoad this two Javascript and Add this two in Form Properties.
CheckboxJavascript Function


///<reference path="..\IntelliSense\XrmPage-vsdoc.js"/>
if (typeof (OptionSetToMultiSelect) == "undefined")
{ OptionSetToMultiSelect = {}; }
OptionSetToMultiSelect.Functions = {

    ToMultiSelect: function (var_sc_optionset, var_sc_optionsetvalue, required, columns) {

        var OS = document.getElementById(var_sc_optionset);
        var OSV = document.getElementById(var_sc_optionsetvalue);

        if (OS != null && OSV != null) {
            if (columns == null)
                columns = 1;
            OS.style.display = "none";
            if (required) {
                OS.parentNode.parentNode.firstChild.appendChild(document.createElement('<IMG class=ms-crm-ImageStrip-frm_required alt=Required src="/_imgs/imagestrips/transparent_spacer.gif?ver=-137896071">'));
            }
            OSV.parentNode.parentNode.style.display = 'none'

            // Create a DIV container
            var divHight = (OS.options.length > 4 ? 25 : (OS.options.length - 1 * 20)) + 30;
            var addDiv = document.createElement("<div style='overflow-y:auto; height:" + divHight + "px; border:1px #cecece solid;' />");
            OS.parentNode.appendChild(addDiv);

            var count = 0;
            var totalPerColumn = (OS.options.length - 1) / columns;
            OS.nextSibling.appendChild(document.createElement("<div style='width:25;float:left;' />"))

            // Initialise checkbox controls
            for (var i = 1; i < OS.options.length; i++) {
                var pOption = OS.options[i];

                if (!OptionSetToMultiSelect.Functions.IsChecked(pOption.text, OS, OSV))
                    var addInput = document.createElement("<input  type='checkbox' id='" + var_sc_optionset + "_custom' style='border:none; width:25px; align:left;' value='" + pOption.text + "' />");
                else
                    var addInput = document.createElement("<input  type='checkbox' id='" + var_sc_optionset + "_custom' checked='checked' style='border:none; width:25px; align:left;' value='" + pOption.text + "'  />");

                addInput.onclick = function () {
                    var valuesField = Xrm.Page.getAttribute(var_sc_optionsetvalue);
                    var customFields = OS.nextSibling.getElementsByTagName("input");
                    var values = "";

                    for (var j = 0; j < customFields.length; j++) {
                        if (customFields[j].checked) {
                            values += customFields[j].value;
                            values += ";"
                        }
                    }
                    values = values.substring(0, values.length - 1);
                    valuesField.setValue(values);
                    EnableOtherLanguageText();
                };

                var label = document.createElement("<label style='width:100px' />");
                label.appendChild(addInput)
                var labelText = document.createElement("<span style='white-space:nowrap;'/>");
                labelText.innerText = pOption.text;
                label.appendChild(labelText)

                if (count >= totalPerColumn) {
                    OS.nextSibling.appendChild(document.createElement("<div style='width:70px;float:left;' />"))
                    count = 0;
                }

                OS.nextSibling.lastChild.appendChild(label);
                count++;
            }

            if (required) {
                OptionSetToMultiSelect.Functions.OptionSetToMultiSelectRequiredFields.push(var_sc_optionsetvalue);
            }
        }
    },

    // Check if it is selected
    IsChecked: function (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;
    },

    // Save the selected text, this field can also be used in Advanced Find
    OnSave: function (var_sc_optionsetvalue, var_sc_optionset, required) {
        //save value
        control = Xrm.Page.getControl(var_sc_optionsetvalue);
        valueControl = Xrm.Page.getControl(var_sc_optionsetvalue).getAttribute()

        if (required && valueControl.getValue() == null) {
            alert("You must provide a value for " + var_sc_optionset);
            event.returnValue = false;
            return false;
        }
    },
    CheckAllMultiCheckboxWithLayersRequiredFields: function () {


        for (var i = 0; i < OptionSetToMultiSelect.Functions.OptionSetToMultiSelectRequiredFields.length; i++) {
            var valueControl = Xrm.Page.getControl(OptionSetToMultiSelect.Functions.OptionSetToMultiSelectRequiredFields[i]);
            var isDisabled = valueControl.getDisabled();
            if (valueControl.getAttribute().getValue() == null && !isDisabled) {
                alert("You must provide a value for " + valueControl.getLabel().replace("Values", ""));
                OptionSetToMultiSelect.Functions.OptionSetToMultiSelectValidationTriggered = true;
                event.returnValue = false;
                return false;
            }
        }
    },
    OptionSetToMultiSelectRequiredFields: new Array(),
    OptionSetToMultiSelectValidationTriggered: false
}


EnableOther Language Function


function EnableOtherLanguageText(){
var LanguageValue=Xrm.Page.data.entity.attributes.get("new_languagevalue").getValue();
var OtherText = Xrm.Page.ui.controls.get("new_other");
var SetText = Xrm.Page.data.entity.attributes.get("new_other");
  
if(LanguageValue != null && LanguageValue != '')
{
if (LanguageValue.indexOf("Other") !=-1) {
OtherText.setVisible(true);          
    }
else
{
SetText.setValue('');
OtherText.setVisible(false);
}

}
else
{
SetText.setValue('');
OtherText.setVisible(false);
}
}


Now Add Two Function in Form Onload and One Function in OnSave event of Form as Shown in Below.

Form On load Event

Form On Save Event

Set Function Name

Multi Select Checkboxes – Custom Controls-Part1 in CRM 2011

Multi select check boxes control is a very essential control in web forms. Some times client needs exactly the same control in CRM forms as well. When there a requirement is to develop a dynamic multi select checkboxes control its really difficult for the developer to implement the feature in CRM. CRM developers will get the little relief with this post.

An Option Set control and a Multi line textbox are used to create the Multi Select Checkboxes control. Labels of the checkboxes can be stored in the optionset control as items. Selected values will be saved in the multi line textbox seperated by semi colons.

Control looks like this in the CRM form after implementing it.

Follow the steps below to work with Multi Select Checkbox control.

[1] Create a OptionSet control and add items to the option set. Items are the checkbox captions in the control.

[2] Create a Multi line textbox. This will hold all the selected item values.

[3] Add the MultiSelectCheckboxLibrary javascript library to the resources and add it to the form.

Download Multi Select Checkboxes Library Here

[4] Add “OptionSetToMultiSelect.Functions.ToMultiSelect” with relevant parameters to OnLoad event of the form

ToMultiSelect: function (var_sc_optionset, var_sc_optionsetvalue, required, column)

var_sc_optionset – Name of the option set field

var_sc_optionsetvalue – Name of the multiline textbox
required – Whether the new field(Multi Select Checkboxes control) is required or not
columns – Number of columns to be appeared in the control for checkboxes

E.g. 'new_hobby','new_hobbyvalues',true,1

[5] Add “OptionSetToMultiSelect.Functions.CheckAllMultiCheckboxWithLayersRequiredFields” to OnSave event of the form

// Function to be invoked page OnSave
CheckAllMultiCheckboxWithLayersRequiredFields: function ()