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.
- Get Parameter value from Query String.
- Get List Item from SharePoint List.
- Get Content Type of the List Item.
- 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 JavaScriptThe
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.
My Thoughts/Approaches
- Defining a separate module for all reusable functions.
- Naming labels the same as column names would help to bind data easily. (** Please comment if this is a bad practice).