Thursday, May 27, 2010

Posting code in Blogger

Ok Blogger gets a big Fail for support of writing and sharing code via a blog. Luckily there seems to be a solution, a text area tag.

I first found a solution over at dreamincode.net - http://www.dreamincode.net/forums/topic/61131-code-in-bloggercom-posts/
Though this one had formatting issues.

Then I came across this entry which talks a bout a code tag and was much happier with the formatting that I was able to do.
http://jayaprakashkv.blogspot.com/2007/12/how-to-add-html-code-in-blogger-post.html


It links to this very nifty tool here - http://www.simplebits.com/cgi-bin/simplecode.pl



Though that tool was not the final solution I actually had to go back in and add the nbsp operator to get indenting to look right but I had the right look finally.

Wednesday, May 26, 2010

jQuery UI (Tabs) on SharePoint

There have been several articles written about using jQuery on SharePoint.

This article focuses specifically on implementing jQuery UI Tabs in a SharePoint Master Page using SharePoint Designer.

So what exactly is jQuery UI Tabs, it is a JavaScript that formats div panels to function as a tab control. See the demo page here for the script in action: http://jqueryui.com/demos/tabs/

Walkthrough

Requirements
A master page with a Content Place Holder in the header and another one in the body tag.
Most master pages will have this by default.
The jQuery UI libraries - http://jqueryui.com/
I recommend on just downloading the default Theme and with all of the UI features selected to start with. You can always down load a different theme latter once the functionality is working as expected.

You will also need the cookie library if you are going to use that functionality - http://plugins.jquery.com/project/cookie
This example includes the use of the cookie Library.


Instructions
1. Create a new page from master
2. Add the libraries to the head tag

In my master page the content place holder is called PlaceHolderAdditionalPageHead so I needed to locate that in the code view of my page.

Then I add the references to the theme, the main jQuery library, the jQuery UI library, and the cookie library.

So my place holder now looks like this

<asp:Content id="Content1" runat="server" contentplaceholderid="PlaceHolderAdditionalPageHead">
  <link type="text/css" href="css/cupertino/jquery-ui-1.8rc1.custom.css" rel="Stylesheet" />
  <script type="text/javascript" SRC="scripts/jquery-1.4.2.min.js" ></ script >
  <script type="text/javascript" src="scripts/jquery-ui-1.8rc3.custom.min.js"></script>
  <script type="text/javascript" src="scripts/jquery_cookie.js"></script>
</asp:Content>


3. Add the script that to change how the div panels render

<!--init tabs-->
<!--Tab selection expires in one day (24hrs)-->
<script type="text/javascript">
  $(document).ready(function() {
  $("#tabContainer ").tabs({ cookie: { expires: 1 } });
 });
</script>


4. Last add the div panels which will hold the content
a. The li tags will be your tab headers
b. The corresponding div panels will hold your tab content

<div id=tabContainer style="width: 100%">
  <ul>
  <li><a href="#tab-1">tab1</a></li>
  <li><a href="#tab-2">tab2</a></li>
  <li><a href="#tab-3">tab3</a></li>
  <li><a href="#tab-4">tab4</a></li>
  <li><a href="#tab-5">tab5</a></li>
  </ul>
 <div id=tab-1 style="width: 100%">Insert tab1 content here</div>
 <div id=tab-2 style="width: 100%">Insert tab2 content here </div>
 <div id=tab-3 style="width: 100%">Insert tab3 content here </div>
 <div id=tab-4 style="width: 100%">Insert tab4 content here </div>
 <div id=tab-5 style="width: 100%">Insert tab5 content here </div>
</div>


Wrap-up
The great thing about this is it works in both SharePoint 2007 and 2010 and its completely rendered client side. Now for those that run w/ JavaScript disabled it degrades gracefully as well, stacking the div panel on top of each other.

There are no restrictions on the div panel content; it can be anything that is allowed in a standard div, Data View Web Parts to strait HTML for example.

Happy Tabbing! :)

Wednesday, May 5, 2010

SharePoint 2010 - Redirecting a form

In MOSS the most efficient and reliable method of redirecting a form was to use a query string parameter. This is where you have the page url followed by a parameter. Site.com\page.aspx?source=targetURL for example.

In 2010 Microsoft has made a vast improvement where specifying the redirect URL in the custom form actually works. What is great about this is it allows for a page to go to two different locations based off wither the user hits save or cancel.

To implement find the onclick command for the button whose behavior you would like to change. It should be calling a GenFireServerEvent in the ddwrt namespace. Append ‘;__redirect={targetURL}’ following the commit or cancel filed. The field should now look like this
__commit;__redirect={ targetURL }

Save the page and you have a fully functioning redirect hidden from the users.

Many thanks to IOTAP for the pointer - http://web.iotap.com/Blogs/tabid/277/EntryId/7/Redirecting-to-a-custom-URL-from-Sharepoint-custom-forms.aspx