Friday, July 24, 2015

Dynamics CRM 2015 / 2013 /2011 – Multi Select Option List / Pick list / Dropdown

Dynamics CRM 2015 / 2013 /2011 – Multi Select Option List / Pick list / Dropdown



1)     Create a HTML Web Resource MultiSelectPicklist.html


<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="sa_jQuery"></script>
<script type="text/javascript" src="sa_JSON"></script>
<script src="ClientGlobalContext.js.aspx"></script>
 
<script type="text/javascript">
 
var PicklistFieldName;
var TextAttributefield;
 
document.onreadystatechange = function () {
if (document.readyState == "complete") {
getDataParam();
}
}
 
function getDataParam() {
//Get the any query string parameters and load
 
var vals = new Array();
if (location.search != "") {
vals = location.search.substr(1).split("&");
for (var i in vals) {
vals[i] = vals[i].replace(/\+/g, " ").split("=");
}
//look for the parameter named 'data'
var found = false;
for (var i in vals) {
if (vals[i][0].toLowerCase() == "data") {
parseDataValue(vals[i][1]);
found = true;
break;
}
}
if (!found) {
noParams();
}
}
else {
noParams();
}
}
 
function setText(element, text) {
if (typeof element.innerText != "undefined") {
element.innerText = text;
}
else {
element.textContent = text;
}
}
 
function parseDataValue(datavalue) {
PicklistFieldName = '';
TextAttributefield = '';
if (datavalue != "") {
vals = decodeURIComponent(datavalue).split("&");
for (var i in vals) {
vals[i] = vals[i].replace(/\+/g, " ").split("=");
}
 
var temp = vals[i][0].split(';');
 
if (temp.length == 2) {
PicklistFieldName = temp[0];
TextAttributefield = temp[1];
}
else {
noParams();
}
}
else {
noParams();
}
}
 
function noParams() {
var message = document.createElement("p");
setText(message, "No data parameter was passed to this page");
 
document.body.appendChild(message);
}
 
function CreateMultiSelectPicklist() {
if (PicklistFieldName != '' && TextAttributefield != '') {
var dropdownOptions = parent.Xrm.Page.getAttribute(PicklistFieldName).getOptions();
var selectedValue = parent.Xrm.Page.getAttribute(TextAttributefield).getValue();
 
parent.Xrm.Page.getControl(PicklistFieldName).setVisible(false);
parent.Xrm.Page.getControl(TextAttributefield).setDisabled(true);
 
// Create Multi Select Picklist with values from input picklist.
$(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(rText) != -1)
isChecked = true;
 
var checkbox = " input type='checkbox'  name='r'/>" + rText + ""
$(checkbox)
.attr("value", rvalue)
.attr("checked", isChecked)
.attr("id", "id" + rvalue)
.attr("style", 'border:none; width:25px; align:left;')
.click(function () {
 
//To Set Picklist Select Text
var selectedYear = parent.Xrm.Page.getAttribute(TextAttributefield).getValue();
if (this.checked) {
if (selectedYear == null)
selectedYear = rText + ";";
else
selectedYear = selectedYear + rText + ";"
}
else {
var tempSelectedtext = rText + ";";
if (selectedYear.indexOf(tempSelectedtext) != -1)
selectedYear = selectedYear.replace(tempSelectedtext, "");
else
selectedYear = selectedYear.replace(rText, "");
}
 
parent.Xrm.Page.getAttribute(TextAttributefield).setValue(selectedYear);
 
})
.appendTo(checkboxList);
}
});
}
}
 
</script>
 
<meta charset="utf-8">
</head>
<body style="border: 1px solid rgb(102, 153, 204); overflow-y: auto; background-color: rgb(255, 255, 255);" onload="CreateMultiSelectPicklist()">
<div id="checkboxList">
</div>
</body>
</html>
 



2)  Add Web Resource to CRM From and pass Picklist Attribute Name and Text Attribute Name separated by semicolon
 

Logic: On page load Dropdown in web resource will be created with items in picklist. Text field will be used to store selected items in dropdown.

No comments: