Scroll Gantt view to today in SharePoint 2010 & 2013

Abstract, here is a trick to have the SharePoint Gantt view displayed scolled to today instead of the first day of the earliest task. Tested on SharePoint 2010 & SharePoint 2013. Here comes the trick and how it was found

SharePoint Gantt views are a great tool to visualy embrace a set of data\dates but they suffer from a few usability issue. First one is that Gantt view always center on the earliest date of the tasks displayed. This is often an issue if you display projects spanning multiple months or year as you don’t see today’s situation :

We decided to fix it. Our first stop was to take a look at SharePoint out of the box SPGantt.js file (SPGantt.debug.js for convenience), where best to find out what was possible. Searching for scroll brought up a few reference including this very promising one :

 this.ScrollGanttToTask=function()

      ….

      _jsGridControl.ScrollGanttToDate(date);

      ….

Next step was to manage to get an handle on this jsGridControl object. Fiddling through the DOM with Google Chrome (Elements and console tabs) we found out the *_ListViewWebPartJSGrid object had a nice jsgrid property that returns the object we need

 And this object indeed have a ScrollGanttToDate function

 If you use jQuery here is how to retrieve the object and scroll to today. Depending how\where you use it, you might want to make sure the object exists (if($("div [id$='_ListViewWebPartJSGrid']").length) ) before using the property jsGrid.

$("div [id$='_ListViewWebPartJSGrid']")[0].jsgrid.ScrollGanttToDate(new Date()) 

Tada !

SharePoint 2010 – Resizing the Ribbon bar

Recently I was asked to add some element in the ribbon upper part just before the Site Actions Menu. Thus I needed to increase the height of the upper part of the ribbon to fit our content (blue part in the screenshot above).

Problem

After spending an insane amount of time on what seemed so simple, I managed to get it kinda working. I say “kinda” because no matter what I did I couldn’t get the ribbon to display correctly when it was opened.

After checking this article from the SharePoint team: http://sharepoint.microsoft.com/blog/Pages/BlogPost.aspx?PageType=4&ListId={72C1C85B-1D2D-4A4A-90DE-CA74A7808184}&pID=426

I understood that it came from a FixRibbonAndWorkspaceDimensions() javascript function from init.js that just kept setting the height at 44px (ribbon collapsed) or 135px (ribbon opened) no matter what my CSS said. The culprit line is:

var baseRibbonHeight=RibbonIsMinimized() ? 44 : 135;

No need to tell you that after hearing Microsoft boast about their compliance with the latest Web Design best practices, I was expecting more than to find hard-coded height values in a JavaScript file…

Solution

Yet everything isn’t lost as the actual ribbonHeight is the aforementioned value plus a padding value

var ribbonHeight=baseRibbonHeight+g_wpadderHeight;

Thus if you want to increase the ribbon height, you just need to set the javascript variable g_wpadderHeight to the value you want to increment. You might do that in your masterpage as such :

<script type="text/javascript">

g_wpadderHeight = 30;

</script>

Something else to note, the WebPart adding part of the ribbon stopped displaying the “Add”, “Cancel” button after resizing the ribbon bar as they were out of the box. I solved this problem with a bit of css :

.ms-wpadder-buttonArea{

padding-bottom:30px;

}

Retrieve List and View GUIDs with a bookmarklet

As I am often using SharePoint Designer, I regulary need to get the lists or views guids on my WSS or MOSS sites. Until now I would use SharePoint Manager or access the List or View settings to get the IDs I needed from the URL. Not a big deal but definitely a pain.

I now have a very simple solution to solve this problem, a bookmarklet. I just drag and drop the following links to the bookmarks bar of my browser and click on these links when I am on a SharePoint List or library display. The IDs are then either Popuped (Use CTRL+C to copy the full popup message on Internet Explorer, selection is possible in Firefox) or wrote on the page.

Absolutely no changes are necessary on the server side and you just need to add a bookmark to your browser on the client-side.

The first bookmarklet shows a pupup with the IDs looking like

Drag and drop this link (View IDs (alert)) to the bookmark tab, it is usually found just under the address bar.

The second one will replace the page with the IDs like that

Drag and drop this link (View IDs)for this version

The bookmarklet are simple javascript code that parses the page looking for the Edit View link. They then get the IDs from this link before decoding them. The drawback of my method is that you need to have sufficient permissions to modify the view.

The javascript code is displayed below for your information or if you have some trouble adding the links to your bookmarks with Drag’n Drop.

<a href="javascript:{mI=document.getElementsByTagName('ie:menuitem');for(i=0;i<mI.length;i++){if(mI[i].id.indexOf('ModifyView')!= -1)vieItem = mI[i];}baSt=vieItem.getAttribute('onMenuClick');enLisInd= baSt.indexOf('%257D');liI=baSt.substring(baSt.indexOf('%257B')+3,enLisInd);baSt=baSt.substr(enLisInd + 3);viI=baSt.substring(baSt.indexOf('%257B')+3,baSt.indexOf('%257D'));alert('List- '+liI.replace(/%252D/gi,'-')+' -view- '+viI.replace(/%252D/gi,'-'));}">View IDs (alert)</a>

<a href="javascript:{mI=document.getElementsByTagName('ie:menuitem');for(i=0;i<mI.length;i++){if(mI[i].id.indexOf('ModifyView')!= -1)vieItem = mI[i];}baSt=vieItem.getAttribute('onMenuClick');enLisInd= baSt.indexOf('%257D');liI=baSt.substring(baSt.indexOf('%257B')+3,enLisInd);baSt=baSt.substr(enLisInd + 3);viI=baSt.substring(baSt.indexOf('%257B')+3,baSt.indexOf('%257D'));document.write('List- '+liI.replace(/%252D/gi,'-')+' VIEW '+viI.replace(/%252D/gi,'-'));}">View IDs</a>

The javascript is pretty nasty for a good reason, Internet Explorer 6 bookmarks are limited at about 500 characters. Even if my scripts aren’t very complex, a 500 characters limit is very short.

Tested on Internet Explorer 6, 8 and Firefox 3 on a MOSS 2007 – SP2 farm in English and French. Please be aware that Internet Explorer will display a security warning when adding the bookmark.

Hope you enjoy my bookmarklets !

Edit : Just so you know, I found a bug in these bookmarlet and just fixed it.