Customized Awareness/Notification dialog in SharePoint





0/5 (0 vote)
Show the Awareness/Notification Modal dialog based on the cookie and display the content from a list with a single java script file
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
a) PublishingPageContent - Publishing HTML . b) Turn Notification - Boolean (Yes/No)
- Create a sharepoint list called Notifications with the following columns
- 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
_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); };