New SPServices Function: SPComplexToSimpleDropdown
Last night, I finally got around to writing a function which *many* people have asked me for, and I called it SPComplexToSimpleDropdown. It’s available in SPServices v0.6.2ALPHA1, and I’d appreciate any testing you might be able to do. The function is in an alpha state, which means that while I’ve tested it, I’m not certain that it is ready for prime time. I’m certainly interested in your thoughts and input before I release it in a production release.
Here are the details from the SPServices documentation page. Note that this is the documentation for the alpha version and will certainly change before the production release.
Functionality
The SPComplexToSimpleDropdown function lets you convert a “complex” dropdown rendered by SharePoint in a form to a “simple” dropdown. It can work in conjunction with SPCascadeDropdowns, but currently isn’t integrated. If you want to use the two functions together, call SPComplexToSimpleDropdown first.
While this new function doesn’t use the SharePoint Web Services directly, it can be used with other SPServices functions which do.
SharePoint renders dropdowns differently in Internet Explorer depending on whether they have fewer than 20 options or 20+ options. (In Firefox, Chrome, and other browsers, SharePoint doesn’t give us this “benefit”.) You can read more about these differences in my blog post Two Types of SharePoint Forms Dropdowns.
In the example below, Region is a “simple” dropdown. because it has fewer than 20 options. State is a “complex” dropdown because it has 20+ options.
How Does It Work?
The SPComplexToSimpleDropdown function works like this:
- When the function is first called, it finds the dropdown control for the specified column name. If the control cannot be found and debug mode is enabled, an error is shown.
- If the dropdown for the specified column is not a complex dropdown, we do nothing. This might be the case if the number of available options has decreased to fewer than 20, for instance.
- The input element for the complex dropdown contains an attribute called
choiceswhich contains all of the available values and their IDs in one long vertical bar (“|”) separated string, e.g., “(None)|0|Alabama|18|Alaska|114|Alberta|16|Arizona|8|Arkansas|98|...“ - The function takes that string of values and builds up a simple select (the kind you are most likely familiar with) and prepends it to the table detail cell (TD) which contains the complex dropdown. The new simple select will have its id set to
"SPComplexToSimpleDropdown_" + opt.columnNamefor easy selection later, if needed. - Next we hide the original dropdown.
- Finally, we attach to the change event for the simple select we have created. When a change occurs, we set the value of the complex dropdown to match the selected option and trigger a click event on the small dropdown image image, thus initiating some of SharePoint’s native script to handle the change. By maintaining the complex dropdown “as is”, we can ensure that the proper value is stored in the list when the changes are committed.
Note that if the function fails for whatever reason, you should still be left with a working form.
Syntax
$().SPServices.SPComplexToSimpleDropdown({
columnName: "",
completefunc: null,
debug: true
});
columnName
The DisplayName of the column in the form
completefunc
If specified, the completefunc will be called each time there is a change to columnName. Potential uses for the completefunc: consistent default formatting overrides, additional lookup customizations, image manipulations, etc. You can pass your completefunc in either of these two ways:
completefunc: function() { ...do something... },
or
completefunc: doSomething, // Where doSomething is the name of your function
debug
Setting debug: true indicates that you would like to receive messages if anything obvious is wrong with the function call, like using a column name which doesn’t exist. I call this debug mode.
Examples
This is the simplest example for using SPComplexToSimpleDropdown. You simply provide the columnName:
$().SPServices.SPComplexToSimpleDropdown({
columnName: "State",
});
and the complex dropdown (as shown in the image above) is converted to a simple dropdown:
Marc,
As luck would have it I’m working on a form today that can use this function. I noticed that the simple select your function generates has a title attribute with the display name of the column–slick! Details like that will make this function very useful for selecting inputs using the [title=””] selector in jQuery.
So far I’ve only encountered one issue when using two instances of a lookup column that both lookup the same list. The second instance does not validate; it acts like its empty. I’ll keep testing and follow-up. Is there an issue tracker for this on Codeplex?
Two other suggestions:
– First, in your Syntax example above, you use SPDisplayRelatedInfo instead of SPComplexToSimpleDropdown. I copy/pasted it without looking too close and I got a debug error for SPDisplayRelatedInfo.
– Second, it would be nice if the dropdown was not populated with a value by default. I know this isn’t the default behavior of the simple dropdown when using a lookup, but I’d prefer to “force” the user to make a selection rather than breeze over the dropdown because its already populated with the first item. Perhaps add this as an option (noDefault : true)?
Josh:
Thanks a lot for the input!
I’m giving the new simple select a title=”DisplayName” to match what SharePoint does. In the case of a complex dropdown, the input element has the title=”DisplayName”. By giving the select the same title, the selector logic in SPCascadeDropdowns (or any of the other SPServices form enhancement functions) will “see” the simple select first and operate on it instead.
Can you give me a little more info on the two instances thing?
Good catch on the docs above; I’ve updated here and on the Codeplex page. Copy and paste bites me again. Sorry about that.
I’m intending to mimic what the complex dropdown is doing with the simple dropdown. By this, I mean that the selected value *ought* to be the same. Because I’m using the options from the complex dropdown, I *think* that I’ll be respecting the structure fully. If you don’t think that’s the case, please let me know.
If you spot any more things you think are bugs, please post them to a Discussion thread on the Codeplex site. It’s a little easier to post code and such there.
M.
p.s. Are you testing in 2010 or 2007?
2007. I tried it with a standard list form and a custom DVWP list form.
Thanks. As usual, I built it with 2007, and I’m not setting up a similar test in 2010.
I’m trying your multiple-lookups-to-the-same-column thing now…
M.
Hi Marc.
It looks great. works for me. :)
Noticed the drop down list length behave strange. Even for small length content, ddl length goes too long.
May be this is by IE.
Thankssss
Syntax:
Can you explain what youre seeing that makes you say “Even for small length content, ddl length goes too long”? I’m seeing a that the select is a single line.
M.
Yes,
I’m having issue with multiple lookup lists.
it is not validating.
HI Marc,
For an exmple, if the dropdown has values 1,2,3 . The length of the ddl is loong.
Syntax:
I don’t know what that means. Long meaning wide or high? If high, more than three values (your 1,2,3) tall? If wide, significantly wider than a single character?
M.
I’m using this function with cascading lookups
It is width. I feel it takes the max length of the lookup field contains, though it is not visible depnding on the selection.
And also for multiple lookups, it has issues,
For an example
Country –> State –> City, I use your function for “City”, it works, but the value seems it takes as black.
But I know aware of this issue
Why wouldn’t you want it to be as wide as the widest value? That makes asll the values readable.
M.
Correction, the value it takes as blank.
Thanks for this Marc. I got it work for the most part. It seemed to work ok, but when I click Submit on the form, the values are not saved into my list. When I remove $().SPServices.SPComplexToSimpleDropdown from my code then my form saves properly. Of course, i’m back to original problem of having the Complex dropdown on my form.
I am using your alpha version of the script with CascadingDropDowns. I am calling your function first as instructed. I’m using SP 2007, WSS
Dan:
As you know, this is still an alpha, so there may still be issues with it and it may not work in all cases. There’s a thread on the Codeplex site about some issues I already know about the function. If you could read that thread and add any details about your situation which are different, I’d really appreciate it. Anything you can tell me about the column, what type of data it contains, etc. would be helpful.
M.
I;m having same issue as Dan’s
But it is 3 level of cascading dropdownlists. 3rd ddl is SPServices.SPComplexToSimpleDropdown.
So this ddl always gets null/empty value.
Hey Marc, thanks for the solutions, it work great, however it limits us from giving the USER the options to create their own list
(“That’s if Users list is > than 20”)… thats because we have to manually call the function based on the columnName. Is that any alternate way to dynamically apply the script to all drop-down list that is > 20, without going by columnName. Any ideas and Suggestion will be appreciated.. thanks in advance.
Ade:
You could simply wrap code around SPComplexToSimpleDropdown to dynamically call it for all of the 20+ columns in the page. I deliberately don’t make the functions work globally because there can be implications when a user adds a new column.
M.
This works awesome, thank you!
Hey Mark !
Your posts are helpful as always. For he SPServices.SPComplexToSimpleDropdown i have a question though. I read over the internet that it does not work for IE but works for all the other browsers. If that is the case then is there a workaround in place ? The values don’t get saved into the list. That is my actual problem.
Thanks in advance.
Binit:
I’m not sure where you read that “over the Internet”, but the function works with IE. In fact, SharePoint only emits the complex type of dropdown for IE, so it’s the only instance where you actually need it.
M.