jGrowl Notifications for SharePoint 2010 – Part 3

This article is the third one of “jGrowl Notifications for SharePoint 2010” series. If you haven’t read previous articles, you can find them here:

jGrowl Notifications for SharePoint 2010 – Part1

jGrowl Notifications for SharePoint 2010 – Part2

Also, now SPNotifications is published on CodePlex. Articles above basically explain the details of the initial release.

In this article, I’ll try to show some additional features of jGrowl functionality such as pooling of notifications, different positioning of notification boxes on the screen …etc. In addition to that, you can also find my Load Testing findings for SPNotifications. Results are way better than I expected!

Pooling of Notifications

There is a jGrowl.defaults.pool property which allows you to limit number of notifications shown on the page. Once a notification is closed, next one will be displayed after that. This is a great functionality which prevents notification boxes from crowding your page.

Here it is in action.. Let’s say you have 1000 notifications – titled from 1 to 1000 🙂 Assume that you’ve already read the ones from 3 to 9. In this case having pooling parameter set to 3, you’ll see the following on your page.

Now I close notification #10 above after reading it. You’ll see that notification #11 will appear as soon as you close notification #10 – as seen below.

Load Testing

So far, I’ve tested SPNotifications with 1K and 10K notification items respectively. I used a simple powershell script to bulk-insert items into the list. You can find this script in this post, where I was trying to insert 1 million items to test List Throttling.

I must say as number of items increased, I had to change SPServices call from async false to true. However, this also came with its side-effect which I’ll try to mention shortly.

Firstly there is almost no effect of 1K items while displaying notifications. Notifications are displayed as soon as the page is loaded. On the other hand, from end-users perspective, it doesn’t really matter if notifications are shown right after page loads or maybe 10 seconds later. An end-user is not really waiting for notifications right away after page load. They will show up whenever CAML query execution is complete.

Based on my load tests, which I performed for 3 sets of loads – namely 1K, 5K, and 10K – I can say that notifications were displayed after:

(after page load completes)

1K – less than 1 sec

5K – 2-3 seconds

10K – 8-10 seconds

Also note that default threshold for a list is 5000 items. This makes “2-3 seconds delay” still acceptable..

So, What to do if number of notifications exceed 5K??? Probably i can answer this question with another question: “Do we really need to keep all those ‘Read’ notifications?“. Probably not! One way to keep number of notifications low would be to delete notifications as soon as they are read.

What if some of those notifications are very important and needs to be tracked down later on for some auditing or reporting purpose? In this case, it’d be wise to maybe to add a ‘Importance‘ column to the list. Delete the ‘medium and low importance’ notifications and keep ‘high’ ones.

Basically, this is the area I’ve been thinking to improve and scale out so that all those above and similar questions can be answered. At this point, i’ll stick to one list. We’ll see how SPNotifications will evolve in time.

zieglers

SPNotifications published on CodePlex!

Finally today, I was able to publish my latest CodePlex project – SPNotifications.

SPNotifications provides floating warning/alert type of notification boxes which can be used to notify your SharePoint users.

Using SPNotifications, you can notify your users by show notification messages such as weather warnings, corporate updates, events …etc.
Notifications can be displayed on any page of your selection, for example, home page of your intranet, or landing pages for each department.

SPNotifications uses jQuery – jGrowl plugin for displaying notifications. Your notifications are stored in a custom list called ‘Notifications’.
Power users or admins can also use a custom application page to populate new notification messages.

You can find all the details on SPNotifications site on CodePlex.

Please give it a try and let me know what you think..

zieglers

jGrowl Notifications for SharePoint 2010 – Part 2

This article is the second part of “jGrowl Notifications for SharePoint 2010” series. If you haven’t read the first part of the series, you can read it here.

In the first article, we implemented the infrastructure for “jGrowl Notifications for SharePoint 2010”. From now on, i’ll refer to it as SPNotifications. First version was pretty raw in the sense that it was still using soap envelopes which are really hard to construct and not that practical to use. Also first version was just a teaser and it was missing some business logic too.

What’s in this article?

In this article i’ll try to show how to replace AJAX calls using soap envelopes with SPServices calls.

“SPServices 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.”

Once we have a cleaner syntax, we’ll add a simple logic where notifications will be read from a custom list called -you guessed it- Notifications. Also upon closing a notification, we’ll implement a close callback logic which will mark notification as read. That should do it as for the scope of this second article. Further improvements will be explained in future articles of the series.

Implementation

First of all, let’s try to list implementation tasks:

1. Include SPServices default syntax.
2. Generate CAML query for AJAX call.
3. Implement completeFunc details.
4. Implement MarkAsRead function.
5. Test it!!!

1. Include SPServices

Inside document.ready include this SPServices call as shown below.

// ***************************************

$().SPServices({
operation: “GetListItems“,
async: false,
listName: “Notifications“,
CAMLQuery: query,
CAMLViewFields: fields,
completefunc: function (xData, status){

} // end – completefunc

}); // end – SPServices

// ***************************************

Operation is GetListItems – since we want to read items from Notifications list.

listName is Notifications – a custom list with additional fields Description, Assigned To and Status (Read, Unread).

Choice values for Status field are ‘Read’ and ‘Unread’. Also, at this point you can add some sample items in Notifications list.

2. Generate CAML Query

Now, we have the skeleton for SPServices call, we can go ahead and specify our CAML query. We want to show only notifications where:

• Assigned To values is “current user”
• Status is different from ‘Read’

‘query‘ variable will store CAML query to be executed. ‘fields‘ variable will have fields that we want to display in the notification.

// ***************************************

var query = “<Query><Where><And><Eq><FieldRef Name=’AssignedTo’ /><Value Type=’Integer’><UserID Type=’Integer’ /></Value></Eq><Neq><FieldRef Name=’Status’ /> <Value Type=’Choice’>Read</Value> </Neq> </And> </Where> </Query>”;
var fields = “<ViewFields><FieldRef Name=’Title’ /><FieldRef Name=’Description’ /></ViewFields>”;

// ***************************************

You can include these variables at the top of the script as shown below.

3. Implement completefunc

This is the part that now we have our results returned and ready to be formatted before displayed. As mentioned in first article too, jGrowl will be used for presentation of notification messages. Here we will be setting some jGrowl options.

Position:

Life:

Sticky:

Close:

Let’s set position and life params at the beginning of completefunc.

Next, we can start looping through each row returned and display them in the format we want. All data returned will be stored in xData.responseXML object.

// ***************************************

completefunc: function (xData, status){

$.jGrowl.defaults.position = “bottom-right”;
$.jGrowl.defaults.life = 10000;

$(xData.responseXML).find(“z\\:row”).each(function() {

// Format your row here…

}); // end – each function

} // end – completefunc

// ***************************************

Here, let’s stop for a minute and think of how to implement a header part of the notification messages saying “Your messages for today” for instance. For that i introduce a flag called firstMessage, which will help us to construct header message by executing the code only once as implemented below. This header has a lifespan of 5 seconds.

Next we start formatting notification messages for each entry in Notifications list. First let’s get notification ID – SPListItem ID – so that we can provide a link to notification. In messageHtml variable, we basically construct the html part for each notification.

Layout is an icon for the notification followed by its title – linked to notification list item – and below its description.

4. Implement “Mark as Read” logic

Almost done for this article! One thing left, which is marking notifications as read upon clicking close button, so that they are not displayed each time page is loaded. This logic is definitely a must. Imagine having SPNotifications for your intranet and assume that notifications are displayed when you visit homepage of your intranet – or any other department landing page. In that case, showing same notifications every time you visit the home page wouldn’t be that nice, as some point it’d get annoying!! Since this is the case, we need to implement a ‘close callback’ logic here to mark notifications as read.

jGrowl has already an option for close callback – as mentioned in section 2 above. So all we have to do is to implement it in a way that notification list item is updated using SPServices UpdateListItems operation.

Here is our MarkAsRead function which only takes notification ID as input parameter. I’m capturing all script structure so you can see where this function sits. Basically it’s right out of document-ready function scope, at the global level of entire javascript.

Now we have the ‘MarkAsRead’ function ready, all we have to do is to add the code snippet to call it. You can include this right below where we constructed the html for notification messages as shown below.

…and we are done!!! it’s time to test it now..

5. Test your first SPNotifications

To test it, drop a CEWP to your homepage and provide the link SPNotifications script in CEWP options. For example, you can upload the script to Shared Documents, just for testing purposes.

In my Notifications list, i created 3 entries having them assigned to myself and their status being ‘Unread’. Visiting my homepage, I see the following.

After 5 seconds, notifications header ‘Your messages for today’ will disappear. Note that in jGrowl options, I set sticky to true.

Now let’s say, I read the ‘Parking Lot Closed’ notification and clicked that little ‘X’ button. This will trigger close callback function and status for that notification will be set to ‘Read’, i.e. that notification will be marked as read. You can check it from Notifications list as shown below.

Now, let’s visit our homepage again and see only 2 unread notifications are left instead of 3 notifications.

That concludes this article – jGrowl Notifications for SharePoint 2010 – Part 2.

Now I have to think a better way to store and populate those notifications from power user or admin perspective.

Thanks for reading. If you have any suggestions, feedback, having trouble to implement; feel free to drop a note.

 

zieglers

Multi-Select and Drag-Drop for SharePoint

Update-1: (Dec 1st,2010) This project has been published on CodePlex: http://spdragdrop.codeplex.com/

Update-2: (Dec 3rd,2010) ‘Moving Folders’ support implemented, and published.

Update-3: (Dec 13th,2010) ‘Delete Documents’ support coming soon…

Here is a cool jQuery functionality which i have been working on for a while to adapt to SharePoint document libraries. It’s multi-select drag and drop for SharePoint documents. As of now, I managed to hook up this with move operation but in theory any method can be called upon drop action of selected documents.

Here is a teaser screen to show how it looks like..

* Draw a box on documents you want to select. You’ll see that icons of selected documents will be highlighted showing that they are selected. You can also use Ctrl key to select/deselect other documents just like in most operating systems.

* Drag selected documents and drop them onto a folder icon. All selected documents will be moved to that folder.

* As a result of drag&drap, all selected document are moved.

This functionality is using jQuery UI, FronPage RPC (FRPC), and AJAX.

jQuery UI–> multi-select, drag&drop

FRPC –> move document

AJAX –> calling RPC methods.

Soon, i’ll publish this solution on codeplex as well. I’ll be glad if you share any feedback such as other useful scenarios, areas of improvement… etc.

Stay tuned!

zieglers

UPDATE – November 30, 2010

Move Multiple Documents

Move to Folder

In case you want to move multiple documents, you can select them by drawing a rectangle box as seen below.
Selected documents will be highlighted as you draw the box.

When you drag selected documents over a folder, destination folder will be highlighted with dashed lines informing user that it’s an acceptable dropoff location.

Move to Document Library

Alternatively, you can move selected documents to any document library listed in quick launch menu. Once you drag selected documents over a library, similar to folders, library links will be highlighted as well as shown below.
 

 

Move to Parent Folder / Sub Folders

You can also move documents to any sub folder in a document library. In order to do so, simply drag selected documents to any sub folder breadcrumb link as seen below.

Technology Used
jQuery, jQuery UI, FrontPage RPC

Selectable rows in SharePoint using jQuery UI

Here is a quick tip. If you’d like to make rows in document libraries selectable, jQuery UI Selectable is the perfect fit for this.

*Select multiple rows

* Urls of selected documents will be shown.

All you have to do is refer to jQuery UI js, and select your DOM elements to make them selectable and apply your logic.

In this demo, i’ll simply display urls for selected documents. Go ahead and add a CEWP in your document library page. Then select listviewtable as follows. Your function should look like this:

<script>
$(function() {

//make listviewtable selectable
    $(“.ms-listviewtable“).selectable({

      filter: “tr“,  

      stop: function() {
         // display urls of selected documents
         var result = $( “#select-result” ).empty();
         $( “.ui-selected”, this ).each(function() {

             var index = $( ‘a’, this ).attr( ‘href’ );
             result.append( “<br/>” + ( index ) );

         }); // end – each

      } //end – stop

    }); // end – selectable

}

</script>

<span id=”select-result”></span>

So, above code is making all rows in listview table selectable and once you select one or multiple rows, urls are displayed. That part is done in stop function of selectable above.

Now, you selected multiple rows and you have IDs, URLs, …etc. for them, you can simply use that information as an input to your own logic.

zieglers

Dynamic jQuery Tooltips for SharePoint

In this post, I’ll try to show how you can implement tooltips with dynamic content for any link in SharePoint pages.

 

Ingredients

• jquery.1.4.3.min.js
• jquery.simpletip-1.3.1.min.js
• jquery.SPServices-0.5.7.min.js
• 1 teaspoon custom tooltip style
• 1 CEWP

 

Preparation

 

Add jQuery references

 

Firstly, add a CEWP to your site home page. Then edit your CEWP in Source Editor and add the following references with low heat.

<script type=”text/javascript” language=”javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js”></script&gt;

<script language=”javascript” type=”text/javascript” src=”Shared%20Documents/jquery.SPServices-0.5.7.min.js”></script>

<script type=”text/javascript” language=”javascript” src=”Shared%20Documents/jquery.simpletip-1.3.1.min.js”></script>

Add jQuery libraries

While references are getting warmer, add below files in your Shared Documents pot.

 jquery.1.4.3.min.js

http://code.google.com/apis/libraries/devguide.html#jquery

jquery.simpletip-1.3.1.min.js

http://craigsworks.com/projects/simpletip/

jquery.SPServices-0.5.7.min.js

http://spservices.codeplex.com/

Get code structure ready

Secondly, add your javascript code skeleton to your CEWP.

<script type=”text/javascript”> 

$(document).ready(function() {

   // Code goes here

   }); // end – document ready

</script>

Ok, so far our preparation is done. Now we can start cooking our meal.

Call SharePoint Web Services using jQuery

Since I chose ‘list permissions’ as for our dynamic content flavor for our tooltip, first we need to call GetPermissionCollection method of permissions.asmx web service. For a given list, this call will return us all the taste we are used to getting from a list permissions page such as the one below.

 

Call permissions web service

Add following code to your document.ready pot.

// Call permissions web service

  $().SPServices({

    url: “/_vti_bin/permissions.asmx”,

    operation: “GetPermissionCollection”,

    async: false,

    objectName: “Tasks”,

    objectType: “List”,

    completefunc: function (xData, Status) {

           // Format your output here

       } // end – completefunc

  }); // end – SPServices

Once web service is successfully invoked, the result will be returned in xData. Then, in completefunc method, you can modify, format, display your result as you wish.

In this case, I choose to feed my tooltip with the result of my web service call. This will allow me to show list permissions, once user hovers mouse over a list in quick launch menu.

Select fields you want to display

But before I do so, I need to select which part of result I need to show in my tooltip. Here, I choose to show only users and groups which have permissions on that list.

Add following code to your completefunc pot.

            // Loop thru each permission

            // Display users and groups

            //$(xData.responseXML).find(“Permission”).each(function() {

            $(xData.responseXML).find(“Permission”).each(function() {

                 var xmlGroupName = $(this).attr(“GroupName”);

                 var strGroupName = String(xmlGroupName);

                 var xmlUserLogin = $(this).attr(“UserLogin”);

                 var strUserLogin = String(xmlUserLogin );

                 if (strGroupName != ‘undefined’)

                     $(“#callResponse”).append(“<li>” + strGroupName + “</li>”);

                 else

                     $(“#callResponse”).append(“<li>” + strUserLogin  + “</li>”);

            });

In above code you’ll see that group and user names are appended to a div element, whose id is callResponse. So, let’s add that div too in our CEWP. You can put anywhere outside of <script> tags.

Add Tooltip to SharePoint links

 

We are done with heavy lifting, now it is show-off time. Our meal has been cooked to perfection and ready to be served now. One last thing to do: get tooltip plate ready.

I chose Tasks link in quick launch menu as my victim. I’ll add my tooltip to Tasks link so that when users mouse over that link, they’ll see my delicious list permissions content in a beautifully served tooltip plate.

Add following code after the end of SPServices line.

    // Tooltip

    $(‘a[href*=”Tasks”]’).simpletip({

       content: $(“#callResponse”),

       offset: [50, 0]

    }); // end – Tooltip

Add Tooltip Style

Finally, before we get our plate in hand and walk out of kitchen door, a final touch-up is required to wow our guests. That one is our humble inline style below. Of course if you wish, you can put that style in your some css files later on.

<STYLE>

.tooltip{

  position: absolute;

  width: 250px;

  padding: 8px 10px;

  background-color: #F2F2F2;

  border: 2px solid #848484;

  cursor: pointer;

  text-decoration:none;

}

</STYLE>

Conclusion

Now you walk out of SharePoint development kitchen door and put your masterpiece in front of your guests and enjoy watching them when they are eating.

Bon Appetit!!!

zieglers

Using jCarousel in SharePoint sites

Recently i was experimenting with jQuery and was thinking how to apply it on some SharePoint scenarios. I must say that more I dive into jQuery, more impressed i am with its capabilities. There are many ways of using jQuery for SharePoint.

In this post, as a starting point, i’ll try to explain a control called jCarousel for SharePoint.

Carousel is a web component which allows you to browse through a set of items in groups. It’s called carousel since when you click left and right arrows it gives you the feeling that it’s turning. Usually it’s used for previewing photos.

jCarousel is using jQuery technology to give that turning look and feel. However in order to make it SharePoint friendly, you have to go thru some steps.

Enabling jQuery for SharePoint

Eventhough technique i’ll mention here is documented in this post, it’s not specific to jCarousel. It acts as a jQuery infrastructure for SharePoint.

Actually, idea is really simple. In order to run jQuery in SharePoint pages, jQuery library must be referenced in page headers. Once jQuery library is referenced, functions in that library can be called anywhere within that page.

Since SharePoint is controlling page rendering, you have no option of editing those pages and including your reference between html head tags of that page. So, how do we do that?

Firstly, we create a controltemplate which holds reference information to jQuery library.

Secondly, we implement an additional page header and render our control template using that code.

Thirdly, we create a site-scoped feature to activate/deactivate jQuery for site collections.

Before we finalize infrastructure details, we need to put actual jQuery library in 12 hive. I picked Layouts/jQuery folder for this. This folder will keep jQuery libraries and any jQuery related files.

Now, we are done. Our feature to enable jQuery for SharePoint is ready. All we need to do is to activate the feature on site collections where we want to enable jQuery.

Using jCarousel in SharePoint

Once jQuery is activated for a site collection, controls using jQuery can easily be used in pages. Here is how you can use jCarousel in SharePoint pages:

jCarousel is actually an unordered list (<ul> tag in html) which contains some list items (<li> tag in html). In this example those list items will be images which can be retrieved from picture library. Also we wrap list items with a asp.net repeater control so that we can bind image urls dynamically.

So, jCarousel html looks like this:

And you can bind images to jCarousel as follows:

In above code snippet, we create a datatable with a column called ItemUrl, then we loop thru MyPicZ picture library in current web object and add urls to datatable. Finally we bind datatable to repeater control.

That concludes this post. In the end we have jCarousel control working in a SharePoint page.

zieglers