Customized Awareness/Notification dialog in SharePoint

• Download Notifcations.zip - 128.4 KB

Introduction

  Show the following beautiful modal pop up based on a cookie and a notification list with a single java script file.

           

· By using the source code. You don't need to use the Application Page for modal dialogs.

· This uses responsive web design so the pop up will render based on the device.

· Turning the Notification based on a flag .

· History of Notification Items are maintained in the list so can can pick the latest updated item.

Background

Some times, You need to show a modal dialog based on the cookie also, The content should be editable by the admin as it may change.

You just need to reference the js file attached in zip into your master page with the following steps.

Using the code

Pre- Requisites

• Create a sharepoint  list called Notifications with the following columns

a) PublishingPageContent - Publishing HTML . b) Turn Notification - Boolean (Yes/No)

• For additional details , You can refer to the screen shot from the zip.
• A reference to SPServices ( Reference to the file from your project )
• A reference to css file ( Reference to the file from your solution )
• In this article you find the term ProjectFolder oftenly used . This is nothing but your solution Name

JavaScript

_spBodyOnLoadFunctionNames.push("checkCookie");
//ExecuteOrDelayUntilScriptLoaded(checkCookie, "sp.js");

var UserCookie = "";
//Check the Cookie
function checkCookie() {
   
    var d = readCookie("UserCookie");
    if (d == null || d == '' || d == 'undefined') {
        createCookie("UserCookie", "UserCookie");
        GetNotificationMessage();
    }
  
}

//Get Notifcation Message from the List by making ajax request   SPServices 
function GetNotificationMessage() {

    var query = "<Query>"

         + "<OrderBy>"
         + "<FieldRef Name='Modified' Ascending='FALSE' />"
         + "</OrderBy>"
         + "<Where>"
         + "<Eq>"
         + "<FieldRef Name='TurnNotifcation' />"
         + "<Value Type='Boolean'>1</Value>"
         + "</Eq>"
         + "</Where>"
         + "</Query>";

    $().SPServices({
        operation: "GetListItems",
        webURL: window.location.protocol + "//" + window.location.host,
        async: true,
        listName: "Crisis Notifications",
        CAMLViewFields: " <ViewFields><FieldRef Name='PublishingPageContent' /><FieldRef Name='TurnNotifcation' /> </ViewFields>",
        CAMLQuery: query,
        CAMLRowLimit: 1,
        completefunc: GetHtml
    });
}
function GetHtml(xData) {
    //Get the data 
    var domElementArray = $(xData.responseXML).SPFilterNode("z:row").each(function () { });
    var dataMap = domElementArray.map(function () {
        return {
            id: $(this).attr('ows_ID'),
            content: $(this).attr('ows_PublishingPageContent')

        };
    });

    var data = dataMap.get();
    if (data.length > 0) {
        OpenPopUp(data[0].content);
    }
}
//Form the Html from the Data and add it to the content
function OpenPopUp($gHtml) {  

    var $gElem = '<div class="PopUpContainer">' +
                         '<div class="PopUpTopBG">' +
                         '</div>' +
                         '<div class="PopUpClose">' +
                         '</div>' +
                         '<div class="PopUpContent">' + $gHtml
    '</div>' +
    '<div class="PopUpBottomBG">' +
    '</div>' +
'</div>';

    var htmlToLoad = $($gElem).append('<div class="PopUpBottomBG">');
    var cloneModalContent = document.createElement('div');

    cloneModalContent.innerHTML = htmlToLoad.html();
    var options = {
        html: cloneModalContent,
        autoSize: true,
        allowMaximize: false,
        showClose: false,
        dialogReturnValueCallback:
        function () {
            //You can perform some action if required after closing.
        }
    };
    
    $(window).scrollTop(0);
    SP.UI.ModalDialog.showModalDialog(options);

    var styles = { border: "none", height: "auto" };
    $('.ms-dlgTitle').css('display', 'none');

    $(".ms-dlgContent").css(styles);
    $(".ms-dlgBorder").css(styles);
    $(".ms-dlgFrameContainer").css(styles);
    $(".ms-dlgFrameContainer").css("width", "+=2")

    linkCSSFile();

}
//Close function.
$(".PopUpClose").live("click", function () {

    SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.cancel, "Closed");

});
function linkCSSFile() {
    var href = "/_Layouts/ProjectFolder/css/Notify.css";
    $('<link rel="stylesheet" type="text/css" href="' + href + '" />').appendTo("head");
}

var createCookie = function (name, value) {

    var date = new Date();
    //By default Im setting it to 20 minuts. You can keep as much you need based on the requirement
    date.setMinutes(date.getMinutes() + 20)
    var expires = '; expires=' + date.toGMTString();

    document.cookie = name + '=' + value + expires + '; path=/';
};
var readCookie = function (name) {
    var nameEQ = name + '=';
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
};
var eraseCookie = function (name) {
    createCookie(name, '', -1);
};