Skip to main content

How To: Create Hyperlink to Modal Pop-Up Form

I was asked by a client recently if there was a way to create a hyperlink to a New Item Form anywhere within a site but still get the rich experience of the Modal pop-up window that grays out the background. (Note this is for SharePoint 2010 Only…)

I basically took the code directly from the “Add new item” and the “Add Document” link within the list view.

What this allows you to do is simply add in the following code to any content editor web part, Master page, or Page Layout in any site collection and display the form to be filled out. The user will get the nice experience of the modal window and not have to navigate away from their current page.

image

This could be used for example a feedback form that is included in the master page so whenever someone wants to give feedback it is always going back to a central list. The only that is required for you to know is the List ID and the site name.

Full Code For a List Item:
<a onclick="javascript:NewItem2(event, &quot;http://SiteName/_layouts/listform.aspx?PageType=8&amp;ListId={83747BB4-49C6-4181-B4A3-F8C6B611846D}&amp;RootFolder=&quot;);
javascript:return false;"
href="/_layouts/listform.aspx?PageType=8&amp;ListId={83747BB4-49C6-4181-B4A3-F8C6B611846D}&amp;RootFolder="
target="_self">
Submit Feedback</a>

Full Code for a Library Item:
<a href="http://SiteName/_layouts/Upload.aspx?List={94AC86A8-6774-4822-A197-A98542251678}&amp;
RootFolder=" onclick="javascript:NewItem2(event, &quot;http://SiteName/_layouts/Upload.aspx?List={94AC86A8-6774-4822-A197-A98542251678}&amp;RootFolder=&quot;);
javascript:return false;"
target="_self">
Upload a Document</a>

What you need to change:
URL: Change “SiteName” to your URL
List ID: Change the list ID to your custom list/library ID

  • To find out the list/library ID, simply navigate to the list/library you want to display and then click on list settings
  • Look at the end of the URL.
  • You will get something similar to this: %7B94AC86A8%2D6774%2D4822%2DA197%2DA98542251678%7D
  • Remove the first %7B and the last %7D
  • Then change all %2D’s to “-“
  • So the final would be 94AC86A8-6774-4822-A197-A98542251678

You could also add in an image right within the <a> tag and make a nice button for users to click on. Once you have customized the code you can now simply add the code to any page on the site and you will get the following results:

Site Collection 2 hyper linking to a list on Site Collection 1

image

Comments

Anonymous said…
sweet
Very cool, thanks!
What if your list has different content types, each having their own form? Is there a way to make this pop-up specific to the form of a certain content type?
Brad Porter said…
I'm trying to do this from within the Global Navigation, in other words, there is already a "Help" menu with a "Report an Issue" link underneath -- how to get this code to work....pulling my hair out....
Mike Zachry said…
Just what I needed. Note that when using a content editor web part to surface the link that you must select HTML mode on the ribbon. Found this at this article
Anonymous said…
Hi,

I have the following code that opens an announcement item but I can not figure out how to make it open in a dialog modal. Any thoughts?

a href=\"", web.Url, "/Lists/", this.Text, "/DispForm.aspx?ID=", item.ID, "\"

Thanks,
Rene
Unknown said…
Is there a trick to getting this to work? I have a SharePoint 2010 Wiki page that I want to add this to, and whether I do it within the browser (edit HTML code), or in SharePoint Designer, the JavaScript gets stripped out and I'm left with a link that simply opens the new list item in a non-modal window.
Unknown said…
I discovered the trick! Add a Content Editor web part and set the Content Link in that to a text file containing the JavaScript, as explained on http://sptwentyten.wordpress.com/2010/08/31/insert-javascript-into-a-content-editor-web-part-cewp/
Anonymous said…
Hi i am new to Share Point 2010,can please suggest on similar requirement, i am showing List Items in a SPGridView those items are opening in the same page but my requirement is to open in a Modal Window how to do this...

thanks in advance...
Carlos Delgado said…
I'm trying to do this with add new element from Feedback list, and I'm trying to put this link in Give Feedback button on Master Page... ,there's no error but can't work... some solution? Thanks!
Nathan A. said…
I have a list with multiple content types. How would I modify this code so that I could create a different link to open the new item form for each content type?
Nathan A. said…
My apologies - I see that you have already answered my above question in another thread. Guess i should read first! :)
Anonymous said…
Thanks this works great can you explain how to add an image after the /A tag?
Vinod Kumar said…
Thanks for the nice post.
king said…
I have an image in my .aspx page and when i click on it,a pop form should be generated having field like company,email and download button.If i hit download button,a pdf file attached to that form should pop up for open or save
Create Hyperlink to Modal Pop-Up Form for library is taking the Root Folder as library root always. But if i want to add it as part of a specific folder then how to do? Your ideas are most welcome
Thanks
Kandasamy
Anonymous said…
Is this possible across web applications? I have tried using similar code:

