As I mentioned in my last post, I had to come up with a simple way of fetching an employee’s phone number and allowing them to update it through SharePoint. I contemplated developing a web part that would interact with the HR system but with the length of time a deployment can take I thought that it might be simpler to use jQuery. This way I don’t have to develop and deploy any custom .Net code. I simply have to write some HTML and jQuery and embed that into the page.
A few caveats. Security is not really an issue here. There is no requirement to ensure that people can only update their own phone number. Although since there is a mapping between a user’s AD account and their HR Employee ID that logic could easily be handled in the web services if required. The other is the fact that cross-domain scripting is not supported so your HTML page will need to be on the same server as the web services.
The last caveat is that the page is hideous and logic is sketchy – this was only a POC to demonstrate a different approach to tackling these types of problems.
How the page works is that a user loads the page and is presente d with a textbox and a button. They enter their Employee ID into the text box and click the button. This uses ajax to call a .Net ASMX web service called EmployeeInfo which accepts the Employee ID in the form an integer and returns an Employee object. We then simply render that on the screen, hide that button and show another one. The user can then enter a new phone number in the textbox, click the button which calls the UpdatedEmployee Web Service. This web service accepts the Employee ID and Phone Number and returns a Response object that has a property called ResponseStatus which we can check in our client code.
This first thing if of course to add a reference to our jQuery library which is stored in a SharePoint library.
<script type=”text/javascript” src=”<url>/jquery-1.3.2.min.js”></script>
What follows is the HTML code which is simple – and hideous.
<div id="instructions">Enter Employee ID</div>
<div id="controls">
<input id="txtEmployeeID" type="text" />
<input type="button" value="Search" id="Button1" onclick="CallWebService('http://<url>/Service.asmx/EmployeeInfo', document.getElementById('txtEmployeeID').value, '')" />
<input type="button" value="Update Phone Number" id="btnUpdate" onclick="CallWebService('http://<url>/Service.asmx/UpdateEmployee', _employeeid, document.getElementById('txtEmployeeID').value, '')"
style="display:none;" />
</div>
<div id="loadingDiv" style="display:none"><img src="http://jaymoss/PublishingImages/ajax-loader.gif" /></div>
<div id="ResultSet"></div>
It’s very straightforward. A textbox to enter the Employee ID and a button to request the employee information. Another button to submit the phone number back for updating and a few DIV tags to control formatting. You can see in the onclick events of the buttons that we are calling the same Javascript function and passing in different parameters. Below is the code that int.eracts with the .Net web services.
I don’t want to spend too much time on the simple logic so I’ll focus on the Ajax piece. All you need to do is call the AJAX function and pass in the correct parameters. The url parameter is the actual url of your web service. The data is returned in JSON. More information on decorating your web services to be compatible with this format is located here: http://stackoverflow.com/questions/211348/how-to-let-an-asmx-file-output-json.
var data;
if (phonenumber.length == 0)
{
data = “{‘employeeid’:'” + employeeid +”‘}”;
_employeeid = employeeid;
}
else
{
data = “{‘employeeid’:'” + employeeid + “‘, ‘phonenumber’: ‘”+ phonenumber +”‘}”;
$(‘#ResultSet’).attr(‘style’, ‘display:none’);
$(‘#loadingDiv’).attr(‘style’, ‘display:block’);
$(‘#controls’).attr(‘style’, ‘display:none’);
}
$.ajax({
type: “POST”,
url: url,
contentType: “application/json; charset=utf-8″,
data: data,
dataType: “json”,
success: success,
error: ajaxFailed
});
}
Since our web services accept parameters we pass them in the data parameter. All you really need to know is that the format is {‘parameter’:'value’}. Multiple parameters are separated by commas. You can pass arrays as well which is well documented online.
The last two parameters are the function to be called if the call is successful and if it fails. In our case the success function is creatively named “success” and the error function is called “ajaxFailed” below are the functions themselves.
Side note: I’m having a hard time concentrating on this post because I’m watching all the pre-fight hype of the GSP vs Dan Hardy fight. This is going to be ugly. Dan Hardy doesn’t have a prayer but I digress. Update: I can’t believe it went the distance.
function success(data, status)
{
hideLoader();
if (data.d['ResponseStatus'] == “Success!”)
{
alert(‘Employee Phone Number Successfully Updated’);
$(‘#controls’).attr(‘style’, ‘display:none’);
}
else
{
$(‘#ResultSet’).html(data.d['EmployeeName'] + ‘ <br> ‘ + data.d['PhoneNumber']);
$(‘#txtEmployeeID’).attr(‘value’, ”);
$(‘#Button1′).attr(‘style’, ‘display:none’);
$(‘#btnUpdate’).attr(‘style’, ‘display:block’);
}
}
function ajaxFailed(xmlRequest)
{
hideLoader();
alert(xmlRequest.status);
}
Data is the JSON object is returned where you can check the properties of the object returned by your web services. Easy as pie!
Upload the HTML to the web server the web services reside on and you’re golden. You can then use a simple Page Viewer Web Part to display your masterpiece inside SharePoint and your users will never be the wiser.
Obviously, there are many situations when a custom developed web part is required but my intention has been to demonstrate an alternative approach to accomplish a specific problem without writing custom .Net code.
Enjoy and all comments are always welcome!