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

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

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

Well, our first questions is “How do I integrate jQuery with SharePoint 2010?” They are many articles written on that, so I won’t be explaining the details of that. Instead I can suggest you to follow masterpage update approach and include your jquery script references in masterpage rather than keeping those files in Shared Documents or some other library in your site. Basically I followed this article.

You start reading that article and ready to customize your masterpage using SharePoint Designer 2010. But now you need the jQuery lib and jGrowl files. You can get the current release of jQuery here. For this article I used version 1.6.2. Also you can download jGrowl and CSS file package from Jan’s article or here. If you want the latest jGrowl lib, then you can get it from jGrowl site.

I created a folder called jQuery in 14 hive and put jQuery and jGrowl files in there. It’s really up to you where you want to store your jQuery related lib files.

So far, it was getting the grounds ready. After you modify your masterpage, it should look like this.

Since in this article I keep the same scenario as explained in Jan’s article, we’ll see notifications for open tasks assigned to your user.

Now go ahead, switch to your site, possibly (but not restricted to ) a team site, and create some sample tasks as shown below.

Next, create a test page and insert a Content Editor Web Part in it.

Then, insert the code provided here. This part of the code is the same with the one Jan provided in his article with the exception of two minor changes.

1. L_Menu_BaseUrl is added while calling lists.asmx web service as highlighted in red below.

2. jQuery and jGrowl references are moved from CEWP to masterpage.

====================================================================

Testing jGrowl for SharePoint 2010…<br/>

<script language=”JavaScript”>

$(document).ready(function() {
var soapEnv =
“<soapenv:Envelope xmlns:soapenv=’http://schemas.xmlsoap.org/soap/envelope/’> \
<soapenv:Body> \
<GetListItems xmlns=’http://schemas.microsoft.com/sharepoint/soap/’> \
<listName>Tasks</listName> \
<viewFields> \
<ViewFields> \
<FieldRef Name=’Title’ /> \
<FieldRef Name=’Body’ /> \
</ViewFields> \
</viewFields> \
<query> \
<Query><Where> \
<And> \
<Eq> \
<FieldRef Name=’AssignedTo’ /> \
<Value Type=’Integer’><UserID Type=’Integer’ /></Value> \
</Eq> \
<Neq> \
<FieldRef Name=’Status’ /> \
<Value Type=’Choice’>Completed</Value> \
</Neq> \
</And> \
</Where> \
</Query>\
</query> \
</GetListItems> \
</soapenv:Body> \
</soapenv:Envelope>”;

$.ajax({
url: L_Menu_BaseUrl + “/_vti_bin/lists.asmx”,
type: “POST”,
dataType: “xml”,
data: soapEnv,
complete: processResult,
contentType: “text/xml; charset=\”utf-8\”"
});
});

function processResult(xData, status) {
$.jGrowl.defaults.position = “bottom-right”;
$.jGrowl.defaults.life = 10000;

var firstMessage = true;

$(xData.responseXML).find(“z\\:row”).each(function() {
if(firstMessage)
{
firstMessage = false;
$.jGrowl(“<div class=’ms-vb’><b>You have open tasks on this site.</b><div>”,
{
life: 5000
}
);
}

var messageHtml =
“<div class=’ms-vb’>” +
“<a href=’” + L_Menu_BaseUrl + “/Lists/Tasks/DispForm.aspx?ID=” + $(this).attr(“ows_ID”)
+ “&Source=” + window.location + “‘>” +
“<img src=’/_layouts/images/ITTASK.GIF’ border=’0′ align=’middle’> ” +
$(this).attr(“ows_Title”) + “</a>” +
“<br/>” + $(this).attr(“ows_Body”) +
“</div>”;
$.jGrowl(messageHtml);
});
}</script>

====================================================================

Refresh your page and there you go.. Your jGrowl notifications for SharePoint 2010.

Hope you enjoyed reading this article.

zieglers

zieglers 

Last Canada Day (July 1st) was the best ever for me.

Firstly of all my son started walking…

Secondly, I was given 2011 Microsoft MVP Award – SharePoint Server.

Thanks a million to all my readers.

Best,

Zieglers

One of those customizations which took some time to figure out was to create Cascading Dropdowns for SharePoint 2010 lists. At first, It really sounds like simple, however as requirements get more complex, it really gets though to get the job done w/o any coding.

In this post, i’ll try to share some of my findings on creating cascading dropdowns. As for our demo scenario, we have a custom list to hold some Assets. However, we want to include some extra filters to see our company assets, such as office, asset location, …etc. This means first user will select office – New York, Boston, Toronto, … – and then location for the asset such as first floor, second floor, …etc. Based on those selections, assets falling into that criteria will be listed. Classic scenario..!!! Here is how you do this by customizing your New/Edit forms using InfoPath 2010 in SharePoint 2010.

You can find all screens of this process in the following presentation:

CascadingDropDowns

1. Now, let’s get started. Here is our initial New Form.

2.In the ribbon menu, click ‘Customiza Form’ button. This will open up InfoPath 2010.

3. Insert couple of rows for additional filter fields – Office and Location.

4. Add new fields to filter based on Office and Location.

5. Drag and drop Office and Location fields onto the form, where you created additional rows.

6. Change text boxes to drop downs.

7. So far, we created necessary UI elements and fields to hold filter values. Now add a data connection to fill those drop downs.

8. Data bind Office field to new data source.

9. Data bind Location field to new data source.

10. Having our fields data-bound, so far we have additional Office and Location fields on the form which are being loaded w/o any filter applied.

Now we come to fun part of this post. “How to filter Location values based on Office selection?”

Since we will apply on Location drop down, go to Location drop down properties and start applying filter as shown in below screens.

Add a new filter for Location field.

Specify filter condition. Usually this is the part things get confusing. But it’s not confusing at all.

Just speak the condition out loud:

“Filter condition is… Filter Location based on Office value… Which Office value???…”

“Filter Location where Office value coming from data source is equal to Office value coming from UI Office drop down…”

11. Now click Ok to close all windows. Our cascading dropdowns are ready! Preview changes we’ve made.

Select ‘New York’ as Office.

Location values for New York office is shown!!!

Now that concludes this post. Another addition to this can be setting some field values in UI based on drop down selections. For this you need to add a rule which has an action item attached to it. I’ll try to show that one in another post.

zieglers

Here is a link to SharePoint 2010 Upgrade playlist: http://www.youtube.com/view_play_list?p=7B18675060D89566

http://www.youtube.com/p/7B18675060D89566?hl=en_US&fs=1

zieglers

One of the most important improvement idea was ‘to be able to move files between SharePoint servers‘. In other words, users want to move files between document libraries where source and destination libraries reside in two different physically SharePoint servers.

Sounds simple, but implementation of it was not that simple. Eventually i was able to make it. Here is the Youtube video showing how it looks like. In case there will be requests, I may mention of implementation details in another post.

zieglers

Recently I tried SAP IDES ECC 6.0 Installation on Hyper-V environment with a host of 8GB Ram. This time I allocated 6GB Ram to WinServer 2003 R2 Standard Edition client, and took some screenshots to share with you all. I read lots of people out there especially complaining about import ABAP taking too long. Of course there are several factors to that like number of parallel import jobs running or memory allocated for client machine and SQL Server … etc.

Here I’m not going to make any conclusions on that. Simply I want to show you my experience of SAP IDES ECC 6.0 Installation on Hyper-V. Yes, import ABAP phase is going to take a long time, and yes it’ll take a lot longer than you expect. Since this is the case, just be patient and let it run smoothly. During this phase, make sure that your client is not going to run out of disk space. Also, set your power options to ‘always on’ so that your host doesn’t go into sleep mode during installation.

Here is the first minutes of Import ABAP Phase.. Note SQL Server memory consumption. 2.7 GB, not too bad for a 6GB client.

As you can see, below screen clearly shows that my IMPORT ABAP Phase almost took 1 day to complete.

(Yes, I was doing SAP Installation on Valentine’s Day Well, technically I was only monitoring it, so no harm done to family life..)

Also, another thing to check is that, make sure all 105 import jobs completed successfully as seen below. You can check this from installer log screen.

Following Import ABAP Phase, sometimes first time start of central instance can take some time, but nothing more than 10-20 minutes. There is a time-out limit for that. Once the central instance is up and running, you’ll see disp+work processes like this.

And finally once the installation is complete, here is what you get.

Now you can go ahead and if you haven’t done already, install your SAP GUI and connect to your SAP System for the first time.You can use your DDIC user and password you provided during installation to log on.

Enjoy.

P.S. Note that your temp license will expire in 1 month.

zieglers