Extending Lookup Fields with “Add new item” option
Development, JavaScript, jQuery, Productivity, SharePoint, Tools
How many times were you working with Lookup Fields and just when you were about to pick a value, you found out that it’s not there. How many clicks did you have to make to get to the Lookup List, add the new Lookup Item, get back to where you were first and add your item? While it sounds trivial, it’s the only way things can be done in out of the box SharePoint. You could of course create a whole new Custom Field Type which would contain an “Add new item” link, but there is an easier way to get this done.
Inspiration is just around the corner
A couple of days ago I attended a Dutch Information Worker User Group (DIWUG) meeting. Two great sessions were scheduled for that evening: “Adding new building blocks to SharePoint” by SharePoint MVP Ton Stegeman and “Best practices Excel Services” by C# MVP Dennis Vroegop. It was Ton’s session that inspired me with solving the Lookup Fields challenge.
First things first: what could you do?
Before we focus on what I’ve done to improve the Lookup Fields experience, let’s a have a look at some standard approaches.
Custom Field Type
Probably the very first thing that comes to your mind, when talking about changing the behavior of SharePoint Field Types, would be to create a Custom Field Type. You would inherit from the SharePoint Lookup Field and extend it with an “Add new item” link. While it sounds simple, there are a couple of issues here that you should keep in mind.
As you know SharePoint ships with Lookup Fields and Multi Lookup Fields which allow you to select multiple values. The problem is, that the underlying Field Types are hard coded so once you change the “Allow Multiple Values” setting, the Field Types revert to the standard SharePoint Field Types: so much for inheritance and a Custom Field Type.
Developing Custom Field Types is not easy especially if you want to do it right. Once provisioned, a Custom Field Type is available on all Web Applications in the Farm. This means that a Custom Field Type should be generic, reusable and not depending on any Web Application/Site Collection specific resources. Additionally, while creating a Custom Field Type you have to consider all the different places a Site Column can be used: all List Forms, Page Layout Controls, Grid View, not mentioning the Document Information Panel which doesn’t support Custom Field Types at all.
Creating a Custom List Iterator
All fields on the List Forms are displayed by a very smart control called List Iterator. What it does, is that it iterates through all available Fields in the given List and renders the display/input controls for every one of them. What you could do is to subclass the List Iterator and extend it with some extra functionality which would add an “Add new item” link to every Lookup Field.
The problem with a Custom List Iterator is that you would have to add it to the List Forms of the given List before you can use it. This means that you wouldn’t be able to use any of the standard SharePoint lists: quite a price to pay for something that is supposed to improve the editing experience.
…so let’s extend the List Iterator with a Control Adapter?
You could try to extend the functionality of a List Iterator with a Control Adapter. Basically you would do the same as in the previous approach but then you would implement the logic in a Control Adapter which would automatically apply it to every List Iterator on your site. Unfortunately, also this approach has a couple of drawbacks.
First of all Control Adapters are not very easy to deploy. A Control Adapter consists of an assembly and a .browser file which has to be deployed to the App_Browsers folder in your Web Application’s IIS directory. As deploying to App_Browsers isn’t supported by SharePoint Solution Packages (WSP), you would have to create a Timer Job to get this done properly.
Another thing that you should consider is that a Control Adapter is scoped to a Web Application. Once provisioned, it is being applied to every instance of the given type in given Web Application unless specifically disabled by that very instance. Not surprisingly 99,9% controls don’t disable Control Adapters what means that you could extend List Forms that you didn’t want to customize in the first place.
What about <SomeOtherApproach>?
The great thing about SharePoint is that you can do almost anything in numerous ways. I’m quite sure there are some other approaches which you could try to get this done. As long as they involve custom development, I’m quite sure they would get too complex very soon. While adding a simple “Add new item” link to a Lookup Field sounds easy, it isn’t – at least unless you get out of the development box.
How I got inspired
In his presentation Ton discussed some customizations he did for a few of his customers. All of those customizations had one thing in common: they could’ve been done using the standard approach that involves custom development. Instead Ton used a combination of JavaScript/jQuery and SharePoint Delegate Controls to get the job done – the easy way.
In one of the cases Ton presented a Lookup Field with an “Add new item” link. In the case, that Ton discussed, the link was attached to a specific Lookup Field. That’s when I got inspired: why not take that concept and use it to create a generic solution that would work for every Lookup Field…
The requirements
While thinking about the solution I’ve defined some requirements.
Support standard Lookup and Multi Lookup Fields
The very first requirement that I defined was that the solution would have to work with the standard SharePoint Lookup Fields: both single and multiple choice. No Custom Field Type should be developed.
Support different Lists
The solution would have to be generic enough to work with every Lookup Field within the given Site/Site Collection. As every Lookup Field can retrieve data from a different List the solution should make it possible to define the target List for the “Add new item” link.
Be end-user friendly
While I could include the “Add new item” link in the solution itself I though that it would be better if it was possible to define the text for every Lookup Field separately. Like this you could add an “Add new Category” link to a Lookup Field that allows you to pick a Category instead of a standard “Add new item” link.
Support Content Types
Depending on your scenario the items in the Lookup List might consist of only the Title, but they might be more complex as well. The solution should support all kinds of content. Additionally if the Lookup List contains items of multiple Content Types the solution should allow you to define which Content Type you want to use while adding new item.
The solution
The solution I came up with was the same one Ton discussed in his presentation: to use a SharePoint Delegate Control which would include some JavaScript to get the job done.
The most challenging part was how to complete all the different requirements while working with nothing more than standard SharePoint Lookup Fields. To get the job done I decided to use the Field’s Description to store all the information required by the “Add new item” link.
Adding the “Add new item” link
Before you start extending your Lookup Fields with “Add new item” links, you have to activate the Imtech Extended Lookup Fields Feature. Depending on your scenario you can activate adding the links either for a particular Site or a whole Site Collection. After you activated one of the two Features you can proceed to configuring your Lookup Fields.
In order to provide all the required information to the JavaScript script I came up with the following syntax:
List=ListUrl;Label=Link Text[;CT=Content Type ID]
for example:
List=/Lists/Categories;Label=Add new Category;CT=0x01001234
The List parameter contains a valid URL to a List. The URL of the List New Form (/NewForm.aspx) is being appended to that URL.
The Label parameter contains the text that is being displayed as the “Add new item” link. That text can contain any chars except the ; (semicolon).
The last parameter – CT is optional and allows you to provide the ID of the Content Type that you want to use to add new item to the Lookup List.
And that’s all you really need to extend your Lookup Fields with an “Add new item” link. A working SharePoint Solution Package is available on CodePlex. As the solution doesn’t contain any custom code you can explore the source by changing the package’s extension to CAB and exploring its contents.
Download: Imtech SharePoint Extended Lookup Fields (23KB, WSP)
October 4th, 2009 at 5:58 am
Waldek:
This is a very cool idea. I hope you don't mind, but I'm borrowing the idea for our jQuery Library for SharePoint Web Services (http://spservices.codeplex.com). By using the Web Services, we can make this work without having the user provide the List and Label in the Description.
Our new function SPServices.SPLookupAddNew will be called like this:
$().SPServices.SPLookupAddNew({
lookupColumn: "Region Name", // The display name of the Lookup column
promptText: "Add new " // Text to use as prompt + column name
});
M.
October 4th, 2009 at 5:07 pm
@Marc: great to hear it's something you can use :)
October 5th, 2009 at 8:23 am
Waldek,
what a nice, simple and clean solution! This inspired me to realise some other things that I have mind.
October 9th, 2009 at 1:20 pm
oh much thanks, Waldek! That's great and easy solution!
October 9th, 2009 at 8:43 pm
Is anyone else having problems getting this javascript to work in IE? It works fine in FireFox and Opera but I get nothing in IE8
October 9th, 2009 at 11:28 pm
@Matt: IE8 is the only browser I've tested it with to be honest. Sure you're not having cache problems? Do you see any JavaScript errors?
October 12th, 2009 at 7:51 pm
I think the problem was the complexity of the selector statement. Your downloadable source includes this line:
$("#onetIDListForm select[id$=Lookup]").parents("td.ms-formbody").each(function() {
I had to change that line to this to get it to work:
$("td.ms-formbody").each(function()
I'm sure that my selector is less elegant, gets a few more elements and does require more work. But it works on all of the machines and all of the browsers I tested it on.
I wonder if an element of complexity was that I have three lookup fields on the same form I was testing with? I didn't try having only a single lookup on the page.
October 12th, 2009 at 10:35 pm
@Matt: I'm really surprised you got it working in FF but not in IE. I would suspect something like a difference in selector to depend on some SharePoint Features but not on a browser, especially with a framework like jQuery.
I have tried it on three fields myself (two single select and one multi select). It worked okay, so the difference should be in the HTML rendered by SharePoint. Different ServicePack perhaps?
November 4th, 2009 at 2:17 am
I am trying to use this feature for a multi-select list option scenario, but after activating the feature,I am unable to use the multi-select list option lookup control. Is there a way to fix this? I am using IE-8 in my dev. box.
November 4th, 2009 at 7:45 am
@Phoenix: do you have any more details about the error you're getting?
November 5th, 2009 at 12:22 pm
Waldek: I am unable to use the lookup control at all. Once I select the item from left list box, when I click on button to move the item to right listbox, the item doesnt move at all. Is there any code change required?
November 5th, 2009 at 2:44 pm
Hi Waldek, same here. It seems to work fine with single lookup but not multiple. No JavaScript-errors afaik.
November 9th, 2009 at 10:43 am
Waldek: Any update on this resolution? I am relying on this option and hence can you pl. let me know if you have a resolution?
November 9th, 2009 at 11:07 pm
@Phoenix: I've managed to solve the issue. It had to do with altering the html source using the jQuery html() function. Here is the new code (remove the var link = '…'; and add instead):
this.lastChild.data = "";
var div = document.createElement("div");
div.setAttribute("style", "padding-top: 5px");
div.innerHTML = '<img alt="" src="/_layouts/images/setrect.gif" style="vertical-align: baseline"/> <a href="' + lookupList + '/NewForm.aspx?Source=' + escape(location.href) + '" rel="nofollow">' + label + '</a>';
this.appendChild(div);
November 10th, 2009 at 3:53 am
Nice post Waldek !. Is there a way to get your code working for a Document library lookup ? There is this lookupID which is required for upload.aspx – which I am not sure how to achieve using your code.
Can you please help?
November 10th, 2009 at 8:04 am
@Suzz: do you mean the URL of the upload.aspx page? The only thing I've noticed there is the List ID and the URL of the RootFolder. Could you explain a bit more what is it that you would like to achieve?
November 10th, 2009 at 8:58 am
Yes Waldek !. you are correct. I am trying to hook a multiple lookup from a document library within SharePoint list, so that users can upload the document and then further provide SharePoint list data. How do I achieve this scenario? How do I get the List ID?
November 11th, 2009 at 8:51 am
@Suzz: I've just browsed through the rendered HTML and it seems like there is no variable that points to the list ID. There are some links inside the page that contain the list ID but I'm not sure if it's a reliable way to obtain it.
November 26th, 2009 at 1:06 am
What a fabulous solution! I have a very complex series of related lists and this was just what I needed.
However, I've run into a snag. It's working fine on a couple of lists, and it was working on a Request list I have, but suddenly it's stopped working for the Request list. I added a custom Display form, but the New and Edit forms are the defaults. I am also using content types. Any ideas as to why this would stop working suddenly? If you can help, I'd really appreciate it as the whole solution is depending on this.
November 26th, 2009 at 1:27 am
I also tried the code above to fix the multiple lookup issue, but now nothing is working. No link, just the code showing as the description of the form.
November 26th, 2009 at 2:02 am
Ok, even odder. It works for some fields on the same form, but not others! I\'ve tried deleting the description and re-adding it. I\'ve copied the exact same description from one field that is working, and copied it to another. It is not making any sense.
November 26th, 2009 at 8:39 am
@Elizabeth: Have you customized anything about either the Master Page or the List Form? The solution uses a Delegate Control to hook up JavaScript. If the Delegate Control is missing in your Master Page, the control can't get attached. Also, if you have changed anything about the List Form, it might happen, that your HTML is different than default SharePoint HTML and is not being picked up by the JavaScript selector for rewriting.
November 26th, 2009 at 4:31 pm
Elizabeth:
Not to "steal"anyone from Waldek, but you could try my jQuery Library for SharePoint Web Services (http://spservices.codeplex.com) solution (first comment above). Folks have been using it with no issues. I've added more options, so it's pretty flexible.
M.
November 27th, 2009 at 4:56 am
Thanks for the suggestions. Unfortunately, I haven\'t customized anything on the forms or master page so that\'s not it. The odd thing is that it works on some of the fields on the page but not others (all on the same page). And it\'s consistent across both the new and edit pages (the default Microsoft ones).
The only thing I can think of is that I\'m still testing and I deactivated then reactivated the solution. I think the ones I added before I deactivate/reactivate are the ones not working, and the ones I added afterwards are the ones working.
December 3rd, 2009 at 8:31 am
@Elizabeth: as far as I can tell, the DelegateControl that I'm using shouldn't 'hang'. I think you would just have to do some more debugging as it's quite odd that it works for some fields but it doesn't for other. Perhaps there is something different about the non-working fields as for how the HTML is being rendered?
December 8th, 2009 at 7:11 pm
@Waldek: Thanks for the suggestions – I ended up using the JQuery solution Marc suggested and that worked.
December 8th, 2009 at 7:21 pm
Elizabeth:
Glad to hear my solution worked for you! (I can\'t tell if you\'re one of the Elizabeths I\'ve been corresponding with.)
M.
December 8th, 2009 at 8:37 pm
@Elizabeth: Great to hear you got it working.
@Mark: Thanks for the assistance :D
January 5th, 2010 at 1:17 pm
I have the same problem as Phoenix. Can you tell me where I have to change the code? I need the sources for that? Thanks!
January 5th, 2010 at 4:17 pm
@zerabba: see comment
January 9th, 2010 at 11:14 pm
Hi Waldek,
I am a novice trying to get to grips with WSS 3.0
I need the facility for adding addtional items to lookup field and have downladed and deployed the wsp on my site using the stsadm utility.
I know it is a silly question but, how do I use it?
Is ther anything I have to do in the site settings to apply your code?
A step-by-step procedure would be greatly appreciated.
Thanks in advance!
January 10th, 2010 at 4:24 pm
@Tony Caballero: You said you have deployed the WSP. Have you also activated the Feature in the Site (Collection) Features? The last thing that you need to do is to edit the description of the particular Lookup Field as shown in the images in the article above.
January 10th, 2010 at 7:14 pm
Hi Waldek,
Thanks for your prompt response (even on a sunday!).
I did deployed and activated the Feature and it shows in Central Administration.
However, I did change the Feature name slightly before I deployed it,(renamed to: ExtendedLooupFiedls.wsp).
Since then I have tried to retract it and this error error shows in Solution Management:
extendedlookupfields.wsp Error Globally deployed.
Now when I try to redeploy it again, I am told that the application is already activated.
Not sure what to do now…
Thanks
January 10th, 2010 at 7:58 pm
Hi,
Back again, I have managed to remove the feature (I found an excellent link about using stsadm to remove failed solutions) so I have re-applied again, this time without renaming the Feature. It shows as Active in Site Collection Features.
I dont understand from the text above where do I make the changes for the LookUp field?
I have a list named Customers and a List called Support Calls, in Support Calls I have a lookup field that picks the company name automatically from the Customer's list.
Could you please give me a simple "idiots guide" of where do I make the changes to utilize your Feature.
If it is too much bother, please say so and I will go away :)
Thanks in advance.
Antonio
January 10th, 2010 at 9:24 pm
@Tony: you have to edit the particular Lookup Field and then edit its description as described in the "Adding the “Add new item” link" section in the article above.
January 11th, 2010 at 11:53 pm
Hi,
If I put any content in the Lookup description field such as:
List=/Lists/Categories;Label=Add new Category;CT=0×01001234
This text appears in beneath the Field when I insert a new item.
I think I am being totally thick here, but I cant figure it out…
Is there any other examples I can see… please?
January 15th, 2010 at 7:01 pm
I am seeing the same issue as Tony – I am finding the text below the insert field showing the link and the label under the link.
February 23rd, 2010 at 6:45 pm
Great solution! Can you publish the updated version on Codeplex? (Update allowing selections to be added based on http://blog.mastykarz.nl/extending-lookup-fields-add-new-item-option/#comment-33603)
I'm also wondering if the rest of the data in the form can persist after adding a new lookup item. The entire form is cleared otherwise.
Thanks!
February 23rd, 2010 at 7:18 pm
@The Wire: We're having the exact same issue with data persistance. That would be a great addition to this functionality. The clearing of the form is really bothering our users.
March 16th, 2010 at 4:35 pm
I found that if my lookup list length < 21 or I use multiply values, all work ok, but if I use single-valued lookup with more than 20 elements I get plain description instead of link
March 17th, 2010 at 5:47 pm
@GMax: this would probably have something to do with the fact that such control has a different markup and you would have to modify the jQuery selector to pick up such a list as well.
March 18th, 2010 at 8:47 am
@Waldek: Yes, I understand it, but I have no knowledge about jQuery and can't make new selector, I try to add "#onetIDListForm text[class=ms-lookuptypeintextbox]" but failed… may be I need 'less elegant' Matt Ranlett's solution
March 18th, 2010 at 8:52 am
@GMax: you can always try Matt's suggestion and check if it does the job for you.
March 19th, 2010 at 8:54 am
Yes this solution seems to work… while it interfere with Marc D Anderson's SPServices.SPLookupAddNew doubling links.
pure your code do not give this interference.
anyway thanks for cool solution :)
March 19th, 2010 at 9:22 am
@GMax: Great to hear you got it working! :D
March 24th, 2010 at 7:32 pm
Ok, so here's my script with the updated function:
$(function() {
$("#onetIDListForm select[id$=Lookup], #onetIDListForm select[id$=SelectCandidate]").parents("td.ms-formbody").each(function() {
var fieldWrapper = $(this);
var text = fieldWrapper.text();
var regex = /List=([^;]+);Label=([^;]+)(?:;CT=([0-9a-fx]+))?/i;
var match = regex.exec(text);
if (match != null) {
var list = match[1];
var label = match[2];
var ct = match[3];
var href = list + '/NewForm.aspx?Source=' + escape(location.href);
if (ct != null && ct.length > 0) {
href += '&ContentTypeId=' + ct;
}
var link = this.lastChild.data = "";
var div = document.createElement("div");
div.setAttribute("style", "padding-top: 5px");
div.innerHTML = ' ' + label + '';
this.appendChild(div);
fieldWrapper.html(fieldWrapper.html().replace(regex, link));
}
})
});
Still doesn't work. Under the multipick fields all I see now is: "List=/Lists/Country;Label=Add New Country" instread of the "Add New …" hyperlink.
There's no errors showing up in Visual Studio so I don't know what's wrong. :(
March 24th, 2010 at 7:35 pm
Oh BTW, the first line of the ExtendedLokkupFields.ascx is also correctly pointing to the specific js file under /_layouts/…… so that's not an issue.
March 29th, 2010 at 8:05 am
here is my fix for multipick fields:
selector line shuld looks like this:
$("#onetIDListForm select[id$=Lookup], #onetIDListForm select[id$=SelectCandidate], #onetIDListForm input[class=ms-lookuptypeintextbox]").parents("td.ms-formbody").each(function() {
March 29th, 2010 at 2:21 pm
Great GMax, however, looks like your copy-pasting cut off part of the code.
March 29th, 2010 at 3:12 pm
I paste _only_ selector string, change yours(2nd in your post) to my and try it
March 29th, 2010 at 8:28 pm
Nope, nothing. Are you using the origianl code or the modified version Waldek suggested on Nov 9, 2009?
March 29th, 2010 at 9:57 pm
I've tried all angles. With and with out Waldek's method, with and without your new selector string.
Can you paste your entire function please?
Also, you could try Marc Anderson's jQuery method. It works very well, except I need one like this for when using wiki pages.
March 29th, 2010 at 10:22 pm
This is what I have, and nothing is showing up under the multipick field.
$(function() {
$("#onetIDListForm select[id$=Lookup], #onetIDListForm select[id$=SelectCandidate], #onetIDListForm input[class=ms-lookuptypeintextbox]").parents("td.ms-formbody").each(function() {
var fieldWrapper = $(this);
var text = fieldWrapper.text();
var regex = /List=([^;]+);Label=([^;]+)(?:;CT=([0-9a-fx]+))?/i;
var match = regex.exec(text);
if (match != null) {
var list = match[1];
var label = match[2];
var ct = match[3];
var href = list + '/NewForm.aspx?Source=' + escape(location.href);
if (ct != null && ct.length > 0) {
href += '&ContentTypeId=' + ct;
}
var link = this.lastChild.data = "";
var div = document.createElement("div");
div.setAttribute("style", "padding-top: 5px");
div.innerHTML = '' + label + '';
this.appendChild(div);
fieldWrapper.html(fieldWrapper.html().replace(regex, link));
}
})
});
Carl
March 30th, 2010 at 7:04 am
here is my function
it is work as well as Marc Anderson;s jQuery variant
$(function() {
$("#onetIDListForm select[id$=Lookup], #onetIDListForm select[id$=SelectCandidate], #onetIDListForm input[class=ms-lookuptypeintextbox]").parents("td.ms-formbody").each(function() {
var fieldWrapper = $(this);
var text = fieldWrapper.text();
var regex = /List=([^;]+);Label=([^;]+)(?:;CT=([0-9a-fx]+))?/i;
var match = regex.exec(text);
if (match != null) {
var list = match[1];
var label = match[2];
var ct = match[3];
var href = list + '/NewForm.aspx?Source=' + escape(location.href);
if (ct != null && ct.length > 0) {
href += '&ContentTypeId=' + ct;
}
this.lastChild.data = "";
var div = document.createElement("div");
div.setAttribute("style", "padding-top: 5px");
div.innerHTML = ' ' + label + '';
this.appendChild(div);
}
})
});
as far as I look, you do not implement latest changes in innerHTML, as described in above comments…
March 30th, 2010 at 7:07 am
hehe, some of innerHTML lost. I try to repeat it here:
div.innerHTML = '<img alt="" src="/_layouts/images/setrect.gif" style="vertical-align: baseline"/> <a href="' + list + '/NewForm.aspx?Source=' + escape(location.href) + '" rel="nofollow">' + label + '</a>';
March 30th, 2010 at 7:08 am
hehe, some of innerHTML lost. I try to repeat it here:
div.innerHTML = \'<img alt=\"\" src=\"/_layouts/images/setrect.gif\" style=\"vertical-align: baseline\"/> <a href=\"\' + list + \'/NewForm.aspx?Source=\' + escape(location.href) + \'\" rel=\"nofollow\">\' + label + \'</a>\';
March 30th, 2010 at 8:47 pm
Tx GMax. My div.innerHTML was there, but cut off like yours during copy-paste.
CW
August 27th, 2010 at 4:25 am
Have you looked at how you can prevent all the other fields from being cleared after adding a new option to a drop-down? I understand you are just redirecting back to the new form after adding the new option in order for it to reload and get the new value. I can imagine it would be quiet complex to maintain the other field values but I thought I would check to see if you had any suggestions.
August 27th, 2010 at 6:22 am
@David: I'm not sure this can be done, especially since the standard new form doesn't leverage AJAX out of the box. I guess you would have to use less of the standard components and use AJAX to add a new item in the list and then refresh the drop-down list. Still you would have to be careful not to break the ViewState.
August 27th, 2010 at 6:59 am
@David: Waldek's conclusion is the same I've arrived at. The only way I can think of to maintain the values is to use a modal window for the lookup list NewForm, which is a chunk of work I have decided not to take on, at least yet.
This is a common request for SPServices. When I built SPLookupAddNew based on Waldek's post here, I thought it would be a nice little utility function which would be used by admins to set up lookup lists. Turns out lots of people are offering it up to end users as well.
M.
September 2nd, 2010 at 9:33 am
Hi guys,
I had the same issues for the lookup field not working in IE and working onlyn in FireFox.
Note: I am implementing it on SharePoint 2010.
I did some investigation using FireBug and IE Developer tool. I found that in IE the drop down list is not rendered as an HTML select element; it is rendered as an input and an image elements.
This behaviour happens only in IE for single value lookup field and when there are a lot of items in the list to look in (in my case 50 items).
The HTML input field does not have any special naming in its ID, but it has a special class attribute set to 'ms-lookuptypeintextbox'.
Therefore, I have updated the JQuery selector statememt to select the parent element of the input control having the previous class name. This finally worked for me.
The selector script is now:
#onetIDListForm select[id$=Lookup], #onetIDListForm select[id$=SelectCandidate], #onetIDListForm input[class$=ms-lookuptypeintextbox]
I hope it will help who is facing such issues in IE.
Regards,
Marc Haddad
October 7th, 2010 at 3:48 pm
Hi,
thanks Waldek, I like this solution.
thanks Marc, your solution solved my IE issue too.
But till now it only works for single value lookup fields. For multi value lookup fields the link is available and it is possible to create a new item. But it is not possible to add one or more of the Items. I click "Add >" ("Hinzufügen >") and nothing happened.
I'm using SP Foundation (German).
Do you have any Idea?
Kind regards,
Bianca
October 8th, 2010 at 7:50 am
Hi Bianca,
In order to use this solution with SharePoint 2010, I did some modifications to the regex expression to use the new dialog box which display the new item form for SharePoint 2010. In addition, it is working for both single and multiple selections of lookup fields.
I will post all the code here.
First, in the description of the field, you should fill in the following express:
Site=/SiteA;List={000-…..00};Label=Add new item
Note that for the site parameter, you need to put the site where the lookup list is available
the user control will be the following:
$(function () {
$("#onetIDListForm select[id$=Lookup], #onetIDListForm select[id$=SelectCandidate], #onetIDListForm input[class$=ms-lookuptypeintextbox]").parents("td.ms-formbody").each(function () {
var fieldWrapper = $(this);
var text = fieldWrapper.text();
var regex = /Site=([^;]+);List=([^;]+);Label=([^;]+)(?:;CT=([0-9a-fx]+))?/i;
var match = regex.exec(text);
if (match != null) {
var site = match[1]
var list = match[2];
var label = match[3];
var ct = match[4];
var href = site + '/_layouts/listform.aspx?PageType=8&ListId=' + list + '&RootFolder=';
if (ct != null && ct.length > 0) {
href += '&ContentTypeId=' + ct;
}
var openScript = "javascript:NewItem2(event, \'" + href + "\');javascript:return false;";
this.lastChild.data = "";
var div = document.createElement("div");
div.setAttribute("style", "padding-top: 5px");
div.innerHTML = ' ' + label + '';
this.appendChild(div);
}
})
});
This solution is working perfectly in both IE and FireFox; I am using it also for single and multiple lookup fields available at the same time in the form.
October 11th, 2010 at 8:29 am
Hi Marc,
can you please post this Part again:
div.innerHTML = ' ' + label + ";
Thanks a lot!
Bianca
October 11th, 2010 at 8:35 am
Hi Bianca,
It seems that the script was changed when pasting the code on the website.
the line of code is
div.innerHTML = ' ' + label + '';
this.appendChild(div);
It includes an image, anchor, and label inside the div.
Regards,
Marc
October 11th, 2010 at 8:36 am
Hi Bianca,
It seems that the script was changed when pasting the code on the website.
the line of code is
div.innerHTML = \'<img alt=\"\" src=\"/_layouts/images/rect.gif\" style=\"vertical-align: middle\"> <a href=\"javascript:;\" onclick=\"\' + openScript + \'\">\' + label + \'</a>\';
this.appendChild(div);
It includes an image, anchor, and label inside the div.
Regards,
Marc
October 11th, 2010 at 9:19 am
Hi Marc,
many thanks!
It's working :-).
Kind regards,
Bianca
October 21st, 2010 at 6:09 pm
Any way the link can open in a new window?
October 24th, 2010 at 12:54 pm
@Randy: While it could be done by modifying the JavaScript responsible for rendering the link and adding the target attribute to the link it would have a serious flaw: after adding a new lookup value it wouldn't automatically appear in the drop down list as the page needs to be refreshed.
November 2nd, 2010 at 9:39 am
There is noting happen after deploy the WSP.
I've downloaded the WSP, addsolution and deploysolution on WSS3.0, active it in site setting, add a lookup column and fill in the description as below:
List=/it/Lists/laptop;Label=Add new Model;CT=0x0100E4E81E4D55F39940846D77F321942332
Is there any wrong? I've tried Chrome, IE8 and FF.
Thanks.
November 2nd, 2010 at 6:19 pm
@XexeX: Have you checked if you have any errors in the JavaScript? Did you do any changes on the New/Edit Form?
November 3rd, 2010 at 3:07 am
@Waldek Mastykarz: How can I check the Javascript error? there is no error pop-up in IE8 and error in status bar.
Is there any code that I should hardcore to SharePoint?
I'm not a programmer, there may be somethings missing…
I don't make any changes on New/Edit Form.
Thanks.
November 3rd, 2010 at 7:12 am
@XexeX: Debugging JavaScript is easier when using Firefox. You should check the Error Console and see if there are any errors.
November 3rd, 2010 at 7:22 am
Yes, I've found a error "Unknown property "wordwrap"" in NewForm.aspx
November 3rd, 2010 at 7:28 am
@XexeX: Unfortunately, it doesn't ring a bell. Do you know where does this error come from? Additionally, you might try attaching a breakpoint to the JavaScript code and checking if it's failing or not.
November 3rd, 2010 at 7:43 am
@Waldek Mastykarz
Do I need to insert JavaScript code to use WSP?
Moreover, I may type the wrong Content Type ID in Description, will the "add new item" show with wrong ID?
November 3rd, 2010 at 7:49 am
@XexeX: Sorry but I don't really understand your question. What do you mean with 'Do I need to insert JavaScript code to use WSP'?
The Content Type ID is being used to preselect the right Content Type in the New Form but you still should be able to see the link.
November 3rd, 2010 at 7:58 am
@Waldek Mastykarz: I've just enable this add-on in Site Setting, and fill in the syntax in description of lookup field, that's all.
As I know, some add-on such as jQuery need to insert code in the page.
November 3rd, 2010 at 8:13 am
@XexeX: In this solution the JavaScript code is being automatically added using a Delegate Control so all you need to do is to activate the Feature.
November 3rd, 2010 at 8:39 am
@Waldek Mastykarz: IC, I don't know where's the problem.
Thanks for your help.
November 3rd, 2010 at 8:39 am
@Waldek Mastykarz: IC, I don\'t know where\'s the problem.
Thanks for your help.
November 22nd, 2010 at 8:06 pm
[...] for the user to follow // which allows them to add a new value to the Lookup list. // Based on http://blog.mastykarz.nl/extending-lookup-fields-add-new-item-option/ // by Waldek Mastykarz // altered for SharePoint 2010 by Emerson Bruce [...]
April 29th, 2011 at 4:42 pm
Extending Lookup Fields with “Add new item” option
Windows 2003 Enterprise Server SP2
WSS v3
When the "Allow Muliple Items" is selected you cannot "Add" or "Remove" any of the times.
Recommendation?
April 30th, 2011 at 7:59 am
@Marc: what do you mean with 'Remove' is not available? What are you referring to?
April 30th, 2011 at 2:50 pm
Thank you for the replay. On a New or Edit form (not custimized), with "Multi Look Field", your example http://mastykarz.nl/blog/images/ExtendingLookupFieldswithAddnewitemoptio_6981/SingleMultipleLookupFields_thumb.pngthe "Add and Remove" function does not execute.
April 30th, 2011 at 2:51 pm
Thank you for the replay. On a New or Edit form (not custimized), with \"Multi Look Field\", your example http://mastykarz.nl/blog/images/ExtendingLookupFieldswithAddnewitemoptio_6981/SingleMultipleLookupFields_thumb.pngthe \"Add and Remove\" function does not execute.
April 30th, 2011 at 2:53 pm
Sorry wrong link to the png.
http://mastykarz.nl/blog/images/ExtendingLookupFieldswithAddnewitemoptio_6981/SingleMultipleLookupFields.png
April 30th, 2011 at 3:10 pm
Marc:
I borrowed Waldek's idea and expanded upon it for SPServices. The SPLookupAddNew function ought to give you the functionality you need if you want to try it out.
M.
August 4th, 2011 at 7:23 am
The problem with a Custom List Iterator is that you would have to add it to the List Forms of the given List before you can use it.
_____________________
Kim
August 25th, 2011 at 9:05 am
Hi, tnx for this great solution. I have a problem to implement it on one of my sites. The strange thing is that it is just one site, it works ok on others. Does anybody have any idea what could cause this? Thanks in advance.
August 25th, 2011 at 11:56 am
@Zarko: Could you tell something more about the problems you're having?
August 25th, 2011 at 12:02 pm
It is probably due to a template I am using for this particular site. Even lookup field drop down looks different, I see the description as it was entered(I see "List=/Lists/ListName;Label=…"). If you have any clue what could cause this kind of behaviour please let me know. Many thanks in advance
August 26th, 2011 at 6:09 pm
@Zarko: Most common reasons of this not working is a JavaScript somewhere on the page or a custom Master Page that uses different HTML and therefore requires modifying the selectors.
September 2nd, 2011 at 5:56 pm
Hello – how can you do something similar with SharePoint 2010 list form customized with InfoPath 2010? Is it possible?
Thank you very much!
September 3rd, 2011 at 9:20 am
@Renee: While you could add some JavaScript on the page, if I'm not wrong InfoPath forms are loaded in an iframe and most browsers do not allow to modify contents of an iframe. I guess you would have to check whether it's possible in your scenario (ie. os + browser + form).
December 1st, 2011 at 1:43 am
I created a feature in 2010 to create a link to the newform.aspx and then after the user closes the moodal dialog, the item the user just added is selected in the dropdon box on the 'parent' form. I posted the code at
http://social.technet.microsoft.com/Forums/en-US/sharepoint2010customization/thread/bb8e0783-1ba9-4d1e-8e2a-bd96813279de
January 3rd, 2012 at 2:15 pm
@ Marc Haddad : I tried your code , but its not working in my sharepoint2010 site. Description text appears in beneath the Field as it is.
Steps I did:
upload Jquery version 1.6 to layout folder
Modify .ascx file with your code and J query path.
Not sure what I did wrong.
January 4th, 2012 at 7:56 am
its not working for sharepoint2010 multivalue lookup column…any solution for sharepoint2010 multivalue lookup with add new item functionality?
January 4th, 2012 at 6:02 pm
@Deepali: Mavention offers an updated version of this solution that supports SharePoint 2010. It is however a commercial product, so you would need to purchase a license if you're interested.
January 4th, 2012 at 6:13 pm
@Deepali: It is probably the issue in the reference to the Jquery file. In my case, I am adding the reference in the master; i have too many lookup fields in the same form, so it will be useless to add the reference in each ASCX control that is loaded at runtime.
try to put the JQuery path in the master page and let me know the result.
It is working properly for me in SharePoint 2010.
January 5th, 2012 at 11:50 am
Thanks Waldek and Marc for your quick response.
@Marc: I tried as you suggested but its still not working. Also I tried pitting alert message box in code to see where it goes wrong but that is also not working.
is it possible for you to post your wsp file for sharepoint2010 solution?
January 9th, 2012 at 9:17 am
@Marc : I tried this on new SP2010 site and Its working now…Thanks alot.
One more problem I am facing with this solution. If we add any value in lookup source list, it is not getting updated in newform.aspx of target list automatically.
January 11th, 2012 at 5:33 am
Its working fine with single value look up and as soon as I add new entry in source list, it appears in look up column.But same thing is not working with multivalued look up. Please assist me in solving this problem.
January 11th, 2012 at 10:59 am
Hi, how do i open the "add new item" opening on a new windows instead of the same one!?
January 12th, 2012 at 11:22 am
I've realized that it only show the add link when i have less than 20 items!!! Why?
January 16th, 2012 at 9:50 am
@Miguel: You could do this using JavaScript or by adding the target="_blank" attribute to the link. In SharePoint 2010 however you would preferably use Modal Dialogs.
January 16th, 2012 at 9:51 am
@Miguel: When exceeding the 20 items limit, SharePoint uses different control, hence the add link stops working.