<img height="1" width="1" src="https://www.facebook.com/tr?id=730305433807073&amp;ev=PageView &amp;noscript=1">
Start
Book a Demo

Advent Calendar Door 18: Running custom JavaScript in your SharePoint.

avatar

Posted by Adis Jugo - 18 December, 2017

Running custom JavaScript in your SharePoint

With all the goodies and features that SharePoint offers, still we sometimes just don’t get around of writing some JavaScript code on top of it. We have witnessed different methods of doing that through the past – from injecting it into a site through Content Editor WebPart, to more sophisticated ways.

In today’s skybow Advent Calendar cookie, we will show you why we consider JavaScript to be our mother tongue in skybow, how it natively lives in all our products and components in the form of skybow Expression language, and how simple all this is to achieve with skybow Solution Studio, skybow Rich Forms and skybow Action Links.

skybow Expression Language is actually a SharePoint-supercharged JavaScript. We provide SharePoint context for you: List data, as well as Site Collection, Site, Web, List, Page, Form and User context information. Plus, we provide a ton of helper functions – such as those for checking group memberships, querying data with CAML query, or getting user profile properties. Where that doesn’t suffice, you’re free to use JSOM with SP namespace, SharePoint REST interface, or whatever else you might need.

Where can you use this in your solution? Everywhere, really. You can set the visibility of a control based on a condition, which is then just a JavaScript expression. You can set a form field value, or perform validations with JavaScript, or perform a background calculation, or, or… We also have a “Execute Script” action, which is not bound on any other action, and which can just execute a JS code in different situations (page load, button or link click, skybow Action Link, etc).

Let’s just see how this works in practice.

We differ three expression types in skybow Expression Language:

  • Template – string builder, will not be play a role in today’s advent cookie
  • Assignment – Exel-like one-liners, based on JavaScript
  • Function code – fully featured JavaScript expressions which need to return a value

Let’s see how can we validate a form using Assignment (one-liners) expressions. Let’s say, if we need to validate a “Request note” field, in a way that it has to have more than 100 characters, but only if the current user is not a member of the SharePoint group “Managers”, we would use the following Assignment code:

[[@User.IsMemberOfGroup("Managers")]] ? true : ([[requestnotes]].length > 100)

We see that we are freely mixing JavaScript (the “?” operator), SharePoint list data (the [[requestnotes]] field reference) and a custom helper function [[@User.IsMemberOfGroup]] to determine the group membership.

Note how the assignment expression does not need to return a value, the evaluation result will simply be passed as a result to the filed validator.

Pro tip: We can select both field reference and helper functions from the expression elements builder on the right side, and reduce the typos and syntax errors that way.

Expression Builder - Validation Condition

If we would like to write the same validation expression as a function code, we could do it like on the screenshot below:

Expression Builder - Validation Condition 2.png

Note that Function code expressions always needs to return a value. You can still freely mix JavaScript, list data and helper functions, but, you’ve got way more power than in the Assignment expressions (one-liner), since JavaScript code which you write here can be way more complex. You’ve even got syntax check and syntax coloring.

Pro tip: you can reference any other JS file in Function code expressions – such as your favorite JS framework or your own JS libraries. They can be referenced from a SharePoint Library, CDN or any other repository type – as long as the library is accessible, the reference will work.

Let’s see a bit more complex scenario, what all can be achieved using custom JS code.

Let’s say, our scenario here is to select multiple list items from a list view, and manipulate them in a batch. For that, we will need first to read the value of the “Vendor” field placed in the above the list view (in our case, through skybow List View Search component, but it could be manually or on any other way, there would be no difference).

We have a skybow Action Link “Assemble order”, which should first check if the vendor is selected (field “Vendor” has a value), and if yes, perform the batch update. Each action link has a “Condition” property. In that property, we will use a Function code expression to read the Vendor field value:

Expression Builder - Validation Condition

var vendor = document.querySelectorAll('[title=Vendor]')[0]; var venvalue = vendor.options[vendor.selectedIndex].value; return(venvalue!=="0");

Note how we are using pure JS here, without any skybow “supercharging”, since we are performing a simple DOM operation.

Next, we will have an “Execute script” action to actually perform the batch update.

Expression Builder - Validation Condition

Note how here we are using both JSOM (SP.js namespace) both for getting current ClientContext and all currently selected items (SP.ListOperation.Selection.getSelectedItems()), bur mixing it with skybow field and context data and helper functions ([@Web.GetFirstValueForQuery() executes CAML queries on lists).

This way, you can create really powerful scenarios, and actually cross every border that comes along your way. This mixture of an easy to use, drag-and-drop-like configuration environment, and powerful development toolbox, is what makes skybow so sweet.

Topics: Sharepoint, Office 365, SharePoint Online, Solution Studio


Recent Posts

Creating Your First Solution with skybow: What to Keep in Mind

read more

The 3 Pillar of a successful workspace: Intranet, Collaboration, and Business Apps

read more

SharePoint-based business apps: high-performance, good looking and responsive? Sure!

read more