Jan Tielens' Bloggings

SharePoint Connections 2010 & SharePINT with Belgian Beer in Amsterdam

Jan Tielens — Thu, 14 Jan 2010 06:44:00 GMT

Next week (18th and 19th of January, 2010) the Microsoft SharePoint Connections 2010 will be held in Amsterdam RAI (The Netherlands). There is a great lineup of speakers and sessions over there, so I'm sure it will be a very interesting event! I will be presenting three sessions, one on Monday and two on Tuesday:

Client-Side Technologies in SharePoint 2010
Silverlight and SharePoint 2010: Better Together
Advanced Web Part Development in SharePoint 2010

I'm also very proud to mention that U2U will be sponsering the SharePINT community event on Monday evening. As a Belgian company we are of course buying you guys some real Belgian beer (Leffe)! So make sure to visit the expo area of the conference after the last session on Monday and feel free to say hi. :-)

May I introduce you to Lis Tielens

Jan Tielens — Tue, 22 Dec 2009 21:33:00 GMT

I'm very happy to announce that this morning our daugher Lis was born. She and her mother are recovering from the C-section but they are doing well. For more news (in Dutch), feel free to check out our family blog: http://kids.neleenjan.net.

Free BIWUG Event on SharePoint 2010 Development

Jan Tielens — Thu, 10 Dec 2009 14:53:00 GMT

Next week (December, 17th) the Belgian Information Worker User Group (BIWUG, http://www.biwug.be) is organizing an evening full of SharePoint 2010 development topics. I'm talking about the Client Object Models at 19:30, but make sure to check out the full agenda:

18:00 - 18:30: Welcome

18:30 - 19:00: Introduction to SharePoint Server 2010 (Karine Bosch – SharePoint MVP)

19:00 - 19:30: LINQ to SharePoint (Stephane Eyskens – SharePoint MVP)

19:30 - 20:00: Client Object Model (Jan Tielens – SharePoint MVP)

20:00 - 20:15: Break

20:15 - 20:45: Business Connectivity Services (Frank Cleynen)

20:45 - 21:15: Workflow (Peter Plessers)

The meeting is hosted by Ordina at their offices in Mechelen. More details and free registration can be found on the BIWUG site.

SharePoint 2010 Project Deployment Issues in Visual Studio 2010

Jan Tielens — Fri, 27 Nov 2009 05:25:00 GMT

Recently I ran into the following issue when I tried to deploy a SharePoint 2010 Project in Visual Studio 2010 Beta 2. In the output window the following message was displayed and the deployment failed:

Error occurred in deployment step ‘Retract Solution’: The local SharePoint server is not accessible. Check that the server is running and connected to the SharePoint farm.

It turned out (thank you Event Viewer!) that the account that triggers the Deploy action in Visual Studio 2010 (typically the account you used to login in Windows) needs to have permissions in both the Configuration database and the Content database.

SharePoint 2010 Public Beta Available on MSDN

Jan Tielens — Mon, 16 Nov 2009 17:29:00 GMT

Finally the public betas of SharePoint 2010 (both SharePoint Foundation and SharePoint Server), Office 2010, SharePoint Designer 2010 and Visio 2010 are available on MSDN Subscriptions, so start your download engines right now! :-)

If you don't see the download, you can use this direct link (make sure you are signed in to the Download Center before you click the link).

Introducing SharePoint 2010 Training at U2U

Jan Tielens — Fri, 06 Nov 2009 06:12:00 GMT

During the last couple of weeks, we at U2U have been very busy building course material for our upcoming SharePoint 2010 courses. We expect that lots of experienced SharePoint developers, power users and administrators are very eager to get up to speed with the new version of SharePoint as soon as possible. That’s why the first course that we’ve build is titled Upgrade to SharePoint 2010. This course will focus on all the exciting new stuff in SharePoint 2010, so people with SharePoint experience will get all the relevant info as quickly as possible. Because an administrator is probably not interested in developer stuff, we’ve chosen to split the course into three different parts:

Part 1: Tools and Technologies (2 days)
The focus of the first part of this course is on everything what’s new in SharePoint 2010 from a power user perspective. That means: everything you can configure in SharePoint 2010 without writing custom code. We’ll start with an overview of the new SharePoint 2010 platform, after that all the important new features will be discussed separately. Although this part will not involve building code customizations, it’s important for technical people (developers, architects, IT-Pro’s …) as well to know about these important new and enhanced features.
Part 2: The Development Platform (2 days)
SharePoint 2007 already was a very extensible platform: as a developer you could enhance and extend the out-of-the-box functionality using some powerful techniques. Unfortunately developing for SharePoint 2007 often required to developer to spend lots of time writing XML, using command line utilities,… This part of the course will focus on the new development tools in Visual Studio 2010 which will make the life of SharePoint developers a lot easier, and the new developer opportunities in SharePoint 2010.
Part 3: Administration and Configuration (1 day)
Also for IT-Pro’s and System Administrators SharePoint 2010 has lots of new functionality. In this final part of the course, we’ll focus on how SharePoint 2010 can make the life of administrators significant easier.

If you are a developer or architect I’d recommend you to follow all three parts of the course (yes even the administration and configuration part). If you are a power user, end user, manager or business decision maker (thus not a very technical person), I’d recommend you to attend the first part of our course. Finally if you are an IT-Pro or system administration, part 1 and 3 are relevant for you. You can read the full course description at the U2U site, and check out the schedule (the course is already scheduled in Brussels, Belgium in December and January, but we can deliver on-site courses as well).

In the near future U2U will expand its SharePoint 2010 training offerings to facilitate the needs of everybody who wants to get in the SharePoint 2010 game, even if you don’t have experience with the previous versions of SharePoint. So make sure you visit the U2U site once in a while to see if there is anything new. Alternatively you can subscribe to our newsletter over there, or you can follow us on Twitter as well (@u2u) or visit our Facebook page (and become a fan!).

People that are attending TechEd Europe in Berlin next week, make sure to visit the U2U booth to check out our new course material, and to receive a free SharePoint 2010 t-shirt (just mention that Jan sent you :-) ). If you have any questions and I’m not at the booth, feel free to ask for me. Or you can attend my BoF Session about SharePoint, Silverlight and jQuery on Thursday.

Join my BoF Session at TechEd Europe about SharePoint, jQuery and Silverlight

Jan Tielens — Wed, 04 Nov 2009 15:21:00 GMT

I’ve got the pleasure to be able to present a Birds-of-a-Feather (BoF) session at TechEd Europe next week: BOF14 Microsoft SharePoint, jQuery and Microsoft Silverlight: Better Together. If you are interested in these technologies please join the discussion on Thursday, 12:20 in Theater 6 – Pink.

Feel free to comment if you are planning to attend, it’s nice to know who’ll be there! :-)

Watch the SharePoint Conference Live, from your home/office (9am Pacific, 6pm CET)

Jan Tielens — Mon, 19 Oct 2009 15:30:00 GMT

In 20 minutes a very important event is going to get started: the SharePoint Conference 2009! If you're not in Vegas (like me), get yourself in front of a computer with a big bag of chips, popcorn or whatever snack you prefer, and watch the keynote (featuring Steve Ballmer) live! I'm sure it will be a nice show and expect an avalanche of SharePoint 2010 information to be released shortly afterwards. Also make sure you keep an eye on Twitter, blogs, Facebook etc. to see the reactions of SharePoint fans all over the world. My buddies at EndUserSharePoint are going to cover the conference with lots of real time content, so these pages will be open on my pc as well. Have fun!

Assembly-Free jQuery in SharePoint Sites Using the SmartTools jQueryLoader

Jan Tielens — Wed, 14 Oct 2009 18:48:00 GMT

Summary: The SmartTools jQueryLoader enables the jQuery Javascript library in your SharePoint sites using an effortless and Assembly-Free deployment technique. Additionally the jQueryLoader will dynamically load custom Javascript files, deployed to a Document Library. Seeing is believing: watch this short screencast that shows the deployment and some sample scripts!

Download the SmartTools jQueryLoader Installer from the Codeplex project
Watch the short (8 minutes) screencast that shows the deployment and some sample scripts.

If you read my blog you probably know that using the jQuery Javascript library in SharePoint 2007 sites can enhance and extend the out-of-the-box user interface significantly. But up to now it was time consuming and a tedious job to enable jQuery in SharePoint sites, for example: adding a Content Editor Web Part to the page, open the properties, copy/paste a script using the Source dialog etc. Even worse: these steps needed to be done on every page where the desired jQuery functionality should become active.

These issues can be solved by using the new SmartTools jQueryLoader that I’m releasing today! The SmartTools jQueryloader basically is a Javascript file that dynamically loads additional custom Javascript files stored in a predefined Document Library. This Document Library has extra columns to specify when and in what order those Javascript files should be loaded. So making available a new js file (containing your next amazing extension) in your SharePoint sites will be as easy as uploading that file to the Document Library. The jQueryLoader will take care of loading your script accordingly.

The jQueryLoader script itself, and the jQuery library as well, need to be loaded of course in every page in your SharePoint sites. This is accomplished by making a small change to the Master Page that’s in use in your SharePoint sites. All these configuration steps, including the creation of the Document Library, changing the Master Page, adding the jQueryLoader etc, are executed with an automated installation page. The really cool thing about this installation page is that it’s a basic SharePoint Site Page that doesn’t contain any server side code; everything is accomplished using Javascript. That means that to make use of the jQueryLoader (and its installer), there is nothing that needs to be changed, configured or deployed on your servers! That’s what is called Assembly-Free by the way.

Here is an overview of the installation steps:

Navigate to any Document Library in a SharePoint site.
Upload the SmartToosls.jQueryLoader.Install.aspx file to that Document Library (this file can be deleted after the installation).
Open the uploaded page by just clicking on it.
Select the desired installation options by checking their checkboxes in the list. For a first-time installation you typically check at least the first four checkboxes (see below).
Click the Start Installation button and keep an eye on the Installation Log at the bottom of the page.
That’s it!

The different installation options which can be selected are:

Create js Document Library: will create a hidden Document Library called js. This Document Library will have four custom columns:

Autoload (true/false): to specify if the jQueryLoader should dynamically load the file
Sequence (number): to specify the order in which the files are loaded
ApplyTo (text): a regular expression to specify on which pages the file should be loaded
Group (text): an optional value to group different files together

Create or update jquery.js: will upload the jQuery library to the js Document Library.
Create or update smarttools.jqueryloader.js: will upload the jQueryLoader script to the js Document Library.
Update the default.master: will make a change to the default.master Master Page (or the one you select by changing the value in the textbox). This change adds three script tags in the head element of the HTML page.
Update the default.master of a child site: (optional) will make a change to the Master Page of a child site (see previous option). Notice that this child site will make use of js Document Library of the current site.
Add test Web Part (optional): will add a test Web Part to the default.aspx (Home) page of the site to verify if jQuery is active.
Enhanced Tasks View, Task Notifications and AJAX Lists (all optional): will add various sample scripts to show of the power of jQuery in SharePoint see the demo screencast for more information.

The optional sample scripts are just there to give you an idea what can be accomplished using jQuery in SharePoint sites, and to show you how easy it is to deploy them. The real added value is of course your creativity to build custom scripts making SharePoint even better. Feel free to contact me when you’ve got a cool sample as well!

"The Office SharePoint Server Standard Web application features feature must be activated" on Windows Server 2008 R2

Jan Tielens — Wed, 14 Oct 2009 04:45:00 GMT

When I was installing a brand new demo environment using Microsoft's latest and greatest platforms (Windows Server 2008 R2 and SQL Server 2008) I ran into an annoying issue related to SharePoint. The slipstreamed installation (including SP2) went fine, but when I tried to create a new Collaboration Portal or Publishing Portal I got the error: "The Office SharePoint Server Standard Web application features feature must be activated at the web application level before this feature can be activated.".

After some searching I learned that MOSS SP2 was not correctly applied, re-installing MOSS SP2 solved the issue. Apparently this is a known issue which can be avoided by adding the Web Server Role before running the slipstreamed SharePoint installation.

Error trying to activate Publishing Infrastructure (on Technet)
Add Web Server role before installing SharePoint (blog post)

Make SharePoint 2007 Act Like SharePoint 2010, Updated

Jan Tielens — Wed, 30 Sep 2009 19:22:00 GMT

In my previous post I introduced a small script to extend the Edit Control Block (ECB) of list items and documents. The added menu items in the ECB allow users to update certain metadata fields for that item or document. The cool thing is that everything is happening in the background with the help of jQuery, even the actual updating of the data. The result: no postbacks or full page loads, pure AJAX goodness just like showcased in the SharePoint 2010 sneak peek videos. Today I’m releasing a new and improved version of the script, based on your feedback. Here are the changes:

Column names can have a display name and an internal name

In the previous version of the script you’d had to specify the names of the columns you’d like to ajaxify based on the internal name (which escapes spaces etc). In the new version of the script you can specify the display name as well. For example this is a possible configuration for a Task list:

columns: ["Status", "Priority", "% Complete#PercentComplete", "Description#Body"]

For the Status and Priority columns, no internal names are specified since they are the same as the display names. But notice that the next two columns have a # sign in them. The part preceding the # sign is the display name, the part after the # sign is the internal name from SharePoint.

Column values can have a display name and an internal name.

This works exactly as the column names, so if there is a # sign, the first part will be the display value, the second part will be the internal value. For example this is the array of values for the % Complete column of a task list:

["100%#1.00000000000000", "75%#0.750000000000000", "50%#0.500000000000000", "25%#0.250000000000000", "0%#0"]

Internally percentages are stored as values between 0 and 1. But we’d like show them as real percentages to the user of course: e.g. 100% will be displayed, while 1.00000000000 will be stored in SharePoint.

Multiple lists and document libraries can be configured in the same script.

Now you can also use the script if there is more than one list view web part on a page: in the lists option of the ajaxListConfig variable, multiple lists can be defined based on their name.

var ajaxListConfig = {
    lists:
        [
            {   name: "Tasks",
                columns: [ ... ],
                values: [ ... ] },
            {   name: "Issues",
                columns: [ ... ],
                values: [ ... ] },
        ],
    debug: 0, // set to 1 to see log messages
    animationSpeed: "fast" // possible values: "slow", "normal", "fast" or a number (milliseconds)
};

User entered values are now supported.

In the previous version, the user could only use the predefined values for a column (which makes lots of sense for Choice columns). In the new version, if the values option of a list configuration is equal to null (instead of an array of values), dialog is displayed in which the user can fill out a new value. For example in the Task list below, the Update Description menu item is displayed, but there is submenu to display the possible values.

When the user clicks on the Update Description menu item, a dialog is displayed to allow the user to modify the value. Once again there are no postbacks. To display the dialog I’m using the Imprompty jQuery extension (included in my script). Notice that there is no Rich Text editing (yet), so HTML tags will be stripped out. Also there is no support for editing Person fields etc.

Finally ...

... some small bug fixes and performance enhancements are done. To use the script, configure it to your needs (when you download it, it’s configured for a default Task and Issue list), then follow these steps:

Navigate to the page where you would like to use it (e.g. http://yoursite//Lists/Tasks/AllItems.aspx for the Task list).
Click Site Actions, Edit Page (top right).
Click Add a Web Part.
Select the Content Editor Web Part in the Miscellaneous section and click Add.
Optionally drag the Content Editor Web Part to the bottom of the screen (otherwise a small space will be displayed on top of the page).
Click open the tool pane in the web part.
Click Source Editor ... in the properties task pane.
Copy and paste the modified script in the Text Entry dialog and click Save.
Click Exit Edit Mode (top right) and verify the result.

You can download the script over here. Let me know if you have any issues and/or any feature requests!

Make SharePoint 2007 Act Like SharePoint 2010 (sort of ...)

Jan Tielens — Fri, 11 Sep 2009 17:19:00 GMT

[This script has been updated over here] I'm pretty sure every SharePoint enthusiast has seen those great Sneak Peek videos Microsoft released some time ago. And I'm sure that lots of the new features shown were very exciting for lots of you. Since SharePoint 2010 is still quite far away in the future, let's try to bring some of the 2010 stuff to SharePoint 2007! In the overview video, Tom Rizzo showed some new user interface functionality, pretty much all of it was heavily using asynchronous Javascript code to dynamically do updates, change layouts etc. All of this of course to prevent those nasty full page reloads. One of the features that caught my eye was the inline editing of list items or documents: without reloading the page, or opening a new page, it's possible in SharePoint 2010 to edit meta data. Pretty cool! And I want to have it in my SharePoint sites, today.

In my previous post I showed how you can add extra functionality to the Edit Control Block (ECB), let's take that technique and make it more flexible and customizable. Here is the result I'm looking for:

Notice that everything you see is happening completely at the client side, without any code deployed to the server, without any full page postbacks. So how do you get this working in your SharePoint sites? Just download this script file [This script has been updated over here] and open it. On top of the script you'll find the ajaxListConfig variable which you can change to customize the script:

var ajaxListConfig = {
    columns         :new Array("Status", "Priority"), // columns to ajaxify
    values          :new Array(
                        new Array("Not Started", "In Progress", "Completed",
    "Deferred", "Waiting on someone else"), // values for Status
                        new Array("(1) High", "(2) Normal", "(3) Low") // values for Priority
                        ),
    debug           :0, // set to 1 to see log messages
    animationSpeed :"slow" // possible values: "slow", "normal", "fast" or a number (milliseconds)
};

When you download the script, it's configured for a default Task list. If you want to enable it on other list types or Document Libraries, or you're running SharePoint in another language than English the following options need to be changed:

columns: in the array you need to type the names of the columns you want to ajax-enable
values: for every column defined in the columns option, you need to provide an array of values

Optionally you can set the debug option to 1, so a log window is being displayed in case something goes wrong. The animationSpeed option allows you to set the speed of the fancy fade in and out effects for the updated values. When all options are set, follow these steps:

Navigate to the page where you would like to use it (e.g. http://yoursite//Lists/Tasks/AllItems.aspx for the Task list).
Click Site Actions, Edit Page (top right).
Click Add a Web Part.
Select the Content Editor Web Part in the Miscellaneous section and click Add.
Optionally drag the Content Editor Web Part to the bottom of the screen (otherwise a small space will be displayed on top of the page).
Click open the tool pane in the web part.
Click Source Editor ... in the properties task pane.
Copy and paste the modified script in the Text Entry dialog and click Save.
Click Exit Edit Mode (top right) and verify the result.

Remember when the script doesn't work as expected, set the debug option to 1 and you'll see the log messages appearing at the bottom right of the screen. Btw, thanks my Twitter buddies who tested the script! (feel free to follow @jantielens).

[This script has been updated over here]

Customizing the SharePoint ECB with Javascript, Part 3

Jan Tielens — Fri, 11 Sep 2009 13:00:00 GMT

Other articles in this series:

In the previous articles I explained the basic technique to add custom menu items to the Edit Control Block (ECB) using Javascript. Basically it comes down to writing a Javascript function called Custom_AddListMenuItems or Custom_AddDocLibMenuItems (respectively for adding menu items to the ECB of Lists and Document Libraries). In these custom functions you can use the CAMOpt Javascript function (found in the default core.js file) to add as many items as you want. Using the CASubM function you can also build hierarchical menus.

The next thing that I would like to discuss is how to create "context sensitive menu items" in the ECB using these techniques. What do I mean with "context sensitive"? Let’s take a look at the out-of-the-box ECB of a Document Library. In that ECB a menu item is displayed to Check Out a document. But this menu item is only displayed when the document is not yet checked out. When the document is checked out, the ECB displays the Check In and Discard Check Out menu items instead. So based on the metadata of the document, the ECB is different in this scenario.

To illustrate how you can build context sensitive ECB menu items yourself, let’s take the following example: we’ll enhance the ECB of a default Task list so it shows menu items to quickly mark a task as Completed, In Progress etc. In the following screenshot the ECB for Test Task 1 is displayed. The Status of that task is set to Not Started, so the Update Status menu item only displays In Progress, Complete, Deferred and Waiting child menu items.

In the same task list, there is also a Test Task 2 item for which the status is set to In Progress. The Update Status menu item in the ECB now displays Not Started, Complete, Deferred and Waiting.

Since the customized ECB is configured in a Javascript function (Custom_AddListMenuItems in this case), we need to be able to retrieve the Status value of the item for which the ECB is currently being rendered. The core.js and init.js out-of-the-box Javascript files, give us little meta data information: only the item ID, checked out status etc are available. In this case technically it is possible to retrieve the Status value of the list item by querying the HTML DOM. Although this technique would work, it would only work if the needed meta data is actually displayed. E.g. if the Status column would not be displayed in the view, the information could not be retrieved. Therefore I’m using another technique that retrieves the necessary meta data information by making a call to the lists.asmx web service. This web service has a web method called GetListItems that can retrieve all meta data for one or more list items (as described in an earlier post). Once we have the meta data, the rendering of the ECB menu items is easy:

First the SOAP Envelope to send to the GetListItems web method is constructed (soapEnv variable); it uses the listName property of the ctx object (defined by SharePoint in the init.js), and the currentItemID (defined by SharePoint in the core.js). The jQuery ajax method is used to make a the web service call. When the data is retrieved (the complete option of the ajax method) the current Status value is extracted and stored in the status variable. Next a new menu item is added to the ECB using the CASubM function (since this menu item will contain child items). Finally there is a loop over all possible Status values (stored in the statusOptions array); every possible Status is added as a sub menu, except the Status that is currently assigned to the task item. Notice that the third parameter of the CAMOpt function is a Javascript call to the changeTaskStatus function, passing the web service URL, the list ID, the item ID and the selected status as parameters.

The changeTaskStatus function is pretty straight forward: once again a web service call is made, this time to the UpdateListItems web method of the lists.asmx web service. The SOAP Envelope sent to this web method contains a Batch element in which an update is described of the Task list item.

When the web service call is done (the complete option of the ajax method) the page is refreshed by setting the href of the window.location property to it’s current value. As a result the page will display the updated value of the Status.

Although this is pretty cool, it’s a pity of course that everything is happening using client side Javascript; except updating the value of the Status column in the HTML page (which done with a full page refresh). Let’s try to fix this! To get to the location in the HTML DOM where the Status of the Task item is displayed is quite complex due to how SharePoint generates the HTML for a List view. The getItemTD function below will get a reference to the TD element for a specific Task item. First of all this method selects a table element with the ID set to the combination of the list ID and view ID. Notice that this table ID needs to be escaped for jQuery to make the selection. Next the TR element (row) is selected for the Task item, based on the ID of a table nested on the TR which is the same as the item ID. After that the header row is selected so the index of the Status column can be calculated. Using this index the correct TD element (table cell) is selected and returned.

To make us of this function the complete option of the ajax function, used in the changeTaskStatus function, has to be changed:

...
complete: function(xData, result) {
getItemTD(itemid).text(newstatus);
},
...

The getItemTD function is used to select the table cell which should be updated with the new value. The result is that now the Status of a Task item can be updated, both in the SharePoint database and the web UI, without full page postbacks!

You can download the full source code of this sample over here. To use it, navigate to a default Task list (e.g. http://yoursite/Lists/Tasks/AllItems.aspx) and add a Content Editor Web Part to the page. Open the Tool Pane of the Content Editor Web Part and paste the downloaded script in the Source property of the web part (detailed instructions to add the web part can be found over here). Notice that on top of the script a reference is made to the jQuery library hosted by Google. Once again, if you host the jQuery library yourself (e.g. in a Document Library), feel free to update the URL.

URL Shortening in SharePoint with bit.ly

Jan Tielens — Fri, 04 Sep 2009 15:00:00 GMT

In my two previous posts about customizing the Edit Control Block (or ECB for short) with Javascript, I showed some basic examples of what can be accomplished with this technique. Now it’s time to build a real life example instead of menu items which show Hello World dialog boxes.

I’m pretty sure everybody who is using SharePoint has sent a link to a document in a Document Library to somebody else (in an email message for example). So you probably know that links to documents (or list items) can become pretty long if the document is located in a Document Library on a site deeply buried in a hierarchy. Already some time ago the internet community has solved the issue of long URL’s (which were a pain in newsgroups for example, or too long for Twitter messages): URL shortening. The idea is pretty basic: you can request a short URL (typically containing a generated code) for a long URL. When somebody uses the short URL, the long URL is retrieved and the user is redirected. There are many sites on the internet that provide this service for free, in this article I will be using bit.ly because they have a pretty nice API you can work with as a developer. For example this link http://bit.ly/1btOBN will navigate to http://weblogs.asp.net/jan/archive/2009/09/04/customizing-the-sharepoint-ecb-with-javascript-part-2.aspx.

So what’s the idea? Instead of having to copy the link of a SharePoint document or list item to the clipboard, navigate to bit.ly and request a short URL over there; we’ll build this functionality directly into the SharePoint web user interface. The screenshot below shows the ECB of a normal Document Library, as you can see there is an extra menu item Shorten Link with bit.ly that has three child menu items.

Once again, in my previous post I go into the details about how you can build a nested ECB menu item by just using Javascript. So let’s quickly discuss the code to build the menu items:

function Custom_AddDocLibMenuItems(m, ctx) {
    var itemLink = window.location.protocol + "//" + window.location.host +
                        GetAttributeFromItemTable(itemTable, "Url", "ServerUrl");
    return addBitlyMenuItems(m, ctx, itemLink);
}

function Custom_AddListMenuItems(m, ctx) {
    var itemLink = window.location.protocol + "//" + window.location.host +
                        ctx.displayFormUrl + "?ID=" + currentItemID;
    return addBitlyMenuItems(m, ctx, itemLink);
}

function addBitlyMenuItems(m, ctx, url) {
    var shortenMenu = CASubM(m,"Shorten Link with bit.ly", "/_layouts/images/RAT16.GIF");

    CAMOpt(shortenMenu, "Shorten and Display", "getShortUrl('" +
            url + "', shortenAndDisplay)", "");

    CAMOpt(shortenMenu, "Shorten and Copy to Clipboard",
            "getShortUrl('" + url + "', shortenAndCopy)");

    CAMSep(shortenMenu); // separator

    CAMOpt(shortenMenu, "Show Statistics for Short Link",
            "getShortUrl('" + url + "', shortenAndShowStats)", "/_layouts/images/GRA16.GIF");

    CAMSep(m); // separator
    return false;
}

Because I want to show the ECB menu item both in Lists and Document Libraries, I’ve implemented both the Custom_AddDocLibMenuItems and Custom_AddListMenuItems Javascript functions. In those functions a string is constructed that contains a link to either the list item or to the document. Once we’ve got that URL, the addBitlyMenuItems function is called. This function will build the parent menu item in the ECB and the three child menu items which will actually do the actions. Every action menu item calls a custom Javascript function called getShortUrl which has a parameter for the long URL and a callback function. The getShortUrl function builds an URL to call the bit.ly REST API. This URL is called with the help of the jQuery getJSON function. Note that to make use of the bit.ly API you need to have a free account and a corresponding key.

function getShortUrl(url, callback) {
    var bitlyURL = "http://api.bit.ly/shorten?"
        + "version=2.0.1"
        + "&longUrl=" + escape(url)
        + "&login=YOUR_LOGIN" +
        + "&apiKey=YOUR_KEY" +
        + "&history=1" +
        + "&format=json&callback=?";

    $.getJSON(bitlyURL, function(data){
        callback(data.results[url].shortUrl);
    });
}

Once the getJSON function receives the data from bit.ly, the callback function (which was passed as a parameter) is called, passing along the shortened URL.

The three callback functions used in the addBitlyMenuItems function, will each do a specific action: show the shortened link, copy the link to the clipboard or navigate to the bit.ly statistics page. The shortenAndDisplay is the most complex of those three; this function will display the shortened URL in a DIV centered on top of the page. Once again jQuery is used for manipulating the HTML DOM to dynamically render the DIV.

function shortenAndDisplay(url) {
    $("body").append("<div id='shortUrlDiv' class='ms-vb' style='position:absolute; \
        background-color:White; padding:10px; border-width:1px; border-style:solid; \
        border-color:Black;display:none; position:absolute;'>URL shortened to:<h2>" +
        url + "</h2><a href='#' id='shortUrlDivClose'>Close</a></div>");

    var $shortUrlDiv = $("#shortUrlDiv");

    var topPos = (document.body.clientHeight - $shortUrlDiv.height()) / 2;
    var leftPos = (document.body.clientWidth - $shortUrlDiv.width()) / 2;

    $("#shortUrlDivClose", $shortUrlDiv).click(function() {
        $(this).parent().hide("fast", function() { $(this).remove(); });
    });

    $("#shortUrlDiv").css("top", topPos).css("left", leftPos).show("fast");
}

The result of this function looks like this:

The other two callback functions are very easy to implement. Notice that to show the bit.ly statistics page for a shortened link, you just need to add a + sign to that link.

function shortenAndCopy(url) {
clipboardData.setData("Text", url);
}
function shortenAndShowStats(url) {
window.location = url + "+";
}

The complete source code can be downloaded from here. You will notice that I’ve made the code somewhat easier to configure by adding a configuration variable at the top:

var shortenConfig = {
    debug: 0,                   // set this value to 1 to see debug information
    bitlyLogin: "spdemo",       // bit.ly account, below API key
    bitlyAPIKey:"R_877718dd86f418d0ee840c08af717a68",
    bitlyHistory: 1             // set this value to 1 to add to bit.ly history
};

When you set the debug variable to 1, another DIV is dynamically added to the page and will show some log messages. When the bitlyHistory variable is set to 1, bit.ly will add the shortened link to the bit.ly account (so you can track it). Once again, if you plan to use this, go to bit.ly and sign up to get your own login and API key. On top of my code there is a reference to the jQuery library hosted by Google. If you have deployed jQuery locally, feel free to change the script reference. To use the code, just navigate to a Document Library or List, and add a new Content Editor web part to that page. As the HTML source of the web part, copy and paste the entire code that you've downloaded. (For a detailed description how to add the Content Editor web part, check an earlier article)

Customizing the SharePoint ECB with Javascript, Part 2

Jan Tielens — Fri, 04 Sep 2009 04:15:00 GMT