16 January 2009

CRM 4.0: Checkbox style Multi-Select Picklist

CRM 4.0 doesn't have many out-of-box user controls, e.g: a mulit-select picklist. The standard CRM picklist can only save one value in the database, it's not easy to extend this functionality, in addition, you have to deal with the Advanced Find feature.

You can make a picklist multi-selectable by enable the picklist mulitple attribute , e.g: crmForm.all.new_picklist.multiple = true; And then save the selected values somewhere else. However, it does not very impressive the user because the user has to use the CTRL key to select options, which is not user-friendly (Thanks for Alastair Westland (PM @ Parity) who work with me to improve the interface design:)

The script below will draw a checkbox style mulit-select picklist control on the CRM form, and then get options from the real picklist attribute. So how to use it?

1. Create a standard picklist attribute with all options in CRM, put it on the CRM Form. e.g: new_picklist;
2. Create another nvarchar attribute in CRM to save the selected text, put it on the CRM Form and hide the label. e.g: new_picklistvalue;
3. Put the following script in the Form.OnLoad() event.

*NOTE: There is a 'br' flag(var addBr = document.createElement(...) ) just been ignord by blogspot, please replace it when you paste the code!!!


/*
Checkbox style Multi-Select Picklist
author: Jim Wang @ January 2009
http://jianwang.blogspot.com
*/

// PL - the picklist attribute; PLV - used to save selected picklist values
var PL = crmForm.all.new_picklist;
var PLV = crmForm.all.new_picklistvalue;

if( PL != null && PLV != null )
{
PL.style.display = "none";
PLV.style.display = "none";

// Create a DIV container
var addDiv = document.createElement("<div style='overflow-y:auto; height:80px; border:1px #6699cc solid; background-color:#ffffff;' />");
PL.parentNode.appendChild(addDiv);

// Initialise checkbox controls
for( var i = 1; i < PL.options.length; i++ )
{
var pOption = PL.options[i];
if( !IsChecked( pOption.text ) )
var addInput = document.createElement("<input type='checkbox' style='border:none; width:25px; align:left;' />" );
else
var addInput = document.createElement("<input type='checkbox' checked='checked' style='border:none; width:25px; align:left;' />" );

var addLabel = document.createElement( "<label />");
addLabel.innerText = pOption.text;

var addBr = document.createElement( "<br />"); //it's a 'br' flag

PL.nextSibling.appendChild(addInput);
PL.nextSibling.appendChild(addLabel);
PL.nextSibling.appendChild(addBr);
}

// Check if it is selected
function IsChecked( pText )
{
if(PLV.value != "")
{
var PLVT = PLV.value.split("||");
for( var i = 0; i < PLVT.length; i++ )
{
if( PLVT[i] == pText )
return true;
}
}
return false;
}

// Save the selected text, this filed can also be used in Advanced Find
crmForm.attachEvent( "onsave" , OnSave);
function OnSave()
{
PLV.value = "";
var getInput = PL.nextSibling.getElementsByTagName("input");

for( var i = 0; i < getInput.length; i++ )
{
if( getInput[i].checked)
{
PLV.value += getInput[i].nextSibling.innerText + "||";
}
}
}
}


Note: Please be aware of this is an unsupported customization.

54 comments:

Matt Keenan said...

Jim - thanks for this post, i enjoy reading your articles. i pasted your code and added the < br /> tag and i cant get the multiselect to display. any thoughts?

Jim Wang said...

Hi Matt, Blogspot removed some flags, please try it again.

Cheers,
Jim

Mitch Milam said...

Jim,

Very elegant solution. I'm going to make a broad assumption that since you're storing the textual values of the picklist in the nvarchar attribute, it needs to be sized large enough to accept the combined values of the picklist. Correct?

By the way, the br tag came through just fine on the RSS feed.

Mitch

Jim Wang said...

Cheers Mitch, yes indeed.

Jim

Bert-Jan Diedering said...

Great post Jim! You tha man! Keep up the good work :)

Xidan said...

Jim, may I assume this will work with lookup fields as well with little modifications?

How would you go about querying the saved multi-value field? For example, just pull organizations of type of 'Advisor' or 'Government Department' or both?

Thanks.

Xidan said...

Let me rephrase the second point in my comments earlier: what's the pros and cons in saving the multi-select values in a field verses in a related entity? I come from a database backgroup and would say saving the values in a related entity makes query easier, but not sure the pros and cons from the point of CRM. Thanks.

Joe R said...

Thanks for this article, it saved the day for me. I needed exactly this and it worked like a charm. I made one small addition, I wanted to have headings in my list of multi select items, so in my picklist I preceeded my headings with --- and revised the onload code to display those as underlined, bolded, slightly large font labels with no checkbox. Thanks again.

Anwyll said...

Hi,

I have no experience in programming, and dont know where to start in editing the code.

My Picklist values are appearing next to eachother, rather than on top of eachother.

so basically i have about 3-4 checkboxes next to eachother, then the next checkboxes on the next line.

how do i get the values to display on top of eachother (one checkbox per line)?

also, i dont know what you guys mean by:

*NOTE: There is a 'br' flag(var addBr = document.createElement(...) ) just been ignord by blogspot, please replace it when you paste the code!!!

regards.

Anonymous said...

Thanks, you are a CRM Master!

Bob said...

I won't claim to be an expert at this, but how did anyone get this to work with the missing brackets in the If/Else statement in the middle of the script?

Other than that, and the
thing, this works great, and fills a gap that's been missing for a long time.

Thanks Jim!

Ralph said...

hm works only 2-times. nothing changed in code. now its single-line.

Fredrik Nelson said...

Jim, thanks very nice solution, one small thing i been trying to solve is how to set the forms IsDirty property to true through the onchange event. I want the change och picklist to prevent the form from closing as any other "isdirty" would do for the form.
Any ideas of where to put it, can it be done in the rendering part?

Stella said...

Dear Jim,

as a new CRM developer, I was wqondering if the is a way to repeat the code for another similar checkbox select list

thank you

John said...

Jim, thanks for this post. I just gotta get it to work now :-).

Please help me clarify:
1. I need to create the pick list first in the picklist attribute, then create an nvarchar attribute that's long enough to place hold all the picklist texts.
2. What goes in the "..."
for statement var addBr = document.createElement(...)
3. So far I'm getting a load event error because of the code line above.

Any sample codes for this line would be much appreciated!

Stella said...

dEARS,

i WAS ABLE TO HAVE 2 MULTIPLE SELECT LISTS THAT WORK FINE

iF THERE IS NEED FOR HELP ON THIS LET ME KNOW

Anwyll said...

Hi Stella,

Please can you be so kind to inform me on how you got this to work, because when i tried, the multi picklist options were apearing next to eachother rather than neatly on top of eachother...

In addition, have two multi picklist options did not work.

thanks in advance

Stella said...

TO HAVE MORE THAN ONE MULTIPLE SELECT LISTS:

javascripts crash if you have functions, or variable names more than ones. So all I did was to change the var names of all variables and also changed the name of the functions of the second picklist.

THis is not the best way because the code becomes very long. It is best to put these functions in a common plave and call it in the form event. I am not surte yet how this is done

If you need the code let me know. I do not want to paste it here it is too long

Anwyll said...

thanks so much...

email to tylorblack@yahoo.com

be sure that we will exchange information and solutions. email me anytime for assistance if needed...

thanks again.

. said...

酒店經紀PRETTY GIRL 台北酒店經紀人 ,禮服店 酒店兼差PRETTY GIRL酒店公關 酒店小姐 彩色爆米花酒店兼職,酒店工作 彩色爆米花酒店經紀, 酒店上班,酒店工作 PRETTY GIRL酒店喝酒酒店上班 彩色爆米花台北酒店酒店小姐 PRETTY GIRL酒店上班酒店打工PRETTY GIRL酒店打工酒店經紀 彩色爆米花

cheerfulwish said...

I changed the code of BR tag
Still I get an error onload event of "Object Expected"
Please help
cw

Sheri said...

Hi all - I can't get this to run, but I'm not clear where it is erroring. I added the
, but I'm not sure what other edits might help. Could someone who got this working please let me know of any other edits were necessary? Thanks!!

Prince said...

Hi Stella,

Pls share the code for 2 multi select picklists with me. Would appreciate.

My Id is maverick.prince@hotmail.com

Thanx a lot in advance.

Regards
Prince

Schrady said...

Jim, I need your help.

How do I make the selectabled options in the picklist searchable? Searchable as you can pick the field to search using the advanced find and the "equals" operator.

Thanks in advance.

Schrady

PS. Great code by the way!

Jack said...
This comment has been removed by the author.
Jack said...

Hi Jim,

Great code, got it working fine, however is there a way to make the field a required one?

Making the field business required doesn't work because when you select an option CRM doesn't recognise it as selected until after the form is saved. This means that even with values selected if the field is business required CRM says it's still empty.

Any help would be much appreciated!

john said...

This is Great! What about if the item is not in the list? How could I dymanically add a field that would be a free form text field if "other" is selected? And to take it one step further, How do I get it to automatically update the list with the new text?

Marko said...

Advanced find is not working with this approach to the problem. Maybe I'm doing something wrong? I do get to save and retrieve info from the list, but in order to use advance find I have to query picklistvalue field, which is a text field and that's not really user friendly.

酒店上班請找艾葳 said...

艾葳酒店經紀公司提供專業的酒店經紀, 酒店上班小姐,八大行業,酒店兼職,傳播妹,或者想要打工兼差打工,兼差,八大行業,酒店兼職,想去酒店上班, 日式酒店,制服酒店,ktv酒店,禮服店,整天穿得水水漂漂的,還是想去制服店日領上班小姐,水水們如果想要擁有打工工作、晚上兼差工作兼差打工假日兼職兼職工作酒店兼差兼差打工兼差日領工作晚上兼差工作酒店工作酒店上班酒店打工兼職兼差兼差工作酒店上班等,想了解酒店相關工作特種行業內容,想兼職工作日領假日兼職兼差打工、或晚班兼職想擁有鋼琴酒吧又有保障的工作嗎???又可以現領請找專業又有保障的艾葳酒店經紀公司!

艾葳酒店經紀是合法的公司工作環境高雅時尚,無業績壓力,無脫秀無喝酒壓力,高層次會員制客源,工作輕鬆,可日領現領
一般的酒店經紀只會在水水們第一次上班和領薪水時出現而已,對水水們的上班安全一點保障都沒有!艾葳酒店經紀公司的水水們上班時全程媽咪作陪,不需擔心!只提供最優質的酒店上班,酒店上班,酒店打工環境、上班條件給水水們。心動嗎!? 趕快來填寫你的酒店上班履歷表

水水們妳有缺現領、有兼職缺錢便服店的煩腦嗎?想到日本留學缺錢嗎?妳是傳播妹??想要擁有高時薪又輕鬆的賺錢,酒店和,假日打工,假日兼職賺錢的機會嗎??想實現夢想卻又缺錢沒錢嗎!??
艾葳酒店台北酒店經紀招兵買馬!!徵專業的酒店打工,想要去酒店的水水,想要短期日領,酒店日領,禮服酒店,制服店,酒店經紀,ktv酒店,便服店,酒店工作,禮服店,酒店小姐,酒店經紀人,
等相關服務 幫您快速的實現您的夢想~!!

yi said...

Hello, everybody. I am a new hand to be here. So nice to meet you all. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

aaa said...

I have modified the code from Jim into a function which allows me to reuse on multiple multi-select picklists in my form.
go download the code from the link below if you are interested.

### CODE ###
http://share1t.com/pmnq0q

Nick said...

Great one ! Worked for me !

varun said...

how will OnChange Event work on this

is it the same way

varun said...

can i have all the check boxes vertical

please help me with the changes

olli_ger said...

Hey all,

great code by the way ;)

I ran into one issue, when re-loading the form. the selection vanished, and only one check remains in the multi-picklist. I know that my selections are stored in the separate field, but the client will not no that, cause we are hiding that field. Are there any modifications to the code, that forces the seletions to be visible after save/load? thanks in advance for your help, Olli

Ian Ceicys said...

I couldn't get the code to work. Fixed the BR Tag so that the line reads:

var addBr = document.createElement("
");
//it's a 'br' flag

I ended up getting this working...by saving the form and closing my broswer.

When I re-opened the preview it works.

chao said...

Hello Jim,
Thank you for your codes. It works well in my environement.
While I have a question concerning the line break in JavaScript:
If I want the seleted values from the picklist to display in a text box, and splitted by the line break, is it possible? If yes, could you give us an example? especailly how to split the selected values by line breaks.
Thanks in advance,
Zheng Chao

Andriy a33ik Butenko said...

Thank you for this code, Jim!

咪摩兔 said...

八大娛樂全套-指油壓半套

高雄汽車借款.高雄當鋪.順利當鋪
高雄當鋪.高雄汽車借款.華旗當鋪
台中當鋪.台中汽車借款.全國當鋪
台中汽車借款.台中當鋪.利源當鋪

Michael said...

STELLA!!! Can you please send me your code???
Or can someone else who has it please?

michaelkarls01@gmail.com

Michael D. Medsker said...

I am trying to use the code as a function in the onLoad event for a form. Works great when I do a save but if I save and close all the check boxes and plv is null again. So I am thinking I need to split this into two parts, one for the onLoad so that the check boxs display and then another part for the onSave event that puts plv.value and then adds the back the values if they have or have not changed. I am assuming that I would need to collect the data from the existing plv.value to check the items at the onLoad. Am I way off on this?

gprof said...
This comment has been removed by the author.
gprof said...

O HAVE MORE THAN ONE MULTIPLE SELECT LISTS:

When calling the function multiple times, the values of the first picklist are not saving. You need to pass the picklist and text field to the function picklistOnClick() for this to work.

You can download the adjusted code at:http://crmxpg.nl/wp/2010/10/05/how-to-create-a-multi-select-picklist-in-ms-crm/

Thanks Jim for the original script.

pengleang said...

It's realy the MVP who is my idol with CRM, jim.

Hamilte1 said...

This is great, but have you created any similar scrips for crm 2011 online?

June Yap said...

Jim, thanks for the post. I'm able to get the codes up. However, i need it to be in radio buttons instead. Can that be done? Please advise.

SP_Go said...

Hi Jim,
Thanks for wonderful post. Bu i have an issue where i cannot see the same in advance find? when i select tye picklist criteria in advance find / views the result shows zero records. Can you please help me out with this please?

Thanks much again!

SP_Go said...
This comment has been removed by the author.
Jwalin said...

Could you please also let me know how to disable when it it is update mode

msm8504 said...

Hi Jim

The code works great when the user is logged in and has system customizer privileges. But when logged in as a user role of let's say VP of Marketing I receive the following error:

There was an error with the field's customized event.
Field:window
Event:onload
Error:Object required

Is this error from the code or am I missing a required user privilage in order to see this custom code?

Aroop Vachali said...

Hi Jim,

Very useful post, I have another workaround which anyone can implement without modifying code and would be useful if you have a long list of values.

Please visit http://aroopv.blogspot.com.au/
Appreciate your comments

Regards

Aroop Vachali

Unknown said...

Hello Jim

Thanks a lot for the nice piece of code. I have implemented the code and it is working beautifully. Now the requirement is to make the picklist a mandatory field and if do make the picklist field mandatory CRM always through an error please select a value for the picklist. I tried to force submit the field by onSave/Onload event but without any luck. Can you please provide me your expertise regarding this issue?

Thanks in advance.
Kind Regards
JJ

Luis Enrique said...

Great code! Very clean and useful for any CRM implementation.
Thanks a lot Jim!

Cara Dippenaar said...

Hi Jim,
If we wanted to create 2 picklist on one tab, what variables should be changed?

The two pick lists i have would be one for product and one for services. (Product A, B, C, D and Services 1, 2, 3)

i put a PRD in front of the following variables for the script relating to that crmForm.all.new_producttype/values
So i changed: PL to PRDPL and PLV to PRDPLV like wise with the following;
addDiv, i, addInput, addLabel, addBr, PLVT, PLV.value and getInput.

I aswell added it infront of pText and pOption.

So anything that had a var

likewise with the services SRVPL, SRVPLV, etc, etc

However, when i add one script for crmForm.all.new_productype and values and one script for crmForm.all.new_servicestype and values i get an error.


the error is:There was an error with this filed's customized event. Filed: window, Event:unload Error:'PRDPLV.value' is null or not an object.


i suspect it is the onSave() section.

Could you help me please.