SharePoint 2010 Modal Dialogs and JavaScript

SharePoint 2010 came with a whole lot of new features.  One of them is to dispaly list pages through a Modal Dialog.  These modal dialogs can be enabled or disabled in the list settings.

In this blog I show the use of SP.UI.ModalDialog and related objects to create a feedback form.  The code consists of a single HTML link element and some JavaScript to display the modal dialog, and the confirmation dialog. 
SharePoint 2010 also came with a new item on the master page called status bar.  The status bar is somewhat similar to a status bar on any browser window.  In the OOTB (Out Of The Box or unmodified) master page this status bar appears right under the navigation bar.  Though it is not visible all the time, it is used to update the user with the status of the activity he is undertaking.  I also show the use of status bar in this code.
This whole code I am about to show can be put in a text file, uploaded to the site (Style Library or any other document library) and used as the source for a Content Editor Web Part.

Here we go, first I put down the HTML for the link with an onclick event:
<a onclick="javascript:portal_ShowFeedbackDialog();" href="#">I want to give feedback</a>

The following function is called for the onclick event.  The code is straight forward.  The variable L_Menu_BaseUrl is created by SharePoint code.  You can view the source of a SharePoint page to see this variable.  Don't forget to wrap your JavaScript in the <script type="text/javascript"></script> tags.

function portal_ShowFeedbackDialog() {
    var options = SP.UI.$create_DialogOptions();
    options.width = 600;
    options.height = 400; 
    options.url = L_Menu_BaseUrl + "/Lists/Feedback/NewForm.aspx";
    options.dialogReturnValueCallback = Function.createDelegate(
                        null, portal_modalDialogClosedCallback);
    SP.UI.ModalDialog.showModalDialog(options);
}

This code shows the modal dialog box as shown in the following picture

When the user saves the item after providing the feedback and title fields, the portal_modalDialogClosedCallback code is triggered.

function portal_modalDialogClosedCallback(result, value) {

    if (result == '1') {

  showNotificationDialog("<div><h1>Feedback Submitted</h1></div><div>Thank You!  Your feedback has been submitted to the site owner.</div>");

        this.statusId = SP.UI.Status.addStatus("Feedback Submitted", "Thank You!  Your feedback has been submitted to the site owner.", true);

        SP.UI.Status.setStatusPriColor(this.statusId, "Green");

    }

    else if (result == '0') {

  showNotificationDialog("<div><h1>Feedback Submission Failed</h1></div><div>Your feedback could <b>not</b> be submitted. Please try again.</div>");  

        this.statusId = SP.UI.Status.addStatus("Feedback Submission Failed", "Your feedback could <b>not</b> be submitted. Please try again.", true);

        SP.UI.Status.setStatusPriColor(this.statusId, "Green");

    }

 else{this.statusId = SP.UI.Status.addStatus("Feedback Unknown", "The status of your feedback is unknown", true);}

    setTimeout(RemoveStatus, 6000);

}

  This code does two things.  First it shows another dialog box listing the status of submitted item as shown in the following picture.

 
Second it adds a status in the status bar in the main page where the action was triggered from.  Again the adding of the status relies upon the addStatus method of SP.UI.Status object provided by SharePoint.  Once the status is added, it must be removed after sufficient time has been provided to the user to view it.  This is done via the following line of code which uses JavaScript setTimeout() method to invoke the removeStatus metod of the Status object via a helper function.

setTimeout(RemoveStatus, 6000); 

 Based on your requirements, you may or may not need to implement both methods to communicate the status of the feedback. 

The rest of the code contains the creation of confirmation dialog box.  The html to show on the dialog box is created via the JavaScript and passed to the dialog box using the options object.

function RemoveStatus() {

    SP.UI.Status.removeStatus(this.statusId);

}

 function showNotificationDialog(messageToShow) {

    var options = SP.UI.$create_DialogOptions();

    options.title = "Feedback Confirmation";

    options.allowMaximize = false;

    options.width = 300;

    options.height = 150;   

    options.showClose = true;

    var _html = document.createElement('div');

    var btnClose = '<div align="center" style="margin-top:15px;"><input type="button" value="OK" name"OK" onclick="javascript:SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.cancel);" /></div>';

 _html.innerHTML = messageToShow + btnClose;

 options.html = _html;

 SP.UI.ModalDialog.showModalDialog(options);

}

This is just a very simple example of how SharePoint's dialog JavaScript API can be used to create custom dialog boxes.