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.
Creating Visual Web Parts in Visual Studio 2010:
What are those?
The following figure shows the notification and status messages in a SharePoint site during different operations: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:
- Go to File-New-Project. Under SharePoint 2010 project templates, select Visual Web Part template. Choose name, location and click ok.
- Next, choose an existing SharePoint site for debugging and choose Deploy as Farm Solution.
- 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.
- 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.
- Go to the source view of the VisualWebPart1UserControl.ascx and add the following JavaScript:
- Next, add the following markup below the script which will add a button with 2 labels:
- 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.
- 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)
- 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.
- 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.
- That’s it for the development. In the Visual Studio solution explorer right click and say Deploy.
02 |
var statusID;
|
03 |
function showNotif()
{ |
04 |
SP.UI.Notify.addNotification('Done with the processing...', false); |
05 |
statusID = SP.UI.Status.addStatus("Title:", "Your request has been processed."); |
06 |
SP.UI.Status.setStatusPriColor(statusID, 'green');
|
07 |
setTimeout(function () {
SP.UI.Status.removeStatus(statusID); },4000);
|
08 |
|
09 |
}
|
10 |
</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.
1 |
<asp:Button ID="Button1" runat="server"
onclick="Button1_Click" Text="Click Me"
/> |
2 |
<p>
|
3 |
<asp:Label ID="Label1" runat="server"
Text="Waiting
for click...and will show notification "></asp:Label>
|
4 |
<asp:Label ID="Label2" runat="server"
Text=""></asp:Label>
|
5 |
|
6 |
</p> |
1 |
protected void
Button1_Click(object sender, EventArgs e)
|
2 |
{ |
3 |
|
4 |
this.Label1.Text =
"Finished processing on " + DateTime.Now.ToString()+ ". [Set from code behind]"; |
5 |
//set the script over the label using
SP.SOD.ExecuteOrDelayUntilScriptLoaded |
6 |
//this method will wait for sp.js to be loaded fully
before calling |
7 |
//showNotif javascript method
|
8 |
this.Label2.Text =
"<script>ExecuteOrDelayUntilScriptLoaded(showNotif,'sp.js');</script>"; |
9 |
} |
Testing the web part:
- Open the SharePoint site in the browser for which the project was built and deployed.
- 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.
- We will see the following after adding the web part on the page:
- Click on the Button and we will see the following:
- In the above image we can see the notification and status message.
- After 4 seconds the status message will be removed and after a few more seconds, the notification will be removed as well.