locked
CRM 2013 Online - Java script - multiselect checkboxes - script not working RRS feed

  • Question

  • Hi all,

    trying to implement a java script which I found online. I have no knowledge of scripting/coding whatsoever.

    Tried this, but gave me errors: http://meghshyam.wordpress.com/2013/10/16/multi-checkbox-control-in-crm-2013/
    Then found this: I found the original code here: http://crmjavascripts.blogspot.com/2013/11/replacement-of-soap-in-crm-for-retrieve.html

    Code:

     function Form_onload() {
    
        var _crtlSociaklNW = document.getElementById("new_interesse");
        var _crtlTextSocial = document.getElementById("new_interesse_value");
    
        if (_crtlSociaklNW != null && _crtlTextSocial != null) {
    
            _crtlSociaklNW.style.display = "none";
            var pdiv = document.createElement('div');
            pdiv.style = 'overflow-y:auto; height:100px; border:1px #6699cc solid;          background-color:#ffffff;';
            _crtlSociaklNW.parentNode.appendChild(pdiv);
            ///////////////////////////////////////////////////////////////////////////
    ///////////////////// Convert option set to check box//////////////////////
    ///////////////////////////////////////////////////////////////////////////
            for (var i = 1; i < _crtlSociaklNW.options.length; i++) {
                var OptionSetItems = _crtlSociaklNW.options[i];
                if (!IsChecked(OptionSetItems.text, _crtlTextSocial)) {
                    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');
                var formname = Xrm.Page.getAttribute("new_name").getValue();
    
                _crtlSociaklNW.nextSibling.appendChild(addInput);
                _crtlSociaklNW.nextSibling.appendChild(addLabel);
                _crtlSociaklNW.nextSibling.appendChild(addBr);
    
            }
        }
    }
    ///////////////////////////////////////////////////////////////////////////
    ///////////////// To check if which check box is selected//////////////////
    ///////////////////////////////////////////////////////////////////////////
    function IsChecked(pText, _crtlTextSocial) {
        if (_crtlTextSocial.value != "") {
            var _crtlTextSocial = _crtlTextSocial.value.split(",");
            for (var i = 0; i < _crtlTextSocial.length; i++) {
                if (_crtlTextSocial[i] == pText)
                    return true;
            }
        }
        return false;
    }
    ///////////////////////////////////////////////////////////////////////////
    ///function to save the selected Items from check box list to TextSocial///
    ///////////////////////////////////////////////////////////////////////////
    function Form_onSave() {
      
        var _crtlSociaklNW = document.getElementById("new_interesse");
      
        var txtSocialValue = "";
        var getInput = _crtlSociaklNW.nextSibling.getElementsByTagName("input");
    
        for (var i = 0; i < getInput.length; i++) {
            if (getInput[i].checked) {
                txtSocialValue += getInput[i].nextSibling.innerText + ",";
            }
        }
        Xrm.Page.getAttribute("new_interesse_value").setValue(txtSocialValue);
    
    }

    So what I did was just changed the values to my fields.
    My optionset = new_interesse
    My textfield = new_interesse_value

    I don't get errors when loading, but it doesn't look anything like it does on the example
    (http://crmjavascripts.blogspot.com/2013/11/replacement-of-soap-in-crm-for-retrieve.html)
    It just stays a normal option set..

    What is still wrong?

    Thanks!

    Thursday, October 16, 2014 1:12 PM

Answers

  • Hi LunAds,

    Please follow the below steps:

    1. Create a optionset field and one multitext field with same name + suffix as '_value'.

    2. create a web resource with following code

    //This function is for OnLoad
    //fieldName==> 'new_fieldname'
    //Create a multitext field with same name + suffix as '_value' to store the values and hide it
    function CheckBox_OnLoad(fieldName) {
    var optionset = "";
    var optionsetvalue = "";
    var OS1 = "";
    var OSV2 = "";
    var OS = "";
    var OSV = "";
    var oAttributes = Xrm.Page.data.entity.attributes.get(fieldName);
    optionset = oAttributes.getName();
    optionsetvalue = oAttributes.getName() + "_value";
    
    OS = document.getElementById(optionset);
    if (Xrm.Page.getControl(optionsetvalue) != null || Xrm.Page.getControl(optionsetvalue) != undefined) {
    Xrm.Page.getControl(optionsetvalue).setVisible(true);
    
    } //end of if
    OSV = document.getElementById(optionsetvalue);
    if (OS != null) {
    if (OSV != null) {
    ConvertToMultiCheckbox(optionset, optionsetvalue, OS, OSV);
    if (Xrm.Page.getControl(optionsetvalue) != null || Xrm.Page.getControl(optionsetvalue) != undefined) {
    Xrm.Page.getControl(optionsetvalue).setVisible(false); 
    document.getElementById(optionset + "_c").style.display = 'Inline';
    //document.getElementById(optionsetvalue + "_d").style.display = 'none';
    } //end of if
    } //end of if
    } //end of if
    }
    
    function ConvertToMultiCheckbox(var_new_optionset, var_new_optionsetvalue, OS, OSV) {
    if (OS != null && OSV != null) {
    
    Xrm.Page.getControl(var_new_optionsetvalue).setVisible(false);
    //Create the div container for the checkbox list
    var divid = "div_" + var_new_optionset;
    var DivElement = "<div id='" + divid + "' title='" + var_new_optionset + "' style='overflow-y:auto; height:120px; border:1px #6699cc solid; background-color:#ffffff; padding-right:10px; padding-left:10px; ' />"
    
    var DivExist = document.getElementById(divid);
    if (DivExist != null || DivExist != undefined) {
    var div = document.getElementById(divid);
    div.parentNode.removeChild(div);
    
    CreateDiv(var_new_optionset, var_new_optionsetvalue, OS, OSV, DivElement, divid)
    }
    else {
    CreateDiv(var_new_optionset, var_new_optionsetvalue, OS, OSV, DivElement, divid)
    }
    }
    }
    
    function CreateDiv(var_new_optionset, var_new_optionsetvalue, OS, OSV, DivElement, divid) {
    // Create a DIV container
    try {
    var addDiv = document.createElement(DivElement);
    } //end of try
    catch (e) {
    var addDiv = document.createElement("div");
    addDiv.setAttribute("id", divid);
    addDiv.setAttribute("title", var_new_optionset);
    addDiv.setAttribute("style", "overflow-y:auto; height:120px; border:1px #6699CC solid; background-color:#F6F8FA; padding-right:10px; padding-left:10px; ");
    } //end of catch
    
    OS.parentNode.appendChild(addDiv);
    // Initialise multi checkbox controls
    var OSO = Xrm.Page.getAttribute(var_new_optionset);
    var options = OSO.getOptions();
    for (var i in options) {
    var pOption = options[i];
    try {
    var OSVText = Xrm.Page.getAttribute(var_new_optionsetvalue).getValue();
    var isChecboxChecked = IsChecked(pOption.text, OS, OSVText);
    if (isChecboxChecked == true && pOption.text != "") {
    var addInput = document.createElement("<input type='checkbox' checked='checked' style='border:none; width:25px; align:left;' />");
    }
    else if (pOption.text != "") {
    var addInput = document.createElement("<input type='checkbox' style='border:none; width:25px; align:left;' />");
    } //end of if
    } //end of try
    catch (e) {
    var OSVText = Xrm.Page.getAttribute(var_new_optionsetvalue).getValue();
    var isChecboxChecked = IsChecked(pOption.text, OS, OSVText);
    if (isChecboxChecked == true && pOption.text != "") {
    var addInput = document.createElement("input");
    addInput.setAttribute("type", "checkbox");
    addInput.setAttribute("checked", "checked");
    addInput.setAttribute("style", "border:none; width:25px; align:left;");
    }
    //end of if
    else if (pOption.text != "") {
    var addInput = document.createElement("input");
    addInput.setAttribute("type", "checkbox");
    addInput.setAttribute("style", "border:none; width:25px; align:left;");
    }
    var addLabel = document.createElement("label");
    var pOptionValue = pOption.value;
    addLabel.innerText = pOption.text;
    var addBr = document.createElement("br"); //it's a 'br' flag
    OS.nextSibling.appendChild(addInput);
    OS.nextSibling.appendChild(addLabel);
    OS.nextSibling.appendChild(addBr);
    
    } //end of catch
    
    Xrm.Page.getControl(var_new_optionset).setVisible(true);
    Xrm.Page.getControl(var_new_optionset).setVisible(false);
    } //end of for
    }
    
    function IsChecked(pValue, OS, OSV) {
    var result = false;
    if (OSV != "" && OSV != null) {
    var OSVT = OSV.split(";");
    for (var i = 0; i < OSVT.length; i++) {
    if (OSVT[i] == pValue && OSVT[i] != "") {
    result = true;
    break;
    }
    else
    { result = false; }
    }
    }
    return result;
    }
    
    //This function is for Onsave
    function Multiselect_OnSave(fieldName) {
    
    var optionset = "";
    var optionsetvalue = "";
    var OS = "";
    var OSV = "";
    
    var oAttributes = Xrm.Page.data.entity.attributes.get(fieldName);
    optionset = oAttributes.getName();
    optionsetvalue = oAttributes.getName() + "_value";
    OS = document.getElementById(optionset);
    OSV = document.getElementById(optionsetvalue);
    
    if (OS != null) {
    if (OSV != null) {
    executeOnSave(OS, optionsetvalue);
    }
    }
    }
    
    function executeOnSave(OS, var_new_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.innerText + ";";
    }
    }
    
    //save value
    
    control = Xrm.Page.getControl(var_new_optionsetvalue);
    attribute = control.getAttribute();
    attribute.setValue(result);
    }

    3. On load call function CheckBox_OnLoad and pass parameter as "yourOptionsetfield" and on Save call function Multiselect_OnSave  and pass parameter as "yourOptionsetfield" .

    It will work fine. tested the code.

    Saad


    Regards, Saad

    • Marked as answer by LunAds Monday, October 20, 2014 11:23 AM
    Monday, October 20, 2014 7:17 AM
  • Thanks for your time and help so far!
    I've did what you said but it's not working, I'm pretty sure I'm doing something wrong in configuring the form properties.
    Here's the whole thing:

    1. Optionset + name = new_interesse

    2. Textfield, multiple lines + name = new_interesse_value


    • Marked as answer by LunAds Monday, October 20, 2014 11:23 AM
    Monday, October 20, 2014 8:04 AM
  • 3. webresource + name = new_interesse

    Code:
    (I did not change anything in the code, or do I have to insert my fieldnames somewhere? I don't think so since you have to pass the parameters using the form properties, right?)

    //This function is for OnLoad
    //fieldName==> 'new_fieldname'
    //Create a multitext field with same name + suffix as '_value' to store the values and hide it
    function CheckBox_OnLoad(fieldName) {
    var optionset = "";
    var optionsetvalue = "";
    var OS1 = "";
    var OSV2 = "";
    var OS = "";
    var OSV = "";
    var oAttributes = Xrm.Page.data.entity.attributes.get(fieldName);
    optionset = oAttributes.getName();
    optionsetvalue = oAttributes.getName() + "_value";
    
    OS = document.getElementById(optionset);
    if (Xrm.Page.getControl(optionsetvalue) != null || Xrm.Page.getControl(optionsetvalue) != undefined) {
    Xrm.Page.getControl(optionsetvalue).setVisible(true);
    
    } //end of if
    OSV = document.getElementById(optionsetvalue);
    if (OS != null) {
    if (OSV != null) {
    ConvertToMultiCheckbox(optionset, optionsetvalue, OS, OSV);
    if (Xrm.Page.getControl(optionsetvalue) != null || Xrm.Page.getControl(optionsetvalue) != undefined) {
    Xrm.Page.getControl(optionsetvalue).setVisible(false); 
    document.getElementById(optionset + "_c").style.display = 'Inline';
    //document.getElementById(optionsetvalue + "_d").style.display = 'none';
    } //end of if
    } //end of if
    } //end of if
    }
    
    function ConvertToMultiCheckbox(var_new_optionset, var_new_optionsetvalue, OS, OSV) {
    if (OS != null && OSV != null) {
    
    Xrm.Page.getControl(var_new_optionsetvalue).setVisible(false);
    //Create the div container for the checkbox list
    var divid = "div_" + var_new_optionset;
    var DivElement = "<div id='" + divid + "' title='" + var_new_optionset + "' style='overflow-y:auto; height:120px; border:1px #6699cc solid; background-color:#ffffff; padding-right:10px; padding- ' />"
    
    var DivExist = document.getElementById(divid);
    if (DivExist != null || DivExist != undefined) {
    var div = document.getElementById(divid);
    div.parentNode.removeChild(div);
    
    CreateDiv(var_new_optionset, var_new_optionsetvalue, OS, OSV, DivElement, divid)
    }
    else {
    CreateDiv(var_new_optionset, var_new_optionsetvalue, OS, OSV, DivElement, divid)
    }
    }
    }
    
    function CreateDiv(var_new_optionset, var_new_optionsetvalue, OS, OSV, DivElement, divid) {
    // Create a DIV container
    try {
    var addDiv = document.createElement(DivElement);
    } //end of try
    catch (e) {
    var addDiv = document.createElement("div");
    addDiv.setAttribute("id", divid);
    addDiv.setAttribute("title", var_new_optionset);
    addDiv.setAttribute("style", "overflow-y:auto; height:120px; border:1px #6699CC solid; background-color:#F6F8FA; padding-right:10px; padding- ");
    } //end of catch
    
    OS.parentNode.appendChild(addDiv);
    // Initialise multi checkbox controls
    var OSO = Xrm.Page.getAttribute(var_new_optionset);
    var options = OSO.getOptions();
    for (var i in options) {
    var pOption = options[i];
    try {
    var OSVText = Xrm.Page.getAttribute(var_new_optionsetvalue).getValue();
    var isChecboxChecked = IsChecked(pOption.text, OS, OSVText);
    if (isChecboxChecked == true && pOption.text != "") {
    var addInput = document.createElement("<input type='checkbox' checked='checked' style='border:none; width:25px; align:left;' />");
    }
    else if (pOption.text != "") {
    var addInput = document.createElement("<input type='checkbox' style='border:none; width:25px; align:left;' />");
    } //end of if
    } //end of try
    catch (e) {
    var OSVText = Xrm.Page.getAttribute(var_new_optionsetvalue).getValue();
    var isChecboxChecked = IsChecked(pOption.text, OS, OSVText);
    if (isChecboxChecked == true && pOption.text != "") {
    var addInput = document.createElement("input");
    addInput.setAttribute("type", "checkbox");
    addInput.setAttribute("checked", "checked");
    addInput.setAttribute("style", "border:none; width:25px; align:left;");
    }
    //end of if
    else if (pOption.text != "") {
    var addInput = document.createElement("input");
    addInput.setAttribute("type", "checkbox");
    addInput.setAttribute("style", "border:none; width:25px; align:left;");
    }
    var addLabel = document.createElement("label");
    var pOptionValue = pOption.value;
    addLabel.innerText = pOption.text;
    var addBr = document.createElement("br"); //it's a 'br' flag
    OS.nextSibling.appendChild(addInput);
    OS.nextSibling.appendChild(addLabel);
    OS.nextSibling.appendChild(addBr);
    
    } //end of catch
    
    Xrm.Page.getControl(var_new_optionset).setVisible(true);
    Xrm.Page.getControl(var_new_optionset).setVisible(false);
    } //end of for
    }
    
    function IsChecked(pValue, OS, OSV) {
    var result = false;
    if (OSV != "" && OSV != null) {
    var OSVT = OSV.split(";");
    for (var i = 0; i < OSVT.length; i++) {
    if (OSVT[i] == pValue && OSVT[i] != "") {
    result = true;
    break;
    }
    else
    { result = false; }
    }
    }
    return result;
    }
    
    //This function is for Onsave
    function Multiselect_OnSave(fieldName) {
    
    var optionset = "";
    var optionsetvalue = "";
    var OS = "";
    var OSV = "";
    
    var oAttributes = Xrm.Page.data.entity.attributes.get(fieldName);
    optionset = oAttributes.getName();
    optionsetvalue = oAttributes.getName() + "_value";
    OS = document.getElementById(optionset);
    OSV = document.getElementById(optionsetvalue);
    
    if (OS != null) {
    if (OSV != null) {
    executeOnSave(OS, optionsetvalue);
    }
    }
    }
    
    function executeOnSave(OS, var_new_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.innerText + ";";
    }
    }
    
    //save value
    
    control = Xrm.Page.getControl(var_new_optionsetvalue);
    attribute = control.getAttribute();
    attribute.setValue(result);
    }

    4. Form properties:


    • Marked as answer by LunAds Monday, October 20, 2014 11:23 AM
    Monday, October 20, 2014 8:04 AM
  • 5. Properties on load:

    6. Properties On Save:


    • Marked as answer by LunAds Monday, October 20, 2014 11:23 AM
    Monday, October 20, 2014 8:04 AM
  • 5. Properties on load:

    6. Properties On Save:


    Pass your parameters within double quotes on both onload and on save events "new_interesse"

    Regards, Saad


    • Edited by Mohd Saad Monday, October 20, 2014 8:50 AM
    • Marked as answer by LunAds Monday, October 20, 2014 11:24 AM
    Monday, October 20, 2014 8:46 AM
  • Well, unfortunately unbelievable solution.
    The exact and correct solution are the steps I posted above, the 3 subsequent posts.
    Saad and me reviewed all settings and we concluded that they were correct.

    On one moment we didn't know if it was possible to customize a 'quick insert' form.
    (for example: i have a sub grid on my account form, where I can 'quickly insert' a new contact person)
    This was quickly tested by making another field 'test'.
    We then placed the field on the quick insert form, and believe it or not, all of the sudden the checkboxes appeared.

    To even more 'test' the system, we removed the test field, and gone were the checkboxes..
    So in the end I solved it by creating a random text field, hide it, and then it shows the checkboxes..
    Very strange but it worked!

    Thanks a lot Saad!

    Ps: please do note that you have to pass the parameters, on the form properties, with "parameter"

    • Marked as answer by LunAds Monday, October 20, 2014 11:24 AM
    Monday, October 20, 2014 11:23 AM

