If you are into developing SharePoint solutions using jQuery, you should really have a look at the following GREAT CodePlex projects. Both projects have been developed by real experts in the SharePoint & jQuery field
jPoint is an open source javascript API and script deployment framework for Sharepoint. It leverages the speed and agility of jQuery to manipulate Sharepoint forms and pages, communicate to Sharepoint webservices, and to build jPart plugins.
This is a jQuery library which abstracts SharePoint’s Web Services and makes them easier to use. It also includes functions which use the various Web Service operations to provide more useful (and cool) capabilities. It works entirely client side and requires no server install.
SharePoint 2010 Developer Dashboard Visualizer is a jQuery-based solution that extends the Developer Dashboard by plotting an interactive diagram with data from the Developer Dashboard, giving you an **instant** insight into where the bottlenecks are in your code.
(yes, well spotted… I was stupid enough not to rename my machine before installing SharePoint 2010)
The installer is just a WSP so it’s a quick and easy install!
Finally, a big thank you goes out to Bil Simser for being the first person to post a review for SharePoint Developer Dashboard Visualizer online.
When I first had a look at the Developer Dashboard in SharePoint 2010 I was a bit confused. The numbers shown in the nested unordered list on the left, representing load times in milliseconds, didn’t seem to actually cover 100% of the the request that was being handled. Basically it turns out that there are “gaps” that are not monitored, which is exactly why the sum of execution times for a certain set of child nodes in the list often don’t match the execution time of the parent. This is due to the SPMonitoredScope model.
Each node in the list represents a SPMonitoredScope that was created, either in SharePoint OOTB code or in code that you wrote yourself. When a second SPMonitoredScope is created before the first one is disposed, the second one will be treated as a child scope of the first one. In the context of a web request, the top level scope is instantiated in the SPRequestModule. Scopes that you instantiate yourself will most likely become child scopes of this “Request scope”.
Lets look at an example for a custom Visual WebPart that creates it’s own scopes.
3: using (SPMonitoredScope mainScope = new SPMonitoredScope("VisualWebPart1_Load mainScope"))
4: {
5: Thread.Sleep(5000); // some processing that is not inside a subscope
6:
7: using (SPMonitoredScope subScope1 = new SPMonitoredScope("VisualWebPart1_Load subScope1"))
8: {
9: Thread.Sleep(1000);
10: }
11:
12: using (SPMonitoredScope subScope2 = new SPMonitoredScope("VisualWebPart1_Load subScope2"))
13: {
14: Thread.Sleep(1000);
15: }
16:
17: using (SPMonitoredScope subScope3 = new SPMonitoredScope("VisualWebPart1_Load subScope3"))
18: {
19: Thread.Sleep(1000);
20: }
21: }
22: }
Now let’s look at the resulting Developer Dashboard output.
Do you see what I mean?
Now on a similar note, I have been working on a project that visualizes the data rendered by the Developer Dashboard. It’s just not easy enough to spot “peaks” without it.
As you might have guessed, it’s a jQuery based solution. I am hoping to put it on CodePlex soon. Here is a sneak peek (click to enlarge):
Last week I published my fourth CodePlex project, called SharePoint LiveListData. It is an “assembly-free” solution which means that it contains no server side code. It is implemented as a jQuery plugin.
So what does it do? It uses AJAX to automatically reload any list-based Web Parts as soon as a change in the underlying list data is detected. You can also have your custom web parts refreshed, as long as they have a web part property that contains the ID of the list they depend on!
I have put online a screencast that demonstrates the the user experience.
Want to know how it works? Allow me to describe using some pseudo code..
OnDocumentLoaded
Make a single call to WebParts.asmx web service using AJAX to return an xml document with all web parts on the current page
Parse returned xml and find all web part nodes that contain a ListID element (which holds the value for the ListID web part property)
Create and populate a javascript object that contains a list of all ListIDs that we found in the returned xml, plus a list of all WebPartIDs per ListID, also retrieved from the xml (more or less creating a hashtable with the key being the ListID and the value being an array or WebPartIDs).
LOOP with interval = $configured_interval
Make a single call to Lists.asmx web service using AJAX to retrieve “LastDeleted” and “Modified” properties for each ListID in the hashtable that was created earlier.
For each ListID in hashtable
compare values for LastDeleted and Modified with those values retrieved as part of the previous loop iteration for this ListID (unless it’s the first iteration).
If a change in one of the two property values has been detected (indicating that someone inserted, updated or deleted an item) mark this ListID as “UpdatePending”, storing it on our javascript object that holds our ListIDs and WebPartIDs.
If any of the ListIDs are marked as UpdatePending
Make an AJAX request to page that is currently loaded in the browser (allowing us to get a fresh copy of the current page containing the new list data)
For each ListID marked as UpdatePending
For each WebPartID associated with ListID in our javascript hashtable object thingy
Replace div with matching WebPartID attribute in current document with “same” div in AJAX response (which contains the new list data).
This is basically how it works in a nutshell.
For examples on usage, check out the downloads tab on the SharePoint LiveListData CodePlex site, where you can also download the script!
SharePoint InlineSiteSettings is a tool which I originally released several months ago. It provides a quick way to access your Site Settings in SharePoint; it allows you to pop up the Site Settings of the current site - triggered by a keyboard shortcut - without navigating away from the current page. InlineSiteSettings uses jQuery to power its AJAX functionality.
After I was hinted by Jeroen Ritmeijer from Muhimbi that a javascript only version of SharePoint InlineSiteSettings (the previous version was implemented as a serverside WebControl spitting out javascript) would work very well with their free SharePoint Infuser product, I started my investigation and ended up implementing a new version of SharePoint InlineSiteSettings! I am quite pleased that it is now a very compact solution compared to it’s previous release.
You COULD use the new version SharePoint InlineSiteSettings without Muhimbi Infuser by pasting the script into a Content Editor Web Part on each page where you want to enable the SharePoint InlineSiteSettings functionality, BUT to be honest, this doesn’t really make sense and it would be very time consuming. What we really want is a solution that allows us to inject the script on every page and configure it only once. This is where SharePoint Infuser comes into play.
Google provides a client side API (Google AJAX Libraries API) for developers to load the jQuery library on their web pages without the need to host the jQuery library on your own site. This is particularly interesting for jQuery based scripts that can be hosted in a Content Editor Web Part in SharePoint, since you can more or less “embed” the jQuery library in your script, thereby simplifying its distribution and installation processes. The CEWP version of SharePoint InstantListFilter implements this concept.
Now, one thing you need to be aware of, is that your browser may start bugging you with warnings if your site runs on https. This is because it does not like having both secure (https) and non-secure (http) items on a single page.
In that case, all you need to do is to load Google’s API over https as well, which should remove the non-secure item from the page.
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.
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.
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
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:
Move mouse to Site Actions menu
Click Site Actions menu
Move mouse to Site Settings menu item
Click Site Settings menu item
WAIT for page to load…
For a MOSS site:
Move mouse to Site Actions menu
Click Site Actions menu
Move mouse to Site Settings menu item
Move mouse to Modify All Site Settings menu item
Click Modify All Site Settings menu item
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?
Keyboard shortcut
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.
