Sivarajan's Blog

SharePoint | Office 365 | Azure | JavaScript

SharePoint 2013 Responsive Status / Notification Message using Toastr

Overview

Learn how to use the Toastr JavaScript notification framework with SharePoint 2013

Earlier days, we have to build the multiple web sites which targets multiple platforms (for example mobile, desktop, tablet). But recent trends are, build the single website using Responsive Web Design (RWD) approach and no need worry about the different browsers and platforms. RWD frameworks will help us to render the same contents based on different screen resolutions and also it reduces the development and maintenance efforts.

SharePoint 2013 has support HTML5 and you can find lot of RWD master pages in the codeplex for SharePoint 2010 or 2013. In addition to the Master Pages, we need a  some other utility functionalities like Notification/Status message, Responsive Data Grid, Responsive Charts, etc.

Prerequisites

1. Create the ShareProject 2013 Project

2. Download and use the Toastr library and you can find the download link here.

Code

1. Open a SharePoint 2013 Empty project with farm deployment option and then specify the URL.

2. Add the visual webpart “TestStatusMessage” for testing.

3. Refer the downloaded jQuery, Toastr JavaScript and CSS files as specified below.

 

message1

4. Add the “StatusMessage.js” file the _layout folder and add the following code.

JavaScript
//Toaster Message
function ShowMessage(title, message, msgType, timeOut) {
    toastr.options.timeOut = timeOut;

    switch (msgType) {
        case 'error':
            toastr.error(message, title);
            break;

        case 'warning':
            toastr.warning(message, title);
            break;

        case 'info':
            toastr.info(message, title);
            break;

        case 'success':
            toastr.success(message, title);
            break;
    }
}

 

5. Open the “TestStatusMessage.aspx” file and add the following code

ASPX
<SharePoint:ScriptLink ID="Scriptlink2" runat="server" Name="~Site/_layouts/15/js/jquery-1.9.1.min.js"></SharePoint:ScriptLink>
<SharePoint:ScriptLink ID="slink1" runat="server" Name="~Site/_layouts/15/js/toastr.js"></SharePoint:ScriptLink>
<SharePoint:ScriptLink ID="Scriptlink1" runat="server" Name="~Site/_layouts/15/js/StatusMessage.js"></SharePoint:ScriptLink>
<SharePoint:CssRegistration ID="sc1" runat="server" Name="~Site/_layouts/15/css/toastr.css"></SharePoint:CssRegistration>
<SharePoint:CssRegistration ID="sc2" runat="server" Name="~Site/_layouts/15/css/toastr-responsive.css"></SharePoint:CssRegistration>
<br />

<table>
    <tr>
        <td>Title</td>
        <td><asp:TextBox ID="txtTitle" runat="server" Text="Message Title"></asp:TextBox></td>
    </tr>
    <tr>
        <td>Message</td>
        <td><asp:TextBox ID="txtMessage" runat="server" Text="Sample Message Content"></asp:TextBox></td>
    </tr>
    <tr>
        <td>Time Out</td>
        <td><asp:TextBox ID="txtTimeOut" runat="server" Text="1000"> </asp:TextBox></td>
    </tr>
    <tr>
        <td>Message Type</td>
        <td><asp:DropDownList ID="ddlMessageType" runat="server">
                <asp:ListItem Value="success"></asp:ListItem>
                <asp:ListItem Value="warning"></asp:ListItem>
                <asp:ListItem Value="info"></asp:ListItem>
                <asp:ListItem Value="error"></asp:ListItem>
            </asp:DropDownList>
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <asp:Button ID="btnShowMessage" Text="Show Toastr Server Message" runat="server" OnClick="btnShowMessage_Click" />
            <input type="button" value="Show Toastr Client Message" onclick="ShowMessage('Error Message', 'Error Details', 'error', 10000);">
            <asp:Button ID="btnShowSPMessage" Text="Show SP.Status Server Message" runat="server" OnClick="btnShowSPMessage_Click" />
        </td>
    </tr>
</table>

<style type="text/css">
    #contentBox {
        min-width: 0px;
    }
</style>

 

6. Open the “TestStatusMessage.aspx.cs” file and add the following code

C#
#region Toastr message

        protected void btnShowMessage_Click(object sender, EventArgs e)
        {
            ShowToastrMessage(txtTitle.Text, txtMessage.Text, ddlMessageType.SelectedValue, Convert.ToInt32(txtTimeOut.Text));
        }
        
        public void ShowToastrMessage(string title,string message,string messageType,int timeOut)
        {
            LiteralControl control = new LiteralControl();
            control.Text = "<script type='text/javascript' language='javascript'>ShowMessage("
                + string.Format("'{0}','{1}','{2}',{3}", title, message, messageType, timeOut) + ")</script>";


            this.Page.Controls.Add(control);        
        }
        #endregion

7. Compile and deploy the solution..

8. You can see the screen output like below.

message2

 

9. Now resize the screen and assume as mobile view.

message3

Note : Toastr has developed using Media queries. it will help to render the same content with different css class based on screen resolutions.  You can find below the sample Media Queries below.

 

toastr-responsive.css
@media all and (max-width: 240px) {
    #toast-container > div {
        padding: 8px 8px 8px 50px;
        width: 108px;
    }
}
@media all and (min-width: 241px) and (max-width: 320px) {
    #toast-container > div {
        padding: 8px 8px 8px 50px;
        width: 128px;
    }
}
@media all and (min-width: 321px) and (max-width: 480px) {
    #toast-container > div {
        padding: 8px 8px 8px 50px;
        width: 192px;
    }
}
@media all and (min-width: 481px) and (max-width: 768px) {
    #toast-container > div {
        padding: 15px 15px 15px 50px;
        width: 300px;
    }
}
@media all and (min-width: 769px) {
    #toast-container > div {
        padding: 15px 15px 15px 50px;
        width: 300px;
    }
}

10. Based on your requirements, you can use the default sharepoint SP.UI.status.AddStatus or Toastr framework. For comparison purpose, I have included the default SP.UI.status message implementation also in the attached sample code.

Summary

Toastr has lot of features Fade  In, Fade Out, Positions and custom events. I hope that this walk-though will help us to implement Toastr framework with SharePoint and also you can find the sample code here.

Comments (2) -

  • RA Molla

    6/25/2013 3:08:37 AM | Reply

    The topic is pretty complicated for a beginner!…

  • Joao Ferreira

    9/22/2013 12:20:09 PM | Reply

    Very nice article to start making SharePoint responsive.
    I'm also working with responsive branding for SharePoint, let me introduce our work, take a look at http://bindtuning.com/
    We have a tunning tool where you can fully customize a theme for SharePoint and besides being responsive the theme include a lot of features.  

Add comment

Loading