All replies

  • Hi Lunads,

    This is all unsupported. Because you are making HTML injection. Instead of using multiselect , you can use one to many relationship. And you can add your sub-entity as Subgrid in your parent form. This will meet your needs.


    If you find this post helpful then please Vote as Helpful and Mark As Answer. Thanks and Regards, Polat Aydın http://crmpolataydin.wordpress.com

    Thursday, October 16, 2014 1:36 PM
  • I hoenstly do not understand what you're saying, but that's due to my lack of knowledge of CRM.
    I know what the sub-grids are and how to add them etc...
    But what do you want me to do with it once I added a subgrid?
    Thursday, October 16, 2014 1:50 PM
  • Hi,

    Instead of using multiedit , create an entity.After that build a relationship of your parent entity and this entity that you created. You can add this entity as Subgrid. Than  create records in child entity(added as subgrid). This is the exactly same logic with multiple selection. 

    You can refer from this url:

    https://social.msdn.microsoft.com/Forums/en-US/2db47a59-165d-40c9-b995-6b3262b949eb/how-to-convert-a-optionset-into-multi-selection-picklist-in-crm-2011-using-javasacript?forum=crmdevelopment


    If you find this post helpful then please Vote as Helpful and Mark As Answer. Thanks and Regards, Polat Aydın http://crmpolataydin.wordpress.com

    Thursday, October 16, 2014 2:04 PM
  • Hi,

    Try this code. It's unsupported but working fine in crm 2011 UR16.

    // 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
    // OSV >> Provide text field object which will store the multi selected values for Option Set
    
    //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";
      Xrm.Page.getControl(var_sc_optionsetvalue).setVisible(false);
    
      // Create a DIV container
    //  var addDiv = document.createElement("<div style='overflow-y:auto; height:80px; border:1px #6699cc solid; background-color:#ffffff;' />");
         var addDiv = document.createElement("div");
    
           addDiv.style.overflowY = "auto";
    
           addDiv.style.height = "80px";
    
           addDiv.style.border = "1px #6699cc solid";
    
           addDiv.style.background = "#ffffff";
    
      OS.parentNode.appendChild(addDiv);
    
      // Initialise checkbox controls
      for( var i = 1; i < OS.options.length; i++ )
      {
        var pOption = OS.options[i];
        if( !IsChecked( pOption.text , OS, OSV) ){
     //     var addInput = document.createElement("<input type='checkbox' style='border:none; width:25px; align:left;' />" );
    	
          var addInput = document.createElement("input" );
     	addInput.setAttribute("type","checkbox");
       	addInput.setAttribute("style","border:none; width:25px; align:left;");
     }
        else {
     //     var addInput = document.createElement("<input type='checkbox' checked='checked' style='border:none; width:25px; align:left;' />" );
    
    	var addInput = document.createElement("input" );
     	addInput.setAttribute("type","checkbox");
     	addInput.setAttribute("checked","checked");
     	addInput.setAttribute("style","border:none; width:25px; align:left;");
    
    }
     //   var addLabel = document.createElement( "<label />");
      	var addLabel = document.createElement( "label");
    	addLabel.innerText = pOption.text;
    
        // var addBr = document.createElement( "<br/>"); //it's a 'br' flag
    	
    	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.innerText + ";";
          }
        }
    
        //save value
        control = Xrm.Page.getControl(var_sc_optionsetvalue);
        attribute = control.getAttribute();
        attribute.setValue(result);
    
      }


    Regards, Saad

    Friday, October 17, 2014 5:33 AM
  • hi,

    if you are not a technical person, please see this.

    http://slalomdotcom.wordpress.com/2011/05/23/multi-select-option-sets-in-dynamics-crm/


    in second part of the blog, there is a managed solution that you could use.

    I agree that a subgrid maybe the best option. This code works in CRM 2013 also. This solution is unsupported.

    regards

    Jithesh

    Friday, October 17, 2014 6:57 AM
  • HI Jithesh,

    The code in your link is not updated and have some issues. I have updated and it and posted it above.


    Regards, Saad

    Friday, October 17, 2014 7:02 AM
  • none of the code above works for CRM 2013 Online.

    I'd like to use the sub-grid as mentioned above, but need some more explanetion please.

    Friday, October 17, 2014 10:54 AM
  • HI,

    Have you passed parameters as shown in this link.

    For Subgrid you need to create a new entity and create a new lookup of parent entity on this entity. Then create a subgrid on parent form.


    Regards, Saad

    Friday, October 17, 2014 11:01 AM
  • yes, i receive the error something to do with 'length'...
    Friday, October 17, 2014 11:20 AM
  • post your script error here.

    Regards, Saad

    Friday, October 17, 2014 11:24 AM
  • free translated:
    An error occured with the customized event for this field.
    Field: window
    Event: onload

    Error: cannot retrieve the property 'length' from a non-defined reference or a reference to an empty value.

    Friday, October 17, 2014 11:46 AM
  • Please try this.


    Regards, Saad

    Friday, October 17, 2014 1:05 PM
  • Images aren't visible/not loading + can't download the .zip file
    • Edited by LunAds Friday, October 17, 2014 1:39 PM
    Friday, October 17, 2014 1:38 PM
  • let me try the code and get back to you with updated code. 

    Regards, Saad

    Monday, October 20, 2014 5:06 AM
  • We've tested some more last friday, give me a sec to post an entire update of the things we did.
    Monday, October 20, 2014 6:31 AM
  • Hi LunAds,

    Please follow the below steps:

    1. Create a optionset field and one multitext field with same name + suffix as '_value'.

    2. create a web resource with following code

    //This function is for OnLoad
    //fieldName==> 'new_fieldname'
    //Create a multitext field with same name + suffix as '_value' to store the values and hide it
    function CheckBox_OnLoad(fieldName) {
    var optionset = "";
    var optionsetvalue = "";
    var OS1 = "";
    var OSV2 = "";
    var OS = "";
    var OSV = "";
    var oAttributes = Xrm.Page.data.entity.attributes.get(fieldName);
    optionset = oAttributes.getName();
    optionsetvalue = oAttributes.getName() + "_value";
    
    OS = document.getElementById(optionset);
    if (Xrm.Page.getControl(optionsetvalue) != null || Xrm.Page.getControl(optionsetvalue) != undefined) {
    Xrm.Page.getControl(optionsetvalue).setVisible(true);
    
    } //end of if
    OSV = document.getElementById(optionsetvalue);
    if (OS != null) {
    if (OSV != null) {
    ConvertToMultiCheckbox(optionset, optionsetvalue, OS, OSV);
    if (Xrm.Page.getControl(optionsetvalue) != null || Xrm.Page.getControl(optionsetvalue) != undefined) {
    Xrm.Page.getControl(optionsetvalue).setVisible(false); 
    document.getElementById(optionset + "_c").style.display = 'Inline';
    //document.getElementById(optionsetvalue + "_d").style.display = 'none';
    } //end of if
    } //end of if
    } //end of if
    }
    
    function ConvertToMultiCheckbox(var_new_optionset, var_new_optionsetvalue, OS, OSV) {
    if (OS != null && OSV != null) {
    
    Xrm.Page.getControl(var_new_optionsetvalue).setVisible(false);
    //Create the div container for the checkbox list
    var divid = "div_" + var_new_optionset;
    var DivElement = "<div id='" + divid + "' title='" + var_new_optionset + "' style='overflow-y:auto; height:120px; border:1px #6699cc solid; background-color:#ffffff; padding-right:10px; padding-left:10px; ' />"
    
    var DivExist = document.getElementById(divid);
    if (DivExist != null || DivExist != undefined) {
    var div = document.getElementById(divid);
    div.parentNode.removeChild(div);
    
    CreateDiv(var_new_optionset, var_new_optionsetvalue, OS, OSV, DivElement, divid)
    }
    else {
    CreateDiv(var_new_optionset, var_new_optionsetvalue, OS, OSV, DivElement, divid)
    }
    }
    }
    
    function CreateDiv(var_new_optionset, var_new_optionsetvalue, OS, OSV, DivElement, divid) {
    // Create a DIV container
    try {
    var addDiv = document.createElement(DivElement);
    } //end of try
    catch (e) {
    var addDiv = document.createElement("div");
    addDiv.setAttribute("id", divid);
    addDiv.setAttribute("title", var_new_optionset);
    addDiv.setAttribute("style", "overflow-y:auto; height:120px; border:1px #6699CC solid; background-color:#F6F8FA; padding-right:10px; padding-left:10px; ");
    } //end of catch
    
    OS.parentNode.appendChild(addDiv);
    // Initialise multi checkbox controls
    var OSO = Xrm.Page.getAttribute(var_new_optionset);
    var options = OSO.getOptions();
    for (var i in options) {
    var pOption = options[i];
    try {
    var OSVText = Xrm.Page.getAttribute(var_new_optionsetvalue).getValue();
    var isChecboxChecked = IsChecked(pOption.text, OS, OSVText);
    if (isChecboxChecked == true && pOption.text != "") {
    var addInput = document.createElement("<input type='checkbox' checked='checked' style='border:none; width:25px; align:left;' />");
    }
    else if (pOption.text != "") {
    var addInput = document.createElement("<input type='checkbox' style='border:none; width:25px; align:left;' />");
    } //end of if
    } //end of try
    catch (e) {
    var OSVText = Xrm.Page.getAttribute(var_new_optionsetvalue).getValue();
    var isChecboxChecked = IsChecked(pOption.text, OS, OSVText);
    if (isChecboxChecked == true && pOption.text != "") {
    var addInput = document.createElement("input");
    addInput.setAttribute("type", "checkbox");
    addInput.setAttribute("checked", "checked");
    addInput.setAttribute("style", "border:none; width:25px; align:left;");
    }
    //end of if
    else if (pOption.text != "") {
    var addInput = document.createElement("input");
    addInput.setAttribute("type", "checkbox");
    addInput.setAttribute("style", "border:none; width:25px; align:left;");
    }
    var addLabel = document.createElement("label");
    var pOptionValue = pOption.value;
    addLabel.innerText = pOption.text;
    var addBr = document.createElement("br"); //it's a 'br' flag
    OS.nextSibling.appendChild(addInput);
    OS.nextSibling.appendChild(addLabel);
    OS.nextSibling.appendChild(addBr);
    
    } //end of catch
    
    Xrm.Page.getControl(var_new_optionset).setVisible(true);
    Xrm.Page.getControl(var_new_optionset).setVisible(false);
    } //end of for
    }
    
    function IsChecked(pValue, OS, OSV) {
    var result = false;
    if (OSV != "" && OSV != null) {
    var OSVT = OSV.split(";");
    for (var i = 0; i < OSVT.length; i++) {
    if (OSVT[i] == pValue && OSVT[i] != "") {
    result = true;
    break;
    }
    else
    { result = false; }
    }
    }
    return result;
    }
    
    //This function is for Onsave
    function Multiselect_OnSave(fieldName) {
    
    var optionset = "";
    var optionsetvalue = "";
    var OS = "";
    var OSV = "";
    
    var oAttributes = Xrm.Page.data.entity.attributes.get(fieldName);
    optionset = oAttributes.getName();
    optionsetvalue = oAttributes.getName() + "_value";
    OS = document.getElementById(optionset);
    OSV = document.getElementById(optionsetvalue);
    
    if (OS != null) {
    if (OSV != null) {
    executeOnSave(OS, optionsetvalue);
    }
    }
    }
    
    function executeOnSave(OS, var_new_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.innerText + ";";
    }
    }
    
    //save value
    
    control = Xrm.Page.getControl(var_new_optionsetvalue);
    attribute = control.getAttribute();
    attribute.setValue(result);
    }

    3. On load call function CheckBox_OnLoad and pass parameter as "yourOptionsetfield" and on Save call function Multiselect_OnSave  and pass parameter as "yourOptionsetfield" .

    It will work fine. tested the code.

    Saad


    Regards, Saad

    • Marked as answer by LunAds Monday, October 20, 2014 11:23 AM
    Monday, October 20, 2014 7:17 AM
  • Thanks for your time and help so far!
    I've did what you said but it's not working, I'm pretty sure I'm doing something wrong in configuring the form properties.
    Here's the whole thing:

    1. Optionset + name = new_interesse

    2. Textfield, multiple lines + name = new_interesse_value


    • Marked as answer by LunAds Monday, October 20, 2014 11:23 AM
    Monday, October 20, 2014 8:04 AM
  • 3. webresource + name = new_interesse

    Code:
    (I did not change anything in the code, or do I have to insert my fieldnames somewhere? I don't think so since you have to pass the parameters using the form properties, right?)

    //This function is for OnLoad
    //fieldName==> 'new_fieldname'
    //Create a multitext field with same name + suffix as '_value' to store the values and hide it
    function CheckBox_OnLoad(fieldName) {
    var optionset = "";
    var optionsetvalue = "";
    var OS1 = "";
    var OSV2 = "";
    var OS = "";
    var OSV = "";
    var oAttributes = Xrm.Page.data.entity.attributes.get(fieldName);
    optionset = oAttributes.getName();
    optionsetvalue = oAttributes.getName() + "_value";
    
    OS = document.getElementById(optionset);
    if (Xrm.Page.getControl(optionsetvalue) != null || Xrm.Page.getControl(optionsetvalue) != undefined) {
    Xrm.Page.getControl(optionsetvalue).setVisible(true);
    
    } //end of if
    OSV = document.getElementById(optionsetvalue);
    if (OS != null) {
    if (OSV != null) {
    ConvertToMultiCheckbox(optionset, optionsetvalue, OS, OSV);
    if (Xrm.Page.getControl(optionsetvalue) != null || Xrm.Page.getControl(optionsetvalue) != undefined) {
    Xrm.Page.getControl(optionsetvalue).setVisible(false); 
    document.getElementById(optionset + "_c").style.display = 'Inline';
    //document.getElementById(optionsetvalue + "_d").style.display = 'none';
    } //end of if
    } //end of if
    } //end of if
    }
    
    function ConvertToMultiCheckbox(var_new_optionset, var_new_optionsetvalue, OS, OSV) {
    if (OS != null && OSV != null) {
    
    Xrm.Page.getControl(var_new_optionsetvalue).setVisible(false);
    //Create the div container for the checkbox list
    var divid = "div_" + var_new_optionset;
    var DivElement = "<div id='" + divid + "' title='" + var_new_optionset + "' style='overflow-y:auto; height:120px; border:1px #6699cc solid; background-color:#ffffff; padding-right:10px; padding- ' />"
    
    var DivExist = document.getElementById(divid);
    if (DivExist != null || DivExist != undefined) {
    var div = document.getElementById(divid);
    div.parentNode.removeChild(div);
    
    CreateDiv(var_new_optionset, var_new_optionsetvalue, OS, OSV, DivElement, divid)
    }
    else {
    CreateDiv(var_new_optionset, var_new_optionsetvalue, OS, OSV, DivElement, divid)
    }
    }
    }
    
    function CreateDiv(var_new_optionset, var_new_optionsetvalue, OS, OSV, DivElement, divid) {
    // Create a DIV container
    try {
    var addDiv = document.createElement(DivElement);
    } //end of try
    catch (e) {
    var addDiv = document.createElement("div");
    addDiv.setAttribute("id", divid);
    addDiv.setAttribute("title", var_new_optionset);
    addDiv.setAttribute("style", "overflow-y:auto; height:120px; border:1px #6699CC solid; background-color:#F6F8FA; padding-right:10px; padding- ");
    } //end of catch
    
    OS.parentNode.appendChild(addDiv);
    // Initialise multi checkbox controls
    var OSO = Xrm.Page.getAttribute(var_new_optionset);
    var options = OSO.getOptions();
    for (var i in options) {
    var pOption = options[i];
    try {
    var OSVText = Xrm.Page.getAttribute(var_new_optionsetvalue).getValue();
    var isChecboxChecked = IsChecked(pOption.text, OS, OSVText);
    if (isChecboxChecked == true && pOption.text != "") {
    var addInput = document.createElement("<input type='checkbox' checked='checked' style='border:none; width:25px; align:left;' />");
    }
    else if (pOption.text != "") {
    var addInput = document.createElement("<input type='checkbox' style='border:none; width:25px; align:left;' />");
    } //end of if
    } //end of try
    catch (e) {
    var OSVText = Xrm.Page.getAttribute(var_new_optionsetvalue).getValue();
    var isChecboxChecked = IsChecked(pOption.text, OS, OSVText);
    if (isChecboxChecked == true && pOption.text != "") {
    var addInput = document.createElement("input");
    addInput.setAttribute("type", "checkbox");
    addInput.setAttribute("checked", "checked");
    addInput.setAttribute("style", "border:none; width:25px; align:left;");
    }
    //end of if
    else if (pOption.text != "") {
    var addInput = document.createElement("input");
    addInput.setAttribute("type", "checkbox");
    addInput.setAttribute("style", "border:none; width:25px; align:left;");
    }
    var addLabel = document.createElement("label");
    var pOptionValue = pOption.value;
    addLabel.innerText = pOption.text;
    var addBr = document.createElement("br"); //it's a 'br' flag
    OS.nextSibling.appendChild(addInput);
    OS.nextSibling.appendChild(addLabel);
    OS.nextSibling.appendChild(addBr);
    
    } //end of catch
    
    Xrm.Page.getControl(var_new_optionset).setVisible(true);
    Xrm.Page.getControl(var_new_optionset).setVisible(false);
    } //end of for
    }
    
    function IsChecked(pValue, OS, OSV) {
    var result = false;
    if (OSV != "" && OSV != null) {
    var OSVT = OSV.split(";");
    for (var i = 0; i < OSVT.length; i++) {
    if (OSVT[i] == pValue && OSVT[i] != "") {
    result = true;
    break;
    }
    else
    { result = false; }
    }
    }
    return result;
    }
    
    //This function is for Onsave
    function Multiselect_OnSave(fieldName) {
    
    var optionset = "";
    var optionsetvalue = "";
    var OS = "";
    var OSV = "";
    
    var oAttributes = Xrm.Page.data.entity.attributes.get(fieldName);
    optionset = oAttributes.getName();
    optionsetvalue = oAttributes.getName() + "_value";
    OS = document.getElementById(optionset);
    OSV = document.getElementById(optionsetvalue);
    
    if (OS != null) {
    if (OSV != null) {
    executeOnSave(OS, optionsetvalue);
    }
    }
    }
    
    function executeOnSave(OS, var_new_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.innerText + ";";
    }
    }
    
    //save value
    
    control = Xrm.Page.getControl(var_new_optionsetvalue);
    attribute = control.getAttribute();
    attribute.setValue(result);
    }

    4. Form properties:


    • Marked as answer by LunAds Monday, October 20, 2014 11:23 AM
    Monday, October 20, 2014 8:04 AM
  • 5. Properties on load:

    6. Properties On Save:


    • Marked as answer by LunAds Monday, October 20, 2014 11:23 AM
    Monday, October 20, 2014 8:04 AM
  • The error I get is:



    Free translation: 
    An error occured in the customized event for this field.
    Field: windows
    Event: onload
    Error: the property of method getName is niet supported by this object.

    Furthermore: I don't know if this is important, but I'm trying to put this on the form: 'quick insert contactperson'.
    Maybe this only works on a 'normal' form, maybe it won't work on a 'quick insert' form?

    PS: sorry for the posts, but you're unable to post more than 2 pics in a post.. (..)

    Monday, October 20, 2014 8:05 AM
  • 5. Properties on load:

    6. Properties On Save:


    Pass your parameters within double quotes on both onload and on save events "new_interesse"

    Regards, Saad


    • Edited by Mohd Saad Monday, October 20, 2014 8:50 AM
    • Marked as answer by LunAds Monday, October 20, 2014 11:24 AM
    Monday, October 20, 2014 8:46 AM
  • It doesn't give me an error anymore, so that's good.
    But I don't see any checkboxes :(

    
    Monday, October 20, 2014 9:03 AM
  • did you add any values in your optionset?


    Regards, Saad

    Monday, October 20, 2014 9:13 AM
  • Yes:

    If you want I can start teamviewer or something else? :)

    • Edited by LunAds Monday, October 20, 2014 9:20 AM .
    Monday, October 20, 2014 9:18 AM
  • share your temaviewer id

    Regards, Saad

    Monday, October 20, 2014 9:29 AM
  • http://go.teamviewer.com/v7/m47907771

    Meeting-ID: m47-907-771

    (version 7.x - teamviewer.com -> download -> previous versions)
    • Edited by LunAds Monday, October 20, 2014 10:05 AM
    Monday, October 20, 2014 10:00 AM
  • Mark it as answered and share your experience so it can help someone else.

    Regards, Saad

    Monday, October 20, 2014 11:01 AM
  • Well, unfortunately unbelievable solution.
    The exact and correct solution are the steps I posted above, the 3 subsequent posts.
    Saad and me reviewed all settings and we concluded that they were correct.

    On one moment we didn't know if it was possible to customize a 'quick insert' form.
    (for example: i have a sub grid on my account form, where I can 'quickly insert' a new contact person)
    This was quickly tested by making another field 'test'.
    We then placed the field on the quick insert form, and believe it or not, all of the sudden the checkboxes appeared.

    To even more 'test' the system, we removed the test field, and gone were the checkboxes..
    So in the end I solved it by creating a random text field, hide it, and then it shows the checkboxes..
    Very strange but it worked!

    Thanks a lot Saad!

    Ps: please do note that you have to pass the parameters, on the form properties, with "parameter"

    • Marked as answer by LunAds Monday, October 20, 2014 11:24 AM
    Monday, October 20, 2014 11:23 AM
  • HELP! 

    For some reason this affected creating a new marketing list.
    I did not add the script or any other stuff to the marketing list entity.

    I did add the script and the checkboxes to the contactperson entity.
    Altho, I can't explain why I'm now receiving errors on the marketing list entity.

    The errors occur when creating a new marketing list.
    The only relation I can think of is: marketinglist members.

    When I click 'new marketing list', I receive this error:



    Free translation:
    An error occured on the customized event for this field.
    Field: window
    Event: onload
    Error: cannot retrieve the property setDisabled from a non defined reference or a reference to an empty value.

    Then, when I click OK, I enter a name for the marketing list, as soon as I leave that field, to change the list type, I receive this error:

    Free translation:
    An error occured on the customized event for this field.
    Field: type
    Event: onchange
    Error: cannot retrieve the property setDisabled from a non defined reference or a reference to an empty value. 

    Thursday, October 23, 2014 11:37 AM
  • When I save the new marketing list, another error:

    Free translation:
    An error occured on the customized event for this field.
    Field: Window
    Event: onload
    Error: cannot retrieve the property setDisabled from a non defined reference or a reference to an empty value.

    Any ideas?

    I did not add the script to the 'new marketing list' form..
    Everything works, the error just keeps popping up when I do those actions. (new, change field & save)

    (Note: what I'm trying to achieve was: create checkboxes on contactperson's form with some fields of interest, based on those fields of interest create marketing lists with dynamic members, so if a new contactperson is made, and has certain interests, he or she is added to the corresponding marketing list, which actually works nice, I just need to get rid of the errors)


    • Edited by LunAds Thursday, October 23, 2014 11:41 AM added info
    Thursday, October 23, 2014 11:39 AM