Navigate Up
Sign In
Supporters of Developer
Web

SharePoint: Showing Notification and Status Message Using SP.js

Item is currently unrated. Press SHIFT+ENTER to rate this item.1 star selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+ESCAPE to leave rating submit mode.2 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.3 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.4 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.5 stars selected. Press SHIFT+ENTER to submit. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.

You may also be interested in: SharePoint Smart Notifications by KWizCom

 

Editor's note: Contributor Adeel Ehsan is a Developer / IT Trainer in Dubai, UAE

It is very important to notify end users about the actions that are going on. Doing it in SharePoint standard style is the way to go. In this article we will see how to display notification and status messages using sp.js support with Visual Studio 2010.

What are those?

The following figure shows the notification and status messages in a SharePoint site during different operations:

2013-01-08-NotificationStatus-01.png

How to do it

We will create a visual web part that will perform some server side actions. After that it will show notification and status messages to inform the user, just like above. This will work in the standard web part as well.

Creating Visual Web Parts in Visual Studio 2010:

  1. Go to File-New-Project. Under SharePoint 2010 project templates, select Visual Web Part template. Choose name, location and click ok.
  2. Next, choose an existing SharePoint site for debugging and choose Deploy as Farm Solution.
  3. This will add various project items that you could see in the solution explorer. One of them is VisualWebPart1 that is the actual visual web part.
  4. Expand it and you will see the web user control files, VisualWebPart1UserControl.ascx and VisualWebPart1UserControl.ascx.cs. As we know, VisualWebPart is a web user control (.ascx) being loaded using a standard web part.
  5. Go to the source view of the VisualWebPart1UserControl.ascx and add the following JavaScript:

  6. <script language="javascript" type="text/javascript">
        var statusID;
        function showNotif() {
            SP.UI.Notify.addNotification('Done with the processing...', false);
            statusID = SP.UI.Status.addStatus("Title:", "Your request has been processed.");
            SP.UI.Status.setStatusPriColor(statusID, 'green');
            setTimeout(function () { SP.UI.Status.removeStatus(statusID); },4000);
        
        }
    </script>
    

    IMPORTANT:
    The above JavaScript code is using SP.UI namespace to show notification and status. SP.UI.Notify class has a method addNotification() that will display a notification and it takes 2 parameters: first is the text (html) that you want to display and second is a Boolean parameter that will specify whether the notification stays as sticky notification or not. In this case false means, it should disappear after a few seconds.

    SP.UI.Status class has a method addStatus() that will display a status message and it takes 2 parameters; the first one is title, which is always rendered in bold and second is the actual text (html). Since status message will not disappear automatically, we need to save its ID in a variable and later remove it. SP.UI.Status.setStatusPriColor() method is used to set the background color of the message.

    After a delay of 4 seconds, the status message is removed using SP.UI.Status.removeStatus() method that takes the id of the status.

  7. Next, add the following markup below the script which will add a button with 2 labels:

  8. <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Click Me" />
    <p>
        <asp:Label ID="Label1" runat="server" Text="Waiting for click...and will show notification "></asp:Label>
        <asp:Label ID="Label2" runat="server" Text=""></asp:Label>
    
    </p>
    

  9. Label1 will be used to display some server side processed messages, and Label2 will be used to run JavaScript function showNotif() to display notification and status messages.
  10. Go to the code behind file VisualWebPart1UserControl.ascx.cs and add the following code in the Button1_Click() event handler so that it looks like: (Double Click on the Button1 in design view to create following event handler)

  11. protected void Button1_Click(object sender, EventArgs e)
            {
    
                this.Label1.Text = "Finished processing on " + DateTime.Now.ToString()+   ". [Set from code behind]";
                //set the script over the label using SP.SOD.ExecuteOrDelayUntilScriptLoaded
                //this method will wait for sp.js to be loaded fully before calling 
                //showNotif javascript method
                this.Label2.Text = "<script>ExecuteOrDelayUntilScriptLoaded(showNotif,'sp.js');</script>";            
            }
    

  12. In the above code, on the first label, we are simply setting a message concatenated with current date and time. In a real application, this can be any valid allowed SharePoint processing. On the second label we are setting a script call as text that will cause our JavaScript function to run.
  13. IMPORTANT: We have to use ExecuteOrDelayUntilScriptLoaded() to invoke the JavaScript function so that sp.js is fully loaded before the function tries to run. If we do not use it, we will run into a JavaScript error.
  14. That’s it for the development. In the Visual Studio solution explorer right click and say Deploy.

Testing the web part:

  1. Open the SharePoint site in the browser for which the project was built and deployed.
  2. On the home page, or any page, Edit and insert the visual web part. You will find the web part in Custom category by default.
  3. We will see the following after adding the web part on the page:
  4. 2013-01-08-NotificationStatus-02.png

  5. Click on the Button and we will see the following:
  6. 2013-01-08-NotificationStatus-03.png

  7. In the above image we can see the notification and status message.
  8. After 4 seconds the status message will be removed and after a few more seconds, the notification will be removed as well.

Note: You can choose to show the status message and/or notification accordingly.

References:
http://msdn.microsoft.com/en-us/library/ee552096(v=office.14).aspx [SP.UI namespace]

Categories: Visual Studio; Visual Studio 2010; Javascript and jQuery; dev; MOSS; WSS; 2010

Comments

shine

best

It is very critical to notify abstain users about the competitions best essays that are going on. Doing it in SharePoint symbol classification is the fare to go.

Posted 01-Aug-2013 by shine
capser

reply

To know about the recent updates and standards features on share point will help us to bring up our services onto that level.check this site I am really happy that the data given here was easy to read and understand.

Posted 30-Sep-2013 by capser
antojames

SharePoint

Sharepoint is a collaborative environment that is run on a server and linked to a SQL database. It allows, through the use of a web browser, how to write academic essays in academic essay format people to surf through a heiarchal series of web pages, document libraries and other collaborative content.

Posted 03-Oct-2013 by antojames
Candly019

Thank you for sharing!

Thank you for sharing. Your post worth of reading. Waiting for new posts. buyincoins

Posted 29-Oct-2013 by Candly019
Rdokoye

Great work

The explanation is well put together, can take a while to get to grips with, which is why visual illustrations work very well.

Posted 14-Jan-2014 by Rdokoye
Watchoh

good read

This is a really good read for me, Must admit that you are one of the best bloggers I ever saw. Thanks for posting this informative article.http://www.dreamswissquality.com

Posted 17-Feb-2014 by Watchoh
PegH

Status messages are a no show

I have been successful in displaying Notifications but I cannot get status messages to display.
 
I have added the SP.js to my masterpage but still get IE F12 message: SCRIPT5009: 'sp' is undefined
 
When I go to the line where the script is loaded I see:
ExecuteOrDelayUntilScriptLoaded(ViewItem, ?sp.js?)
 
Any ideas you could share?
 
Thanks ahead,
PegH
 
 

Posted 23-Feb-2014 by PegH
michaelzach276

michaelzach276

The various situations that we never even heard of. Really love these kinda articles. leather jacket with hoodie

Posted 04-Mar-2014 by michaelzach276

Notify me of comments to this article

E-mail:
   

Add Comment

Title:

 
Comment:
Email:

   


Name:

 
Url: