Posts Tagged ‘webpart’

Document library matrix

April 5, 2010


Some days ago I had a discussion with my management about the usability of Sharepoint as a document management system. My management tried using a document library to publish internal product management but found that the folder functionality in MOSS 2007 is not efficient, my initial response to them was not to use folders but to use metadata which allows describing the items in multiple dimensions. I always try and suggest to avoid folders, except if you want to apply different permissions on a lower level in the library.

So, they went on and inserted documents in the library and tagged them in 2 columns (product and document type) based on selection lists. But then the management wanted to know, with a blink of an eye, the products which were missing documents. Well… building a view with a group on product and document type did not give the result they were looking for because you can’t group on non-existing values. In our “other” document management system they used a folder structure and had an item count on the level of the folder… but Sharepoint does not do this.

Their conclusion:  Sharepoint is not usable for managing documents and we will potentially not be able to migrate our “other” document management systems into Sharepoint.

I proposed them to make a matrix view, as below sketch, on top of the document library which shows what document types exist or does not exist for what product.

  doc type x doc type y doc type z
 product x  v    v
 product y    v  
 product z      

Tools I used: Notepad, jQuery, MSDN


  1. If not yet done, upload the latest jQuery library (jquery-1.4.2.min.js) to a document library on the Sharepoint server.
  2. Add a Content Editor Webpart to a Sharepoint page and paste the Javascript code from my skydrive  in it
  3. Modify the url to the jquery library (<script src=”http://sp2007/Documents/jquery.js”></script>)
  4. Set the variables to match your environment
            var ColumnField = “ContentType”; //list column name to put in the columns
            var RowField = “Product”; //list column name to put in the rows
            var SiteURL = “http://sp2007/Docs“; // url to the site where the library is located
            var DocLibrary = “Documents”; //name of the document library
            var DocLibraryURL = “http://sp2007/Docs/Documents/Forms/AllItems.aspx“; //full url to the view which should loaded when a cell is clicked
            var ShowItemCount = true; //true or false, this will show an item count in the cell
            var ShowMissingHeader = true; //true or false, to show items which do not have both fields filled
  5. Tip: also add the same content query webpart with same source on the document library view page. To do so:
    – go to your document library
    – add the following string to the URL ?ToolPaneview=2– now you can execute step 2-4 on this page

Some pictures

The below picture shows the demo data which is used in this post (Product field and Content Type)

The below picture shows the matrix

The below pictures shows the matrix when used on the doc library view screen, with an active filter

This matrix approach convinced them of adding metadata to their documents. Now up to the next challenge in optimizing our environment and reducing the number of systems to do the same task.

Sharepoint timezone hell

March 20, 2009


I’m currently participating in deploying an international Sharepoint intranet which hosts teamsites where users can track tasks and knowledge. Our infrastructure is running in the GMT+1 timezone but not all of our users are in that timezone. Since Sharepoint is using web technology all users see by default GMT+1 times, which is very annoying when you are working from within another time zone.

Site Time zones

Sharepoint allows owners, of a site, to define the timezone they want for their site. This in order to see correct date and time stamps on items (eg on created and modified fields). It is recommended that the owners of the site define the timezone based on the timezone of the users who most frequently use the site.

User time zones

If the visiting user is in a different timezone as the site he can personalize the display of dates and times so it aligns with his timezone. But they need to set this for each site and they have no idea that there is a difference.

Time zone check webpart

In order to warn users that the site they are visiting does not run in the same timezone as theirs, I created a small webpart. The webpart generates some javascript that checks if the local timezone bias is different than the “context timezone” bias. The “context timezone” represents the timezone as experienced by the user visiting the site.

The code for building the webpart (this code is functional but not at the level you would expect to run on a production environment):

protected override void Render(HtmlTextWriter writer)
//initiate objects
SPWeb oWebsite = SPContext.Current.Web;
SPRegionalSettings oContext = SPContext.Current.RegionalSettings;
//write javascript code in the webpart
writer.Write("<script language='JavaScript'>");
writer.Write("var d = new Date();");
//Edit below lines to print the server and client time offset
//writer.Write("document.write(\"Server time offset:" + (oContext.TimeZone.LocalTimeToUTC(DateTime.Now) - DateTime.Now).Hours.ToString() + "<br>\");");
//writer.Write("document.write(\"Client time offset:\" + d.getTimezoneOffset());");
//below line gives problems with daylight savings
//writer.Write("document.write(\"Server bias offset:" + oContext.TimeZone.Information.Bias + oContext.TimeZone.Information.DaylightBias + "<br>\");");
 //check if the timezone on the local machine is equal to the current WSS context timezone
writer.Write("if (d.getTimezoneOffset()/60 == " + (oContext.TimeZone.LocalTimeToUTC(DateTime.Now).Hour - DateTime.Now.Hour).ToString() + ")");
//Enable the below line if you want show an ok message when the timezones match
//edit below section with the message for mismatched timezone settings
writer.Write("document.write(\"<b><font style='color:red'>Warning!</font></b><br/>\");");
writer.Write("document.write(\"The website is running in:" + oContext.TimeZone.Description +"<br/>\");");
writer.Write("document.write(\"click <a href='_layouts/regionalsetng.aspx?Type=User'>here</a> to adapt your view\");");


The above code allows you to build the below webpart using Visual Studio.



On request I provide the webpart in a Sharepoint solution allowing you to install it on your environment.


Style webparts differently

February 22, 2009

Here we go…

We are constructing our new intranet based on Sharepoint technology. One of the requirements of our Internal Comms department is to have coloured webparts based on the content they contain.

Now, this might seem a straightforward thing to do, one could expect that one of the properties of a webpart is style… but that’s off course not the case (as often with Sharepoint).

Looking through the webparts using the IE Developer toolbar I wondered if it would be possible to target styles to the specific webparts without going into code. So I started adding a content editor webpart (CEWP) to the page and editing the source to define some styles.

After some digging with the toolbar it seemed that these styles do exactly what I want:

  • td#MSOZoneCell_WebPartWPQx table tr This style formats the full webpart
  • .ms-WPHeader td#WebPartTitleWPQx h3 a This style formats the title text
  • td#MSOZoneCell_WebPartWPQx table tbody tr td table tbody td This one formats the title bar

The x has to be replaced with the number of the webpart (you can find this when looking at the source of the page or by using the IE Developer toolbar)

example source for the CEWP


/* ———————————————————
   This style overrides the colors for announcements webpart
/* Set text color for title*/
.ms-WPHeader td#WebPartTitleWPQ2 h3 a{
  color: white;
/* Set background color for title and remove the bottom border*/
td#MSOZoneCell_WebPartWPQ2 table tbody tr td table tbody td{
  border-bottom: blue 0px solid;
  background-color: blue;
/* This style completely colors a specific webpart*/
td#MSOZoneCell_WebPartWPQ2 table tr{
background-color: #d5d9ec;
/* —————————————————-
   This style overrides the colors for calendar webpart
/* Set text color for title*/
.ms-WPHeader td#WebPartTitleWPQ3 h3 a{
  color: white;
/* Set background color for title and remove the bottom border*/
td#MSOZoneCell_WebPartWPQ3 table tbody tr td table tbody td{
  border-bottom: #ff9900 0px solid;
  background-color: #ff9900;
/* This style completely colors a specific webpart*/
td#MSOZoneCell_WebPartWPQ3 table tr{
background-color: #ffcc99;
/* ————————————————-
   This style overrides the colors for tasks webpart
/* Set text color for title*/
.ms-WPHeader td#WebPartTitleWPQ6 h3 a{
  color: white;
/* Set background color for title and remove the bottom border*/
td#MSOZoneCell_WebPartWPQ6 table tbody tr td table tbody td{
  border-bottom: #006600 0px solid;
  background-color: #006600;
/* This style completely colors a specific webpart*/
td#MSOZoneCell_WebPartWPQ6 table tr{
background-color: #00ff99;

Resulting in

coloured webparts 

 Don’t forget to set the chrome type of the CEWP to none.

See you next time…