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.

53 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

Anonymous 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

Anonymous said...

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

Anonymous 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.

Anonymous 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.

Anonymous 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.

Unknown 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 Lehradt said...

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

Anonymous 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

Unknown 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

Unknown 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

Unknown 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.

cheerfulwish said...

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

Unknown 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!!

Oz 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!

Unknown said...
This comment has been removed by the author.
Unknown 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!

Unknown 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.

Unknown 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 Boszhard said...

Great one ! Worked for me !

Unknown 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

Unknown 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.

Unknown 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

Unknown said...

Thank you for this code, Jim!

Mike Karls said...

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

michaelkarls01@gmail.com

Anonymous 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.

Unknown 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!

Unknown 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.

Unknown said...

Keep up the fantastic piece of work, I read few blog posts on this web site and I believe that your site is real interesting and has lots of great information. ERP Software in Mumbai || System Software || CRM Software in Mumbai || MLM Software

Unknown said...

I really appreciate spending some time to talk about that, I believe firmly regarding this and so really enjoy understanding more about this kind of subject.This is also a very good post which I really enjoyed reading. It is not everyday that I have the possibility to see something like this. CRM Software || MLM Software in Mumbai || ERP Software || System Software in Mumbai

Quân Đào said...

học kế toán thực hành cấp tốc
học kế toán thực hành cấp tốc
học kế toán thực hành tại cầu giấy
học kế toán thực hành tại thanh xuân
]học kế toán thực hành tại hà đông
học kế toán thực hành tại long biên
học kế toán thực hành tại long biên
học kế toán thực hành tại hải phòng
học kế toán thực hành tại bắc ninh
học kế toán thực hành tại tphcm
học kế toán thực hành tại quận 3
học kế toán thực hành tại hải phòng
học kế toán thực hành tại bắc ninh
học kế toán thực hành tại bình dương
học kế toán thực hành tại biên hòa
học kế toán thực hành tại vinh
học kế toán thực hành tại vinh
học kế toán thực hành tại huế
học kế toán thực hành tại đà nẵng
học kế toán thực hành tại đà nẵng
học kế toán thực hành tại đà nẵng
học kế toán thực hành tại hải dương
học kế toán thực hành tại hưng yên
học chứng chỉ kế toán
học kế toán ở đâu tốt