Modern Web Development in SP 2010

Denny Headrick
Aug 23, 2017 · 5 min read

Antiquated! Subobtimal! Unaesthetic!

These, and other awful words, can be used to summarize the thoughts that arise when developing on SharePoint 2010 in 2017. (Probably in 2010 too, for that matter). Slaving away in front of those hot computer monitors fries our brains after a while. So, how do we go about making front-end SharePoint development fun? More importantly, how do we make our users say, “Wow! I didn’t know you could do that in SharePoint!” Of course, we need to keep in mind that the same users might have sounded just as impressed by a workflow email.


AJAX && REST

Even in SharePoint 2010, we are provided options for getting list data via REST. Some things, like item history, can only get done with SOAP, but I have a strong preference for REST. If you are entirely unfamiliar with AJAX and RESTful APIs, I would suggest reading up on the topic at https://developer.mozilla.org/en-US/docs/AJAX. Similarly, we use fetch and will be using it in the examples. You can find out more about fetch at https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API. Fetch requires a polyfill in IE which is heavily used in environments that use SharePoint.

listdata.svc — https://msdn.microsoft.com/en-us/library/ff798339.aspx

Within SharePoint 2010, the most common API that we use is listdata.svc. Microsoft revamped their APIs in SharePoint 2013, and you may want to consider going with one of those, as they are substantially more powerful.

How do we go about getting data from a list then? It can be as simple as the following example. We’ll be using ES5 for these examples, but if you have a toolchain available, I suggest you use ES6.

var baseUrl = 'https://mycompany/sp/',
listDataSvc = baseUrl + '_vti_bin/listdata.svc/';
function fetchListData(listName){
var headers = new Headers({Accept:'application/json'}),
options = {headers:headers, credentials:'same-origin'});
return fetch(listDataSvc + listName, options)
.then(function(response){ return response.json();})
.then(function(json){ return json.d.results;});
}

When explaining this code in a non-technical way to a coworker, I used the following dialog:

MyCode: Yo, server, can I get some data? 
Server: Sure, no problem!
MyCode: By the way, I really want it in JSON format.
Browser: Do you know this server, do you know where it's from?
MyCode: Oh, I'm from the same place. Don't worry.
Server: Here's your data, as I promised.
MyCode: Oh thanks! Oh, let me just get the JSON from there. Ooh, I see that the data that I really want belongs to the d.results object. Thanks!

So, how would we use the fetchListData function? Let’s say we have a list of people. This list contains columns named, Last Name, First Name, and Favorite Color. (We are very concerned about color preferences in corporate environments, after all).

var people;fetchListData('People')
.then(function(results){
people = results; //This is an array of people
people.forEach(function(person){
console.log(person.FirstName,
person.LastName,
person.FavoriteColor);
});
}
);

In this example, we log every person’s first and last name in addition to the favorite color. Notice that the property name is FirstName and not an encoded version of it. If you’ve worked in the SharePoint environment for a while, you are probably aware that the underlying markup frequently contains the encoded version. With the list data service, we simply get a response with the spaces trimmed. The drawback is that this property name will change if the column is renamed.

How would you actually go about making this appear on the document? I highly recommend learning one of the templating libraries out there, if not a front-end framework. (Template literals are also handy if your organization does not rely on IE.) However, sometimes you may need to do something simple that really doesn’t warrant the use of an extra reference. In the example above, let’s replace the console logging:

var table = document.createElement('table'),
thead = "<thead><tr><td>First</td><td>Last</td><td>Color</td>",
rows = "";
people.forEach(function(person){
rows += "<tr><td>" + person.FirstName + "</td>";
rows += "<td>" + person.LastName + "</td>";
rows += "<td>" + person.FavoriteColor + "</td></tr>";
});
table.innerHTML = thead + "<tbody>" + rows + "</tbody>";
document.body.appendChild(table);

With this example, we’ve appended the table directly to the body, but it’s likely you’ll want to be a little more specific as to where you want to place it.


Improve the Internet Explorer Experience

In order to leverage all that Internet Explorer has under the hood, you’re going to want to adjust the master page. Don’t be afraid of the master page. If you take a look at the master page that is set as the default, you might notice the following line in the head:

<meta http-equiv="X-UA-Compatible" content="IE=8" />

This tag shouts, “Yo, IE! Remember the good ol’ days before EcmaScript 5. Really wish we could go back to those days.” IE says, “You got it. I was tired of supporting some of these functions anyways.”

Go ahead and adjust the line to the following:

<meta http-equiv="X-UA-Compatible" content="IE=EDGE" />

This line equates to “Yo, IE! Give me all you got!”

A couple of caveats:
1. It’s wise to back up the master page prior to modifying it
2. SharePoint Designer loves the good ol’ days and may drop the preview

Additionally, this update causes an error that can be tricky to diagnose with the people picker. Add the script located here to resolve this issue.


Introducing a Modern Framework

Pushing Internet Explorer past version 8 really opens the door to utilize some of the other frameworks/libraries out there. There are plenty of fine options out there: React, Angular, Ember, VueJS, RiotJS, and much much more. The people that have worked on these have developed fine functionality and cultivated awesome communities. For this example, we will be working with VueJS. It’s been good to me and my team and we’ve had a blast using it in SharePoint.

Remember earlier when we awkwardly pieced together HTML for a table by concatenating strings? Well, our library is going to help us with that. Writing HTML into your site page or web part like this:

<div id="app">
<table>
<thead>
<tr>
<th>First</th><th>Last</th><th>Color</th>
</tr>
</thead>
<tbody>
<tr v-for="person in people">
<td>{{person.FirstName}}</td>
<td>{{person.LastName}}</td>
<td>{{person.FavoriteColor}}</td>
</tr>
</tbody>
</table>
</div>

From JavaScript, borrowing the function we made earlier:

new Vue({
el:'#app',
data:{
persons:[]
},
mounted:function(){
var vm =this;
fetchListData('People')
.then(function(results){
var people = results; //This is an array of people
people.forEach(function(person){
vm.persons.push(person);
});
});
}
});

Wait! That looks much more complicated!

There is a lot more code for this trivial example, but you get the ability to update the table dynamically. Changes that are made to those items will dynamically update.


Wrapping Up

SharePoint 2010 is totally compatible with modern front-end technologies. Some workarounds are needed to compensate for Internet Explorer, but they are worth exploring, especially if you want to improve the UI.

Make sure you take the opportunity to spicen up things up with CSS. The standard style sheets grow old. If you are doing a lot of array manipulation and you notice performance issues in IE, you might also be able to benefit from using Lodash.

Thanks for reading. If you noticed any mistakes, let me know! If you enjoyed the post, let me know.

)
Denny Headrick

Written by

https://dennyheadrick.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade