SharepointPlus 5.2

Follow @sp_js Be notified on new release

Description

SharepointPlus ($SP) is a JavaScript API for Sharepoint. This library offers some extended features for SharePoint entirely on client side (requires no server install). $SP will simplify your interactions with the Sharepoint Web Services and will help you to deal with the List Forms.

Other JavaScript library like this one are often complex, with few or no example. With SharepointPlus it's easy (like the SQL syntax) and you'll find examples for each method.

I've developed this API for my needs during my job at Dell and we thought it could be useful for the community too, so here it is !

Sharepoint Support

Sharepoint 2007 : SharepointPlus v3.0.4 is the last release that I have tested with Sharepoint 2007 -- after this version I cannot assure the retro-compatibility
Sharepoint 2010 : Compatible since SharepointPlus v3.0.4
Sharepoint 2013 : Compatible since SharepointPlus v3.13
Sharepoint 2016/Online : Compatible since SharepointPlus v3.13 (not tested yet, but based on testimony)

Browser Support

IE11, and all modern browsers (Firefox, Chrome, Edge, ...) (support for older browsers stopped from v5.0).

Quick Start

Requirements

If you plan to use IE11, you need to add the Promise polyfill.

The basics

Just add one line to call SharepointPlus:

  <script type="text/javascript" src="sharepointplus-5.2.min.js"></script>

You may also want to use a CDN: SharepointPlus on JSDelivr or SharepointPlus on unpkg

Lists

SharepointPlus is mainly based on the different Web Services provided by Sharepoint.

Let's see some examples of what you can do with SharepointPlus regarding the Lists interaction:

// Update all items with an "Amount" value bigger than 1000
$SP().list('My List Name').update({
  Title:"Too expensive"
}, {
  where:"Amount > 1000"
}).then(function(res) {
  alert(res.passed.length+" items successfully updated!");
});

// Get all items with "Requestor" as the current user and with "Default Color" is "pink"
$SP().list('ListName').get({
  fields:"Title,Size",
  where:"Requestor = '[Me]' AND Default_x0020_Color = 'pink'",
  orderby:"Size DESC"
}).then(function(data) {
  var html = "<ul>";
  for (var i=data.length; i--;)
    html += "<li>Model '"+data[i].getAttribute("Title")+"' (size: "+data[i].getAttribute("Default_x0020_Color")+")<li>";
  $('#list').append(html+'</ul>');
});

Find more examples on the dedicated page.

Forms

The plugin formfields of SharepointPlus provides few functions to interact with NewForm.aspx and EditForm.aspx of a list:

// make sure to call the plugin: <script type="text/javascript" src="sp-plugin.formfields.js"></script>

// hide the <TR> for the field "Title", and add a red background for the <TR> for the field "Next Action"
var rows=$SP().formfields("Title,Next Action").row(); // row() returns a HTMLNodeElement (or a jQuery object if jQuery is available) that represents the <TR> element
rows[0].style.display="none";
rows[1].style.backgroundColor="red";

// check if all mandatory fields have a value, and also "Title"
$SP().formfields("Title",{mandatory:true}).each(function() {
  if (this.val() == "") {
    alert(this.name+" is empty!");
  }
});

Find more examples on the dedicated page.

Utilities

SharepointPlus has also some useful functions:

// take a number and return it as a currency amount
$SP().toCurrency(1500000,2,'$'); // --> $1,500,000.00

// when you have to deal with a date from a .get() ...
$SP().list('My Calendar List').get({fields:"Meeting_x0020_Date"}).then(function(data) {
  for (var i=data.length; i--;) console.log($SP().toDate(data[i].getAttribute("Meeting_x0020_Date")).getFullYear());
});
// ... or to a .add()/.update()
var nextMeeting = new Date("5/May/2015");
$SP().list('ListName').add({Title:"Next Meeting",Meeting_x0020_Date:$SP.toSPDate(nextMeeting)});

Find more examples on the dedicated page.

Try it out

You can test it right now. Just open your browser "Developer Tools" window on your SharePoint site somewhere, then run the following code snippet which will load the SharepointPlus script dynamically:

// 1: Load SharepointPlus
var script = document.createElement('script');
script.src = "//unpkg.com/sharepointplus";
document.getElementsByTagName('head')[0].appendChild(script);
// if you receive the error: "Refused to load the script 'https://unpkg.com/sharepointplus' because it violates the following Content Security Policy directive" then you'll have to copy/paste the code from https://unpkg.com/sharepointplus in the console

// 2: Try some library methods
$SP().list('List In the Current Site').get({fields:"ID", where:"ID > 0"}).then(function(data) { data.forEach(function(d) { console.log(d.getAttribute("ID")) }) });
$SP().whoami().then(function(people) { for (var i=0; i < people.length; i++) console.log(people[i]+" = "+people[people[i]]) })

Example:

NodeJS

Since SharepointPlus 4.0 you can use it as a node module for your node's applications.

npm install sharepointplus

Find below an example on how to use it for server side application:

// the credentials depend of your authentication system
// see: https://github.com/s-KaiNet/node-sp-auth
const credentials = {
  username:'my_username',
  password:'mypassword',
  domain:'mydomain'
};
// you can also define a proxy
const proxyweb = "http://" + credentials.domain + "%5C" + credentials.username + ":" + credentials.password + "@proxy:80";

const $SP = require('sharepointplus');
const sp = $SP().proxy(proxyweb).auth(credentials);

// you can then use SharepointPlus normally
// e.g.: sp.list("Hello", "http://my.sharepoint.site/").get(...);

For client side application built with Webpack you may need to ignore the sp-request and xmldom modules with the ignorePlugin from Webpack:

// webpack.config.js
plugins: [
  new webpack.IgnorePlugin(/^sp-request$/),
  new webpack.IgnorePlugin(/^xmldom$/)
]

Old Versions

The previous versions of SharepointPlus are available in the releases folder

The documentation for SharepointPlus v4.0 is available at https://sharepointplus4.netlify.com/