Wednesday, February 18, 2015

Convert Option set to multi select Checkbox list

1.       Create two custom attributes to store selected value and selected text from check box list. 

2.       Add both attributes on form, this is required, it is not required to show those attributes on form, but those need on Form, so that JavaScript code will find those attributes.

3.        Add latest JQuery library in form library


4.       Create HTML web resource and add following code in HTML web resource

<html><head>
    <title></title>
    <script type="text/javascript" src="new_jquery_1.10.2.js"></script>
    <script type="text/javascript">

        // function will be called when web resource is loaded on Form.
        $(document).ready(function () {
            ConvertDropDownToCheckBoxList();
        });

        //Coverts option list to checkbox list.
        function ConvertDropDownToCheckBoxList() {
            var dropdownOptions = parent.Xrm.Page.getAttribute("new_makeyear").getOptions();
            var selectedValue = parent.Xrm.Page.getAttribute("new_selectedyears").getValue();

            $(dropdownOptions).each(function (i, e) {
                var rText = $(this)[0].text;
                var rvalue = $(this)[0].value;
                var isChecked = false;
                if (rText != '') {
                    if (selectedValue != null && selectedValue.indexOf(rvalue) != -1)
                        isChecked = true;

  /* Remove spaces before input, label word and end tags of input & label*/
                    var checkbox = "< input type='checkbox' name='r'/ >< label> " + rText + "</ label>"
                    $(checkbox)
                        .attr("value", rvalue)
                        .attr("checked", isChecked)
                          .attr("id", "id" + rvalue)
                        .click(function () {
                            //To Set Picklist Select Values
                            var selectedOption = parent.Xrm.Page.getAttribute("new_selectedyears").getValue();
                           
                            if (this.checked) {
                                if (selectedOption == null)
                                    selectedOption = rvalue+"";
                                else
                                    selectedOption = selectedOption + "," + rvalue
                            }
                            else {
                                var tempSelected = rvalue + ",";
                                if (selectedOption != null) {
                                    if (selectedOption.indexOf(tempSelected) != -1)
                                        selectedOption = selectedOption.replace(tempSelected, "");
                                    else
                                        selectedOption = selectedOption.replace(rvalue, "");
                                }
                            }
                            parent.Xrm.Page.getAttribute("new_selectedyears").setValue(selectedOption);


                            //To Set Picklist Select Text
                            var selectedYear = parent.Xrm.Page.getAttribute("new_selectedyeartext").getValue();
                            if (this.checked) {
                                if (selectedYear == null)
                                    selectedYear = rText+"";
                                else
                                    selectedYear = selectedYear + "," + rText
                            }
                            else {
                                var tempSelectedtext = rText + ",";
                                if (selectedYear != null) {
                                    if (selectedYear.indexOf(tempSelectedtext) != -1)
                                        selectedYear = selectedYear.replace(tempSelectedtext, "");
                                    else
                                        selectedYear = selectedYear.replace(rText, "");
                                }
                            }
                            parent.Xrm.Page.getAttribute("new_selectedyeartext").setValue(selectedYear);

                        })
                        .appendTo(checkboxList);
                }
            });
        }
    </script>
    <meta charset="utf-8">
<meta><meta><meta><meta></head><body style="word-wrap: break-word;">
    <div id="checkboxList">    
    </div>

</body></html>


Change new_makeyear   with option set schema name.
Change   new_selectedyears with custom attribute which is storing selected values.
Change   new_selectedyeartext with custom attribute which is storing selected Text.

1.       Add HTML web resource on Form.

2.       Save and publish your customization.

Final output will be like





