Advertisement
bradaunecrgroup

CRM 2013 and CRM 2015 Cascading (Dependent ) Option Sets

Jun 25th, 2015
2,541
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5.44 KB | None | 0 0
  1. <HTML xmlns="http://www.w3.org/1999/xhtml">
  2.     <HEAD>
  3.         <TITLE></TITLE>
  4.         <META charset=utf-8></META>
  5.     </HEAD>
  6.     <style>
  7.         label, select {font-size: 11px;}
  8.     </style>
  9.     <BODY style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-TOP: 0px; BORDER-RIGHT: 0px BACKGROUND-COLOR: #ffffff; MARGIN: 0px; FONT-FAMILY: Segoe UI; FONT-SIZE: 11px;">
  10.  
  11.         <!--
  12.             This section contains the two "select" DOM elements in the web
  13.             resource that will be used to enforce the cascading option set
  14.             functionality.
  15.  
  16.             This template uses "new_division" and "new_state" as example fields,
  17.             if you find and replace all the values with your relevant CRM
  18.             optionset attribute names everything will work.
  19.  
  20.             Also the labels in this section, "First" and "Second" should be
  21.             updated to show the desired labels.
  22.  
  23.             You will need to construct a json string to store the cascading
  24.             logic. It is required in the $('#cascade_new_division').change()
  25.             function.
  26.         -->
  27.         <div id="f1">
  28.             <table>
  29.                 <tr>
  30.                     <td>
  31.                         <label for="cascade_new_division">Division</label>
  32.                     </td>
  33.                     <td>
  34.                         <select id="cascade_new_division">
  35.                             <option value="null"></option>
  36.                         </select>
  37.                     </td>
  38.                 </tr>
  39.                 <tr>
  40.                     <td>
  41.                         <label for="cascade_new_state">State</label>
  42.                     </td>
  43.                     <td>
  44.                         <select id="cascade_new_state">
  45.                             <option value="null"></option>
  46.                         </select>
  47.                     </td>
  48.                 </tr>
  49.             </table>
  50.         </div>
  51.  
  52.         <!-- ********************  -->
  53.  
  54.         <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  55.         <script>
  56.  
  57.             /*
  58.                 This function will fire when the web resource loads and it will
  59.                 initialize the values and set the actual crm fields to be not
  60.                 visible.
  61.             */
  62.             $(document).ready(function () {
  63.                 //Load cascading options set with the CRM optionsetvalues
  64.                 var options = parent.Xrm.Page.getAttribute("new_division").getOptions();
  65.  
  66.                 for(i = 0; i < options.length; i++)
  67.                 {
  68.                     if(options[i].value != "null"){
  69.  
  70.                         $("#cascade_new_division").append($('<option>', {
  71.                             value: options[i].value,
  72.                             text: options[i].text
  73.                         }));
  74.                     }
  75.                 }
  76.                
  77.                 //Set the cascading values to match the selected values
  78.                 var first_selection = parent.Xrm.Page.getAttribute("new_division").getValue();
  79.                 var second_selection = parent.Xrm.Page.getAttribute("new_state").getValue();
  80.  
  81.                 if(first_selection == "null" || first_selection == null)
  82.                 {
  83.                     $('#cascade_new_division').val("null");
  84.                 }
  85.                 else
  86.                 {
  87.                     $('#cascade_new_division').val(first_selection);
  88.                     //call the change function on the first cascading optionset
  89.                     $('#cascade_new_division').change();
  90.                 }
  91.  
  92.                 if(second_selection == "null" || second_selection == null)
  93.                 {
  94.                     //disable the second optionset value
  95.                     $('#cascade_new_state').attr("disabled", "disabled");
  96.                 }
  97.                 else
  98.                 {
  99.                     $('#cascade_new_state').val(second_selection);
  100.                 }
  101.  
  102.                 //hide the crm optionsets on the crm form
  103.                 parent.Xrm.Page.ui.controls.get("new_division").setVisible(false);
  104.                 parent.Xrm.Page.ui.controls.get("new_state").setVisible(false);
  105.  
  106.             });
  107.  
  108.             /*
  109.                 This function will fire when the first optionset is changed. It
  110.                 will use the json string to select the potential values for the
  111.                 second optionset and load the values. It will also copy the
  112.                 selected value of the first selection to the crm field and clear
  113.                 the second crm field to ensure that the cascading logic is
  114.                 respected.
  115.             */
  116.             $('#cascade_new_division').change(function () {
  117.                 $('#cascade_new_state').removeAttr("disabled");
  118.                 $("#cascade_new_state option[value!='null']").remove();
  119.  
  120.                 var selected = $(this).val();
  121.                 parent.Xrm.Page.getAttribute("new_division").setValue(selected);
  122.                 parent.Xrm.Page.getAttribute("new_state").setValue(null);
  123.  
  124.                 if (selected == "null" || selected == null) {
  125.                     $('#cascade_new_state').attr("disabled", "disabled");
  126.                     return;
  127.                 }
  128.  
  129.                 //json string that is used to store the cascading logic.
  130.                 var obj = jQuery.parseJSON('{"cascade":[[100000000,[100000006,100000018,100000020,100000028,100000038,100000044]],[100000001,[100000029,100000031,100000037]],[100000002,[100000012,100000013,100000021,100000034,100000049]],[100000003,[100000014,100000015,100000022,100000024,100000026,100000033,100000040]],[100000004,[100000007,100000008,100000009,100000019,100000032,100000039,100000045,100000047,100000048]],[100000005,[100000000,100000016,100000023,100000041]],[100000006,[100000003,100000017,100000035,100000042]],[100000007,[100000002,100000005,100000011,100000025,100000027,100000030,100000043,100000050]],[100000008,[100000001,100000004,100000010,100000036,100000046]]]}');
  131.  
  132.                 var possible = obj.cascade;
  133.                 var cascadedOptions;
  134.                
  135.                 for(var i = 0, l = possible.length; i < l; i++){
  136.                     if (possible[i][0] == selected){
  137.                         cascadedOptions = possible[i][1];
  138.                     }
  139.                 }
  140.  
  141.                 for (var i = 0, l = cascadedOptions.length; i < l; i++) {
  142.                     $("#cascade_new_state").append($('<option>', {
  143.                         value: cascadedOptions[i],
  144.                         text: parent.Xrm.Page.getAttribute("new_state").getOption(cascadedOptions[i]).text
  145.                     }));
  146.                 }
  147.  
  148.             });
  149.  
  150.             /*
  151.                 This function will fire when the second option set is changed.
  152.                 It will copy the value to the related crm field.
  153.             */
  154.             $('#cascade_new_state').change(function () {
  155.                 var selected = $(this).val();
  156.                 parent.Xrm.Page.getAttribute("new_state").setValue(selected);
  157.             });
  158.  
  159.         </script>
  160.     </BODY>
  161. </HTML>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement