Ribbon customization - Part 3

SharePoint 2010 has come up with new framework with status bar and notification messages. Status bar is more for a persistent message and notification is more for showing temporary messages and then fads away.

We are going to see both in this post. We are going to take the same example which we took in last part 2. If you have not gone through Part 1 and Part 2, I would recommend you reading them first and then continue reading here.

Status bar messages are exposed via SP.UI.Status namespace.

To start with let me show you a very simple example.

Change the CommandAction to following.

<CommandUIHandler Command="BingButtonCommand" CommandAction="javascript:SP.UI.Status.addStatus('Hey this will take you to Bing');" />

Will result in



If you change it to this

<CommandUIHandler Command="BingButtonCommand" CommandAction="javascript:SP.UI.Status.addStatus('Bing Status:', 'Hey this is a bing search', true);" />

We have given name to the message. Then you will get this




Now a very important thing to note here is, when you add status to SharePoint 2010, it returns you one ID of that status so that you can play around with it. so to get the ID we need to write like this


<CommandUIHandler Command="BingButtonCommand"
CommandAction="javascript:var statusId =SP.UI.Status.addStatus('Bing Status:', 'Hey this is a bing search', true);" />

Here we have stored the ID of the status message in the statusId variable. So now let’s use it. change the CommandAction to this.


<CommandUIHandler Command="BingButtonCommand"
CommandAction="javascript:var statusId =SP.UI.Status.addStatus('Bing Status:', 'Hey this is a bing search', true);
SP.UI.Status.setStatusPriColor(statusId, 'green');" />

And this is what you get now



Okay, what if you keep clicking that Bing button, here is what happens.




That is because it is primarily meant to display a message and then remove it before showing the next message. This automatically goes away if you navigate to some other page and then come back to this page. But when you are on same page and keep clicking on the button, it displays the messages as many times as you display.

The idea is there may be a scenario where in you might want to display different messages with different colors for some reason. And for that, this completely suits it.

But in case you do not want this, then here is a way you can eliminate it.


<CommandUIHandler Command="BingButtonCommand"
CommandAction="javascript:SP.UI.Status.removeAllStatus(true);
var statusId =SP.UI.Status.addStatus('Bing Status:', 'Hey this is a bing search', true);
SP.UI.Status.setStatusPriColor(statusId, 'green');" />


We have added one more line to this, which actually removed all the messages from that status bar and hence even if you are on a same page and clicks on the button multiple times, it won’t display status that many times.

There is another way to remove a status by using its ID that we fetched earlier.

SP.UI.Status.removeStatus(statusId);

Now let’s take a look at notification framework. It is always a good way to say user that something is happening or something has just happened after they perform several task. For example when we save the data, we show to the user that data has been saved for about 3-4 seconds and then remove the message.

SharePoint 2010 has come up with this new framework which supports displaying message and then remove it which is called notifications.

So let’s make a small change in CommandAction to work like a notification.


<CommandUIHandler Command="BingButtonCommand"
CommandAction="javascript:SP.UI.Notify.addNotification('Something is in progress...');" />


You will notice a message coming up from right side of your screen and be there for about 7-8 seconds and then feds away.



Advantage is that you can also use entire HTML inside that and that gives you a flexibility to make font bold, italic, display tables, images etc in the message. Here is a simple example. Let’s change CommandAction to this.

<CommandUIHandler Command="BingButtonCommand"
CommandAction="javascript:SP.UI.Notify.addNotification('<b>Something </b> is in progress....');" />

Well this is the way it should not be written. It will not allow less than and greater than symbol to the script. So you need to encode it. we have written it just because it became simple for us. BUT YOU NEED TO ENCODE IN < AND > like And the output



Again when you add notification, you get the ID and then you can play with that Id.

The other overloaded methods that you can use with notification message are it also allows you to stick the message. Means it will always be there. Just pass one one more parameter which is true.

<CommandUIHandler Command="BingButtonCommand"
CommandAction="javascript:var NID=SP.UI.Notify.addNotification('&lt;b&gt;Something &lt;/b&gt; is in progress....',true);" />

You can also remove the message by using

SP.UI.Notify.removeNotification = function(NID) {
}

I hope this will help you all. Continue reading Part-4