We are currently trying to implement a javascript solution for CRM2011. There are 2 libraries involved. The first generates a div container and presents values from a dropdown list (option set in CRM) so the user can select multiple values. The code then saves the selected values to a separate field as delimited text.
We have a requirement to allow for the values to be cleared. Specifically, if a function is called in a separate library, resulting in the list being hidden, then the selected values will also clear. As it stands, the function in the second library will run (hiding the multiple choice section), but the values are not cleared.
Here are the 2 libraries in question. The second includes codes from another bytes.com post (http://bytes.com/topic/javascript/answers/712814-uncheck-checkboxes-within-single-div) and is what we've tried to make word in our solution.
Library that creates the div container:
Expand|Select|Wrap|Line Numbers
- ///<reference path="..\IntelliSense\XrmPage-vsdoc.js"/>
- if (typeof (OptionSetToMultiSelect) == "undefined")
- { OptionSetToMultiSelect = {}; }
- OptionSetToMultiSelect.Functions = {
- ToMultiSelect: function (var_sc_optionset, var_sc_optionsetvalue, required, columns, othercontrol, othercontrollabel) {
- if (othercontrol != null) {
- var MyControl = Xrm.Page.getControl(othercontrol);
- var MyControlValue = Xrm.Page.getAttribute(othercontrol).getValue();
- if (MyControlValue != null) {
- MyControl.setVisible(true);
- }
- else {
- MyControl.setVisible(false);
- }
- }
- 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 ? 80 : (OS.options.length - 1 * 20));
- var addDiv = document.createElement("<div id='div1' 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 id='div2' style='width:90px;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='input1' style='border:none; width:25px; align:left;' value='" + pOption.text + "' />");
- }
- else {
- var addInput = document.createElement("<input type='checkbox' id='input2' 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 += ";"
- if (othercontrol != null) {
- if (customFields[j].value == othercontrollabel) {
- var MyControl = Xrm.Page.getControl(othercontrol);
- var MyControlAttribute = Xrm.Page.getAttribute(othercontrol);
- MyControl.setVisible(true);
- MyControlAttribute.setRequiredLevel("required");
- }
- }
- }
- else {
- if (othercontrol != null) {
- var MyControl = Xrm.Page.getControl(othercontrol);
- var MyControlAttribute = Xrm.Page.getAttribute(othercontrol);
- MyControl.setVisible(false);
- MyControlAttribute.setRequiredLevel("none");
- Xrm.Page.getAttribute(othercontrol).setValue(null);
- }
- }
- }
- values = values.substring(0, values.length - 1);
- valuesField.setValue(values);
- };
- var label = document.createElement("<label style='width:150px' />");
- 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:90px;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
- }
Expand|Select|Wrap|Line Numbers
- // OnLoad
- function Form_onload() {
- }
- function testTrigger_onchange() {
- var triggerAttribute = Xrm.Page.getAttribute("me_pickanoptiontotriggermultiselect");
- var trigger = triggerAttribute.getValue();
- if (trigger == 134320002) {
- Xrm.Page.ui.tabs.get("section_1").sections.get("item_3").setVisible(true);
- alert("Toggled On");
- } else {
- Xrm.Page.ui.tabs.get("section_1").sections.get("item_3").setVisible(true);
- alert("Toggled Off");
- function unselect(div2) {
- var inputs = document.getElementById(div2).getElementsByTagName(input2);
- for (var i = 0; i < inputs.length; i++) {
- var obj = inputs[i];
- if (inputs[i].type == "checkbox") {
- inputs[i].checked = false;
- }
- }
- }
- alert("Ran Clear");
- }
- }