javascript:SP.UI.ModalDialog.showModalDialog({ url: 'http://wd0931/comms/test/Lists/Albert%20Hall%20Submission/newForm.aspx'

but when you submit the form, the modal pop up goes blank and stays there.
Anonymous said…
Linking to a folder within a document library. If you notice that the URL takes you to Http://yoursite/Shared%20Documnets/Forms/Allitems.aspx
You have to remember that the Sub Folder within the document library is back at Http://yoursite/Shared%20Documnets/Subfoldername
If you look at the ?RootFolder ... you will find %2fShared%20Documents%2fSubfoldername&FolderCTID=#####
the %2f is / and %20 is a space
Hope this helps
Unknown said…
Tried all combinations, .txt file, renaming the links... looks like my site extension gets stripped out every time too. The URL string for my site is 'xxx.com/sites/client' when I use the generated link it comes back only with 'xxx.com'.

Frustrating...
srinivas said…
Can you please send me the same popup message for 2007.

Req:
I have assigned a task to user,and user has to click on the title in task list and it opening in edit format i want that page in popup window in 2007.
hhaaaaha..Love this, it works like magics, thank you for the idea!!!
J.O Lind said…
Great article! I would like to add this link in a SharePoint Designer 2010 Workflow. I changed the PageType from 8 to 4 so now it opens in Display Mode and the links works great in a webpart page. But how on earth can Insert this link in an e-mail sent from a workflow?
Anonymous said…
Hey i have added this code to my Forms Page on sharepoint 2010 and when i click the link i get a pop up window but showing an error "Unexpected Error has occured" Correlation Id: with some code........

Has any one had this issue before?? Can anyone provide feedback on this?
Anonymous said…
Excellent post. We just used this to solve an issue. Thanks.
bcobra said…
How do we get the parent page to refresh with the item you just added. example link to add new item in lookup list return to parent and see new item in lookup column
Unknown said…
Hello every one,

I am creating a page for Frequently Asked Questions (FAQ). I do not want user needs to scroll down for reading each and everything. I want to provide hyperlinks to the text. If the person clicks on a question one popup window needs to appear with text. Is it possible for me to do it in sharepoint 2010. if yes please guide me.

Thanx
Anonymous said…
Are these codes compatible with SharePoint 2013? I've used these codes numerous times (all working flawlessly), but I'm running into multiple issues now... One form from a library will only open the "Add New Document" link instead of the actual form tied to the library. The other issue I'm having is that the forms from lists aren't opening in a pop up... They're opening in the list in which they live and I can't have that happen.. Is there something I could be doing wrong? Any help is appreciated.
Unknown said…
So I want to say thank you for the creation of this article. It helped me a great bit when trying to get the url to work. And this was a major hurdle considering I'm new to SharePoint in general.

Popular posts from this blog

SharePoint 2010 Base CSS Classes

This will be the first of many SharePoint 2010 posts. I will be focusing on a few of the main CSS classes used for SharePoint 2010 Public Beta. As the product becomes more final there might be some changes to the class names but I will be sure to create a new post if that happens. This will be quite a lengthy but it should be helpful. The default CSS given below are just highlights of the full CSS attributes for that class. I will be using a basic team site as my base for the screenshots. Here is a basic structure of the main areas that I will cover. Ribbon Row Table Row Left Site Actions Navigate Up Edit Tab List Browse Page Table Row Right Give Feedback Welcome Menu Workspace Body Container Title Row Title

SharePoint 2013 Responsive Table Columns

I have been wanting to write this one for a while now. It is really amazing how UX is really finding is way into everything that we use and interact with. From Custom applications both mobile and on a desktop to document management or large data visualizations. There is always room for better usability and new concepts. SharePoint lists and library functionality really has not changed much for the past 10 years... I remember back in 2003 when I saw the same table/grid based views of documents and list items that exists in SharePoint 2013. But now we can look at them in a whole new way! In this video blog you will see how to create a responsive CSS table so that when the browser size is reduced it will hide specific columns. However hiding data is not always the right thing to do. What if a user needed those columns to filter on or to use for comparison to another document? Well that is where the custom jQuery Column chooser comes in. It allows you to see what columns are displ