Email: info@zenconix.com

Show Model Dialog in SharePoint 2013



Visit Site:

Overview

SP.UI.ModelDialog Class

This Represents a modal dialog.

SP.UI.ModalDialog

SP.UI.ModelDialog.showWaitScreenSize(title, message, callbackFunc, height, width) Method

This displays a wait screen dialog that has a Cancel button using the specified parameters.

var value = SP.UI.ModalDialog.showWaitScreenSize(title, message, callbackFunc, height, width);

Parameters

title: The title of the wait screen dialog.

message: The message that is shown in the wait screen dialog.

callbackFunc: The callback function that runs when the wait screen dialog is closed.

height:  The height of the wait screen dialog.

width: The width of the wait screen dialog.

Returns

A modal dialog with the specified parameters.

Remark

This method displays a wait screen dialog that can be closed manually. The callback function specified by the callbackFuncparameter will run when the modal dialog closes.

Function can be written as

     function waitWithClose(){            
                    SP.UI.ModalDialog.showWaitScreenSize("Title" ," Message");  
             }

waitWIthClose

SP.UI.ModelDialog.showWaitScreenWithNoClose(title, message, height, width) Method

This displays a wait screen dialog that does not have a Cancel button using the specified parameters.

 

var value = SP.UI.ModalDialog.showWaitScreenWithNoClose(title, message, height, width);

Parameters

title: The title of the wait screen dialog.

message: The message that is shown in the wait screen dialog.

height: The height of the wait screen dialog.

width: The width of the wait screen dialog.

Returns 

A modal dialog with the specified parameters.

Remark

This method opens a wait screen dialog that cannot be closed manually.

Function can be written as

  function showWaitWithNoClose()        {
          SP.UI.ModalDialog.showWaitScreenWithNoClose("Title" ,"Please wait this is body");        
}
waitWithNoClose

Features

Specifications

Preview

Show notifications in SharePoint 2013



Visit Site:

Overview

SP.UI.Notify Class

This provides methods for managing notification alerts.

SP.UI.Notify

SP.UI.Notify.addNotification(strHtml, bSticky) Method

This method adds a notification to the page. By default, notifications appear for five seconds.

var value = SP.UI.Notify.addNotification(strHtml, bSticky);

Parameters

strHtml: The message inside the notification.

bSticky: Specifies whether the notification stays on the page until removed.

Returns:

String : Id of the notification was added on the page

 

Following function will add notification on the page

var notifyId= '' ;
function AddNotification() {
    notifyId = SP.UI.Notify.addNotification("Hello World!", true);
}
showNotification

SP.UI.Notify.removeNotification(nId) Method

This method will removes the specified notification from the page.

SP.UI.Notify.removeNotification(nid);

Parameters

nId: The notification to remove from the page.

For remove the notification

function RemoveNotification() {
    SP.UI.Notify.removeNotification(notifyId);
    notifyId  = '';
}

Features

Specifications

Preview

Show status messages in SharePoint



Visit Site:

Overview

SP.UI Namespace

For showing Notifications and Status messages we are going to use SP.UI Namespace. Namespace provides types and members for working with the user interface in Microsoft SharePoint Foundation. This namespace includes members to work with status messages, notifications, and dialogs.

SP.UI.Status Class

This class provides methods for managing status messages.

SP.UI.Status

This provides some methods as

SP.UI.Status.addStatus(strTitle, strHTML, atBegining) Method

This method adds status message on the page

var value = SP.UI.Status.addStatus(strTitle, strHtml, atBegining);

Parameters

strTitle: The title of the status message.

strHtml: The contents of the status message.

atBegining: Specifies whether the status message will appear at the beginning of the list.

* where strHtml and atBegining are optional

Returns

string : The ID of the status message.

Function can be written as

function addStatus() {
    statusId = SP.UI.Status.addStatus("Hello World!");       
    }
SP.UI.Status.appendStatus(sid, strTitle, strHTML) Method

This method appends text on an existing status message.

var value = SP.UI.Status.appendStatus(sid, strTitle, strHtml);

Parameters

sid: The ID of the status message.

strTitle: The title of the status message.

strHtml: The contents of the status message

Returns

String : The ID of the status message.

SP.UI.Status.removeAllStatus(hide) Method

This method removes all status messages from the page.

SP.UI.Status.removeAllStatus(hide);

Parameters

hide: Specifies that the status messages should be hidden.

* where parameter hide is optional

Function can be written as

 function RemoveAllStatus() {
        SP.UI.Status.removeAllStatus(true);
}
SP.UI.Status.removeStatus(sid) Method

This method removes the specified status message.

 

SP.UI.Status.removeStatus(sid);

Parameter

sid: The ID of the status message to remove.

Function can be written as

 function RemoveLastStatus() {
    SP.UI.Status.removeStatus(statusId);
    statusId = ' ';
}
SP.UI.Status.setStatusPriColor(sid, strColor) Method

This method Sets the priority color of the specified status message.

 

SP.UI.Status.setStatusPriColor(sid, strColor);

Parameters

sid: The ID of the status message.

strColor: The color to set for the status message. The following table lists the values and their priority.

Value Priority
Red Very Important
Yellow Important
Green Success
Blue Information

 

Function can be written as 

  • For success status
  1.   function successStatus() {
     statusId = SP.UI.Status.addStatus("Data Save successfully!");
     SP.UI.Status.setStatusPriColor(statusId, 'green');
 }

    successStatus

    • For error/ very important status
      function errorStatus() {  
      statusId = SP.UI.Status.addStatus("Something goes wrong!");    
     SP.UI.Status.setStatusPriColor(statusId, 'red'); 
 }

    errorStatus

    • For important status
      function importantStatus() {
              statusId = SP.UI.Status.addStatus("this is very much important!");
              SP.UI.Status.setStatusPriColor(statusId, 'yellow'); 
    }

    importantStatus

  4. For information status
     function informationStatus() {
             statusId = SP.UI.Status.addStatus("this is information!");
              SP.UI.Status.setStatusPriColor(statusId, 'blue');
   }
importantStatus
SP.UI.Status.updateStatus(sid, strHtml) Method

This method updates the specified status message.

SP.UI.Status.updateStatus(sid, strHtml);

Parameters

sid: The ID of the status to update.

strHtml: The new status message.

 

Features

Specifications

Preview