Showing posts with label dropdown. Show all posts
Showing posts with label dropdown. Show all posts

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





Friday, January 16, 2015

Convert Dropdown / Pick list /Option set into Radio button list for CRM

In CRM we don't have option to show picklist / option set as a radio button. we can show radio buttons/ check box / drop down for boolean attirbute but not for option set.

If you want to show option set as radio button list we can achieve this by adding one HTML web resource and some Jquery code..

Here are steps to convert Option set into radio button list.

1. Create HTML web resource and give proper name

2. Add following code in your HTML web resource 



3. As I am using Jquery functions in this HTML web resource, so we need to add Jquery library.

<  script type="text/javascript" src="new_jquery_1.10.2" > < / script >

If you are using folder structure for web resources name like new_JavaScript/jquery_1.10.2.js

then reference library like
<  script type="text/javascript" src="../new_JavaScript/jquery_1.10.2.js" > < / script >

4.  In HTML web resource I am using  option set attribute name "new_radiobuttongroup", and to get option set values & Text from CRM form I am using

var dropdownOptions = parent.Xrm.Page.getAttribute("new_radiobuttongroup").getOptions();


5. Save HTML web resource, and open Entity form where you want to convert option set to radio button. 

6. Add Jquery library which we used in HTML web resource in form library.



6.  Add above created web resource on form. and set web resource properties as shown


You can set number or rows depending on your number of option set options. 

7. Add your option set attribute on form which you want to show as radio button list. and set 
Visible by default property to false.


your form will look like




8.  Save and publish your customization. 

Now here is option set shown as radio button list..