32 comments:

  1. Hi Mahadeo,

    Is there any reason this solution won't work on CRM 2015? I've followed your instructions, but cannot get anything to happen when I add the fields and web resource to the Contacts entity. IE developer tools aren't showing any errors.

    Cheers
    Chris

    ReplyDelete
  2. Hi Chris.

    There should not be any problem with CRM 2015. I havn't tested it on 2015 CRM.

    Can you please check in your web resource, it have onload function
    < body onload="ConvertDropDownToCheckBoxList()" >

    Some times I seen this problem, when modifying web resource from CRM, onload function is removed. Make sure you are calling onload function.

    Here is complete code in Manged solution.

    https://onedrive.live.com/redir?resid=313f10ae62a84b48!3918&authkey=!AKuuPmyi6TtEW8A&ithint=file%2czip


    Please let me know if you have still problem.

    ReplyDelete
  3. Hi guys,

    I am not developer more CRM power user. Can you describe me where and how do I insert the code? As the Output I only do net go get check box list of 7 items.

    Thanx

    Tom

    ReplyDelete
  4. Hi Tomoas,

    You need to first create HTML web resource.. and add above code in HTML web resource.
    In code you need to change attribute names like new_makeyear, new_selectedyears with your attribtues.

    and then need to add HTML web resource on form where you want to show check box list instead of dropdown.

    Here are some links related to CRM web resources

    Webpage (HTML) web resources

    HTML Web Resources

    ReplyDelete
  5. Hi Mahadeo,

    How do you create the attribute (entity) so that it populates selected value and label? I have added my custom entities as single line text data types but this solution is not working. I am just getting html loaded in my web resource control when I test.

    Thank you,
    Ryan

    ReplyDelete
  6. Hi Mahadeo,
    I am trying to implement this but on the form the code itself keeps appearing instead of the checkbox list. what am I doing wrong?

    Do you need to somehow call the "ConvertDropDownToCheckBoxList" function on the form? If so, how?

    I am not a programmer.

    ReplyDelete
  7. You need to create HTML web resource and add code given in post into HTML web resource and put HTML web resource in Form.
    Once web resource added in Form, save your changes and Don't forgot to PUBLISH your changes.
    Until you are not publishing changes, CRM will not show changes.

    ReplyDelete
  8. Thanks,
    I was able to get it working using the managed solution you provided, but when I check a box I get a Invalidtype error.

    ReplyDelete
  9. I'm having some issues implementing this. I've added the field for the choice set, 2 seprate multi line text box fields [one for storing values, and one for storing text]. I added the html web resource [replacing with the name of my fields] and then added that web resource to the form. When I add the web resource to the form, it looks like it adds it as a new field. When I open up the form I see the choice set there, but its still a drop down. I'm not sure what I'm doing wrong.

    ReplyDelete
  10. To correct the InvalidType error change line
    parent.Xrm.Page.getAttribute("new_selectedyeartext").setValue(selectedOption);
    to
    parent.Xrm.Page.getAttribute("new_selectedyeartext").setValue(selectedOption.toString());

    ReplyDelete
  11. This comment has been removed by the author.

    ReplyDelete
  12. Hi Mahadeo Matre...

    Thanks fro your solution ...

    1.how can I clear the un-check values in the below test field ?
    2.When I check the values ,values is populating in the below field and when I un-check and check the same value also the values is populating again
    How can I clear this

    ReplyDelete
  13. Hello, I have done this the manual way and by importing your solution, but I am getting the following error when my contact form loads.

    ReferenceError: ConvertDropDownToCheckBoxList is not defined

    ReplyDelete
    Replies
    1. Hi,

      Do you have function ConvertDropDownToCheckBoxList() in your code?
      make sure there is not any other javascript error, it might be you are missing some brackets or some syntax error in javascript.

      Delete
  14. Hi Mahadeo,

    I have tried this solution in CRM 2016 on prem but it doesnt work. It just displays an empty webresource. Is this compatible with CRM 2016?

    ReplyDelete
    Replies
    1. Yes, it is compatible with CRM 2016.
      Make sure you have Jquery library added to your form library, also add debugger and see where the error is coming.
      It might be when you are getting option set values from CRM, your attribute name is different.

      Delete
    2. Thank you Mahadeo, appreciate your help. I was able to fix the error by looking at the debugger. But now the webresource shows the HTML code instead

      < input type='checkbox' name= 'r' / >< input type='checkbox' name= 'r' / >< input type='checkbox' name= 'r' / >

      No error in the debugger as well. Any help is appreciated.

      Delete
    3. Hi,
      You need to remove spaces in HTML tag

      var checkbox = "< input type='checkbox' name='r' / >" + rText + ""

      There are some extra space added before "input" and at the end. Also it might be label will not be shown for checkbox, so change this line as

      var checkbox = "< label> < input type='checkbox' name='r' / >" + rText + "< / label>"

      Delete
    4. Sir, you rock! Thank you so much. Appreciate all the help!.

      Delete
    5. One last question, the debugger shows this error now and I havent been able to resolve it.
      var tempSelected = rvalue + ",";
      if (selectedOption.indexOf(tempSelected) != -1)

      SCRIPT 5007:unable to get property 'indexof' of undefined or null reference

      I changed the code to:
      var tempSelected = rvalue + ",";
      if ($.inArray(selectedOption,tempSelected) != -1)

      But then it throws
      SCRIPT 5007:unable to get property 'replace' of undefined or null reference
      at:
      selectedOption = selectedOption.replace(rvalue, "").

      Delete
    6. Update code as follows for checkbox click event

      $(checkbox)
      .attr("value", rvalue)
      .attr("checked", isChecked)
      .attr("id", "id" + rvalue)
      .click(function () {
      //To Set Picklist Select Values
      var selectedOption = parent.Xrm.Page.getAttribute("new_selectedyears").getValue();

      if (this.checked) {
      if (selectedOption == null)
      selectedOption = rvalue+"";
      else
      selectedOption = selectedOption + "," + rvalue
      }
      else {
      var tempSelected = rvalue + ",";
      if (selectedOption != null) {
      if (selectedOption.indexOf(tempSelected) != -1)
      selectedOption = selectedOption.replace(tempSelected, "");
      else
      selectedOption = selectedOption.replace(rvalue, "");
      }
      }
      parent.Xrm.Page.getAttribute("new_selectedyears").setValue(selectedOption);


      //To Set Picklist Select Text
      var selectedYear = parent.Xrm.Page.getAttribute("new_selectedyeartext").getValue();
      if (this.checked) {
      if (selectedYear == null)
      selectedYear = rText+"";
      else
      selectedYear = selectedYear + "," + rText
      }
      else {
      var tempSelectedtext = rText + ",";
      if (selectedYear != null) {
      if (selectedYear.indexOf(tempSelectedtext) != -1)
      selectedYear = selectedYear.replace(tempSelectedtext, "");
      else
      selectedYear = selectedYear.replace(rText, "");
      }
      }
      parent.Xrm.Page.getAttribute("new_selectedyeartext").setValue(selectedYear);

      })
      .appendTo(checkboxList);

      Delete
    7. Thank you sir! No errors now. Appreciate all the help. But now I am trying to figure out why arent the fields populating when I select a check box. No errors though in the debugger.

      Delete
    8. You need to check what values are set

      parent.Xrm.Page.getAttribute("new_selectedyears").setValue(selectedOption);

      or

      parent.Xrm.Page.getAttribute("new_selectedyeartext").setValue(selectedYear);

      Check what values are coming in selectedOption and selectedYear variables.
      Also try for some other records.

      Delete
    9. I threw an alert to check what value was set to selectedOption and it returns a null value. Looks like it doesnt go in to the if(this.checked) loop. Alert on (this.checked) returns undefined. Am not sure what I am doing wrong but cant get it to work :(

      Thank you so much for all your responses you have been very helpful, appreciate your time and all the help

      Delete
    10. Okay so I finally got it working instead of this.checked we need to use $('#checkbox').is(':checked') and it works like a charm.

      Delete
  15. Hello Mahadeo.

    Thank you for this code. It has helped me immensely. However, I noticed that the data is not actually stored on the server and every time I refresh the page, the checks disappear in the check boxes. Do you have an solution or would it require editing Dynamics 365 through visual studio?


    ReplyDelete
    Replies
    1. To store data on server you need to save record. This code is not saving record.

      Delete
  16. i followed s u said but no execution, no error here i just changed field names, added jquery, added web resource of html thats it is there anything to do.

    ReplyDelete
    Replies
    1. Hi,
      did you published your changes, also you can add debugger and check is JavaScript is executing or not.

      Delete
  17. pls rply regarding this

    ReplyDelete
  18. Thanks this working for me.... :)

    ReplyDelete
  19. Great! It works! However the option set field cannot be used in the advanced search but remains empty. How can this be solved? Thank you

    ReplyDelete