Sharepoint Driven Interactive Tools Applying The Mvvm Pattern

By Author: Dylan Rodriguez
Total Articles: 131
Comment this article

For SharePoint developers MVC, MVP and MVVM are the most common acronyms they would have at least a vague for their entailing and what they are meant for. You can find information from net but its pretty comprehensive which cannot describe the difference between different view model patterns. Thus this article gives you an idea of using tools with this method which are part of suite of tools existing on the Career Centre Portal. While offering SharePoint solutions developers play majority part in creating tools and forms. Out of them some are SharePoint list driven and rest are CRM driven so in this article the focus is on Career Possibility Generator.
We will see how this Knockout works. So first the suggestion for those working with SharePoint 2010 development or SharePoint consulting or SharePoint solutions would be to read the documentation for it has a full explanation of its working and capabilities. For simple solution you can use data-binds to map UI elements to values stored in data model. While defining the value as “observable” its ensured that updates to UI would be reflected in the model and vice-versa. ...
... It also harnesses the jQuerytmpl template engine for rendering repeatable blocks of code.
While working with SharePoint workflow you can drive it really well using a JSON object. This is the reason of its tying nicely with SharePoint 2010 development services. Its quite easy to pull back a JSON object via those services and use it in the framework of Knockout. An ASHX handler was created for justifying this missing functionality in SharePoint 2010 development for returning the JSON object. For doing so easily, the generic shell of the handler would look like:
Moreover the above code results into unordered list of Occupation profile links that has applied distinct class. There can be some problems while using JSON and can display a message in the browser like:
Now we are left in learning only a thing and that is “observable functionality working. There are number of checkboxes included in the tool itself that the user can select driving how the cloud looks on the screen in return. These checkboxes are mapped in SharePoint lists to various occupations and thus when you select the checkbox the maps for a given occupation; the class applies to the relevant list item and is modified to reflect that link. “count” is the only observable property in the object and can be used in the list item class=”cloud${Count}”. By incrementing the Count value in the model, the UI is updated to reflect the new value and hence changes the class of the list item, changing the way it displays on the screen.
function AdjustCloud(checkbox) {
varaddValue = -1;
if (checkbox.checked) addValue = 1;

$.getJSON('/_controltemplates/ccosdportal/handlers
/ListToJsonHandler.ashx?ListName=OccupationKSA
&Web=occupations&KSAID=' + checkbox.value, function(data){
if (data.length> 0)
{
$.each(data, function(ind, dtwd) {
vardtwdVal = dtwd.DTWDANZSCO;
$.each(viewModel.Cloud, function(index, value) {
varclouddtwdVal = value.DTWDANZSCO;
if (clouddtwdVal == dtwdVal)
if (((viewModel.Cloud[index].Count() + addValue) >= 0) &&
((viewModel.Cloud[index].Count() + addValue)