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

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
CRD 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.
CRD 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 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
Kerry M 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
arjun S 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
Rebecca Sides 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.
Robert Pollum 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 RowTable Row Left Site Actions Navigate Up Edit Tab List Browse Page Table Row Right Give Feedback Welcome Menu WorkspaceBody Container Title Row Title Title Logo Title Text / BreadcrumbPage DescriptionSocial Data SeparatorI like It Tags/Notes Top Header 2/Top Links li Static-Selected li Static SearchHelpStatus Bar Container Main A…

How To: Hide Left Side Navigation on Home Page

I was recently asked: "How can I hide the side nav bar on the main homepage layout ?? I want to be able to use the side NAV with in the team site etc etc, but I don't want it on the front page.. " There are a couple of ways to do this in SharePoint 2010. If you are using a non-publishing site you can add a Content Editor Web Part to the page and add the following to the HTML Source.
<Style>
body #s4-leftpanel
{
display: none;
}
.s4-ca
{
margin-left: 0px;
}
</style>
Basically the CSS above hides the left navigation Div, and then sets the content area to not have a left margin. Once you are done, simply modify the web part and hide it on the page. If you are using a publishing site for your homepage simply add the same styles specified above to a custom page layout. That way if you have a need for other pages that do not need the left side navigation you can re-use the page layout.

Small Calendar for SharePoint 2010 & 2013

First off I would like to apologize for the lack of posts. I have been really busy with my new role as the UX Design lead within Slalom Consulting Boston. I will share more about that in another post. In a previous post Create Really Small Calendar I showcased how to do this for SharePoint 2007. However the 2010 and 2013 calendar views have changed and therefore we cannot use the same method or CSS as 2007.SharePoint 2010 Small Calendar:
SharePoint 2013 Small Calendar:
See video below for a video walk through on how to create a small calendar for SharePoint 2010 and & SharePoint 2013 with just CSS.Per the video above here is the code that I referenced:2010 CSS link reference in Master Page:
<SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/smallcalendar.css %>" After="corev4.css" runat="server"/>2010 CSS:
/**** Small Calendar ***/
.ms-acal-item{height: 10px !important;}
.ms-acal-sdiv,
.ms-acal-mdiv,
.ms-…