SharePoint 2013 Step by Step Implement ModalDialog With Promise Pattern

Overview

While binding data to the page there are sometimes certain logic or an operations that need to be done to fetch/update/delete records. Until then end user must wait (ideal scenario 2-3 sec, this may vary based on other parameters) . During this delay in binding the content, it would be a good user experience to show an "Appropriate Message". This can be implemented in SharePoint 2010/2013 with ShowDialog with a promise pattern deferred object.

Scenario

I am showing a modal dialog while the following operations are taking place.

1. Get Parameter value from Query String.
2. Get List Item from SharePoint List.
3. Get Content Type of the List Item.
4. Bind List Item data to label controls.

Here is the HTML source:

<div id="divemployeeData">
    <table class="table">
        <tbody>
            <tr>
                <td>
                    <b>Employee Name</b>
                </td>
                <td>
                    <label id="employeeName"></label>
                </td>
            </tr>
            <tr>
                <td>
                    <b>DOJ</b>
                </td>
                <td>
                    <label id="employeeDOJ"></label>
                </td>
            </tr>
            <tr>
                <td>
                    <b>Location</b>
                </td>
                <td>
                    <label id="employeeLocation"></label>
                </td>
            </tr>
        </tbody>
    </table>
</div>

The following JavaScript has two modules. One of the modules is of utilities (App_Core) and another one is for employee data services (employeeData).

How to call this JavaScript

The BindData method is a public method that will be called internally defined the loadItemDetails method. Call this method in a button click or page onload as "employee.Services.BindData();".

How the following logic works (Step-by-Step):

Initially the BindData method is called, it internally triggers loadItemDetails.
In the next line, the getEmployeeData method is used a parameter for the when method that would wait until it hears back either from resolve or reject method.
When the getEmployeeData method is called, the variable deferred is defined & declared with a deferred object. (Note: the getEmployeeData method will fetch employee details based on employeeId. This employeeId is queried from URL string.)
A dialog box is popped up with a custom message.
Next, standard code to get SharePoint ListItem code is defined.
When the executeQueryAsync is executed, a success instance will call deferred.resolve() and a failed instance will call deferred.reject().If it is success, deferred.resolve() is called defined at a success parameter and goes to the done() method defined at the loadItemDetails method.If it fails, deferred.reject() is called defined at the failed parameter and goes to the fail() method defined at the loadItemDetails method.
When it reaches the done() method, It would loop through all the labels available in the div and bind the values of the respective labels. (Note: columnNames and labelNames are defined the same).
For either of the scenarios, the close method is called to close the dialog window at the end of done() and fail() methods.
var App_Core = App_Core || {};
//All reusable functions
App_Core.Utilities = function() {
    //Format Date field
    var getFormattedDateTime = function(d) {
        // padding function
        var s = function(p) {
            return ('' + p).length < 2 ? '0' + p : '' + p;
        };
        // default parameter
        if (typeof d === 'undefined')
        {
            var d = new Date();
        };
        var selDate = '';
        if (s(d.getHours()) > 0)
        {
            selDate = s(d.getDate()) + '/' + s(d.getMonth() + 1) + '/' + d.getFullYear() + ' ' + s(d.getHours()) + ':' + s(d.getMinutes()) + ':' + s(d.getSeconds());
        }
        else
        {
            selDate = s(d.getDate()) + '/' + s(d.getMonth() + 1) + '/' + d.getFullYear() + ' ';
        }
        // return datetime
        return selDate;
    };
    var removeSpaces = function(content) {
        if (content == null || content == '')
        {
            return '';
        }
        else
        {
            return content.replace(/\s/g, "");
        }
    }
    //function to get a parameter value by a specific key
    var getQueryStringParameter = function(param) {
        var url = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
        for (var i = 0; i < url.length; i++)
        {
            var urlparam = url[i].split('=');
            if (urlparam[0] == param)
            {
                return urlparam[1];
            }
        }
    }
    return
    {
        FormateDate: getFormattedDateTime,
        getQueryStringParameter: getQueryStringParameter,
        RemoveSpaces: removeSpaces
    };
}();
var employeeData = employeeData || {};
//Get employee details
employeeData.services = function() {
    //Global Variables
    var listName = 'employeeData';
    var employeeID = App_Core.Utilities.getQueryStringParameter('employeeID');
    var employeeListItem = null;
    var listContentTypes = null;
    var employeeColumns = null;
    var waitDialog = null;
    //employee required Columns
    var employeeListColumns = ['ID', 'employeeName', 'employeeDOJ', 'employeeLocation']
    //Get employee Item
        function getEmployeeData()
        {
            if (listName == null || listName == '')
            {
                return false;
            }
            else
            {
                if (waitDialog == null)
                {
                    waitDialog = SP.UI.ModalDialog.showWaitScreenWithNoClose('Please Wait', 'Catalogue details loading....');
                }
                var deferred = $.Deferred();
                //Load SP with Current Context
                var ctx = new SP.ClientContext.get_current();
                //Load List by Title
                var employeeList = ctx.get_web().get_lists().getByTitle(listName);
                //Load List Item by ID
                employeeListItem = employeeList.getItemById(employeeID);
                //Load the context with List Item of required columns
                ctx.load(employeeListItem, employeeListColumns);
                //get the content types and load the collection
                listContentTypes = employeeList.get_contentTypes();
                ctx.load(listContentTypes);
                ctx.executeQueryAsync(
                function()
                {deferred.resolve(employeeListItem);},
                function()
                {deferred.reject(); });
                return deferred.promise();
            }
        };
    //Binds the values to the label controls in details page.
    function loadItemDetails()
    {
        $.when(getEmployeeData()).done(function(employeeItem) {
            $('#divemployeeData label').each(function()
            {
                var $element = $(this);
                if ($element.val() == '')
                {
                    var $label = $("label[id='" + this.id + "']");
                    $label.text(employeeItem.get_item(this.id));
                }
            });
    waitDialog.close(); //Close Modal Dialog
            waitDialog = null;
        }) //End of deffered done method
        $.when(getEmployeeData()).fail(function() {
            alert('Failed to load Employee details');
            waitDialog.close(); //Close Modal Dialog
            waitDialog = null;
        }); //End of deffered fail method
    };
    return {
        BindData: loadItemDetails
    };
}();

My Thoughts/Approaches

1. Defining a separate module for all reusable functions.
2. Naming labels the same as column names would help to bind data easily. (** Please comment if this is a bad practice).