Thursday, September 16, 2010

Hide First Tab in SharePoint 2010 Navigation

I created a blog post on this for SharePoint 2007 HERE: But SharePoint 2010 is a bit more complex. Since it uses UL’s and Li’s for it’s navigation it is a bit harder to hide just one element.

image

You will notice that the Home tab actually is the first node and then has a child UL which represents the rest of the navigation Items. So the approach is to hide the first <li> <a> (display: none) and then simply just use (display:block ) to show the hidden <ul> <li> <a> tags.

Here is the CSS you could use to hide just the first node (home) tab in a SharePoint 2010 application:

.s4-tn li.static > a{
display: none !important;
}
.s4-tn li.static > ul a{
display: block !important;
}

image

Enjoy!

Monday, September 13, 2010

Modal Pop-Up for a Unique Content Type

To continue the conversation with the modal pop up window, I was asked the following great question:

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?”

The answer is yes it is quite easy to link the pop-up modal window to a unique content type: You would use the same approach but you would add in the Content Type ID to the end of the URL string:

<a onclick="javascript:NewItem2(event, &quot;http://sitename/_layouts/listform.aspx?PageType=8&amp;ListId={49E3BDCF-9C06-413D-A7B8-413F2E8F6B0D}&amp;ContentTypeId=0x01005C9243AA25668B4CAACB42C41B0D360600052ECA5C1544864D9F9B7BF90A874A4F&amp;RootFolder=&quot;);
javascript:return false;"
href="/_layouts/listform.aspx?PageType=8&amp;ListId={49E3BDCF-9C06-413D-A7B8-413F2E8F6B0D}&amp;ContentTypeId=0x01005C9243AA25668B4CAACB42C41B0D360600052ECA5C1544864D9F9B7BF90A874A4F&amp;RootFolder="
target="_self">
Add a Unique Content Type Item</a>

To find the custom content type ID, simply click on the list settings, within the content type section right click on the custom content type and then click on properties. Within the Address URL, the ID is at the very end after the “ctype=”

Simply Replace the above blue ID with your own custom one. This will allow you to have links to custom content types within the same list and not have to worry about the default content type settings.

Thursday, September 9, 2010

Ways to extend the SharePoint Modal Window

So in my last post I simply wanted to show an input form in a SharePoint 2010 modal window. This got my creative juices flowing and I wanted to experiment a little. I found out that you can easily display anything in the Modal window that you wanted.

Web Site: Bing
<a onclick="javascript:NewItem2(event, &quot;http://www.bing.com&quot;);
javascript:return false;" href="http://www.bing.com/" target="_self">Show Bing In Modal Window</a>

image

Image
<a onclick="javascript:NewItem2(event, &quot;http://sitename/Images/image.png&quot;);
javascript:return false;" href="/images/image.png/" target="_self">Show Image</a>

image

Video/Games
This does not really work since most video’s open up in a separate application like Window Media Player and not within the browser. However you can use things like flash .swf files to show in the modal window.
<a onclick="javascript:NewItem2(event, &quot;http://www.microsoft.com/games/gamesforwindows/games/madagascar2/Mad2_Final_ENU.swf&quot;);
javascript:return false;" href="http://www.microsoft.com/games/gamesforwindows/games/madagascar2/Mad2_Final_ENU.swf" target="_self">Flash Game</a>

image

So basically you can show basically anything that you have a link to and can be visible within a browser.

Enjoy, and let me know what creative things you have placed in your modal window…

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