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>
