Jaap Vossers' SharePoint Blog

Just another WordPress.com site

Archive for the ‘jQuery’ Category

Released: SharePoint InstantListFilter

with 26 comments

The latest addition to my CodePlex portfolio is called SharePoint InstantListFilter.

It is an assembly free solution and you can even “install” it by editing the contents of a Content Editor Web Part! So what is it really? It is a javascript based solution that adds filter textboxes to every column of a SharePoint list view (SPGridView) with filter-as-you-type functionality. It uses jQuery to add the textboxes and perform the filtering.

Update: Live demo online

One cool freebie is that you can use it to filter on field types that normally aren’t filterable, like calculated fields and note (multiple lines of text) fields.


Instructions on how to install can be found on the CodePlex site.

Download SharePoint InstantListFilter @ CodePlex

Written by jvossers

March 30, 2009 at 8:40 pm

Released: SharePoint QuickLaunchExtender

with 11 comments

Most of the out of the box SharePoint sites use the QuickLaunch menu. The size of this menu gradually grows as the number of sub sites and lists grow. I have heard many people complain about how they cannot easily find a particular navigation item when it is so crowded.

I published a free solution on Codeplex called SharePoint QuickLaunchExtender. It enriches the QuickLaunch menu. It comes with a custom configuration page that allows you to specify the behaviour of the QuikcLaunch menu. It works on both WSS 3.0 and MOSS 2007. SharePoint QuickLaunchExtender comes with a Solution Package (WSP), so there are no manual installation steps to take.

This is the description of SharePoint QuickLaunchExtender on codeplex:

“Extends the SP QuickLaunch control to provide a richer experience. Configure it to transform the QuickLaunch into an Accordion, a set of collapsible/expandable panels (Adds scrollbar per panel if height limit is specified and exceeded), or a real-time filterable list. Uses jQuery”

Basically, in addition to the default behaviour of the QuickLaunch menu, there are three modes that SharePoint QuickLaunchExtender introduces.

  • Expand/collapse (optionally with configurable panel height limit)
  • Accordion
  • Filter

Expand/collapse mode allows you to click one of the headings – just right next the heading link) to toggle the expand/collapse state of the panel that contains its related child links. You can configure whether all panels should be expanded or collapse on page load. Also, you can specify a limit in pixels for the panel height. If the limit for any of the panels is exceeded because of the amount of links on that panel, a vertical scrollbar will automatically be added to that panel to cater for any overflow.

Accordion mode also allows you to click one of the headings, however, only one panel will be in expanded state at all times. You can configure the panel height in pixels.

Filter mode is a mode that has been added after the first release. It is now my personal favourite now! It adds a textbox to the top of the QuickLaunch menu and allows you to filter the links in the QuickLaunch menu in a filter-as-you-type manner. This is really useful when your QuickLaunch menu tends to get very big.

Demo screencast:

I apologise for the poor readibility in the video above. In the video I demonstrate the different modes of SharePoint QuickLaunchextender as I configure it using the custom configuration page

Download SharePoint QuickLaunchExtender @ CodePlex

Written by jvossers

March 29, 2009 at 11:47 pm

Released: SharePoint InlineSiteSettings

with 4 comments

As a SharePoint developer, I have to navigate to the Site Settings page literally hundreds of times a day. I was getting fed up with the amount of steps required and the time involved to get to the Site Settings page.

For a WSS site:

  1. Move mouse to Site Actions menu
  2. Click Site Actions menu
  3. Move mouse to Site Settings menu item
  4. Click Site Settings menu item
  5. WAIT for page to load…

For a MOSS site:

  1. Move mouse to Site Actions menu
  2. Click Site Actions menu
  3. Move mouse to Site Settings menu item
  4. Move mouse to Modify All Site Settings menu item
  5. Click Modify All Site Settings menu item
  6. WAIT for page to load…

What’s that, 5 seconds maybe? Times 100?

If you are a good developer, your brains are likely to be moving faster than your hands. Having the system respond to your input without making you feel that you are being slowed down by it will greatly improve your development experience. To get into – and stay in – “the zone” you should not break that chain of quick commands. Shortcut, tab, tab, type, enter, mouse, click, f5, alt+tab, shortcut, woohaa – ninja mode!

This article is about a free solution that I developed that eliminates a painful sequence of mouse movements and clicks by replacing it with a single keyboard shortcut. Not only that! It will introduce direct navigation paths between pages that were not linked before. Navigate from Site Features to Site Content Types? From Content and Structure to Master Page Gallery? How?

  1. Keyboard shortcut
  2. Click link

SharePoint InlineSiteSettings will allow SharePoint users to press Ctrl+s to instantly access the Site Settings of the site belonging to the page you are currently on. It will actually be displayed inside the page you are currently viewing, at the top.

How does it work? SharePoint InlineSiteSettings performs an AJAX call to settings.aspx and extracts an html fragment from the response. This fragment is the table containing all the links that appear on the Site Settings page. By the time the user triggers the keyboard shortcut, the html fragment has already been loaded into the DOM of the current page, and only needs to be made visible – which is exactly what the javascript event handler for the keyboard shortcut does.

SharePoint InlineSiteSettings uses jQuery to perform the AJAX call, enable keyboard shortcut event handling (using the jQuery HotKeys plugin) and perform DOM manipulations.

SharePoint InlineSiteSettings has been implemented as a WebControl that will render mainly javascript, Certain properties can be set on the WebControl to customize its behavior. To allow deployment via a feature, I originally intended to implement a Feature that would use the AdditionalPageHead delegatecontrol. I soon found out that the BlueBand.master masterpage (which is the default master page for a publishing site) does not contain the AdditionalPageHead delegatecontrol, which meant that it would not work on a OOTB publishing site. For this reason, I came up with the alternative idea of implementing a custom Site Actions Menu Item that would not really render a menu item, but would only drop the javascript in the head of the page.

In terms of deployment, you can choose whether you prefer to add the WebControl to your master page, or activate a Feature that will register a custom Site Actions menu item. In the latter scenario you have the option of specifying if you want preloading turned on or off. This is done by activating one of the two available site collection scoped Features: InlineSiteSettings vs InlineSiteSettingsNoPreload. Make sure you only have one of these Features activated at a time. No preload basically means that the AJAX call to settings.aspx will be performed as you trigger the keyboard shortcut, which means you will save bandwidth at the price of response time.

The assembly that contains the InlineSiteSettings WebControl also contains the jQuery and HotKeys javascript libraries as embedded resources. These will be references automatically by the InlineSiteSettings WebControl, unless you specify that you do not want this to happen. This can be cone by setting the appropriate properties on the InlineSiteSettings WebControl. This is only possible if you add the InlineSiteSettings WebControl to your master page.

SharePoint InlineSiteSettings is published at CodePlex. It comes with a WSP that will deploy the Features and the required DLL. This DLL will be deployed to your bin folder and comes with a custom CAS policy.

Download SharePoint InlineSiteSettings @ CodePlex

Written by jvossers

March 19, 2009 at 12:14 am