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 >