månadsarkiv: maj 2016

Update Field.JSLink using JSOM or REST

Today I have just a little code snippet to share. This code snippet shows how to update the JSLink property for an existing field using JSOM and REST. For REST I use sharepoint-utilities.

var updateJsLinkCsom = function(config) {
	var ctx = SP.ClientContext.get_current();
	var web = ctx.get_web();
	var lists = web.get_lists();
	var list = lists.getByTitle(config.listTitle)
	var fields = list.get_fields();
	var field = fields.getByInternalNameOrTitle(config.fieldTitle)
	field.set_jsLink(config.jsLink)
	field.update()
	ctx.executeQueryAsync()
};
var updateJsLinkRest = function(config) {
	SP.SOD.registerSod('sputils.js', '&lt;your cdn endpoint&gt;/sputils.min.js')
	SP.SOD.executeFunc('sputils.js', '', function() {
		var url = _spPageContextInfo.webAbsoluteUrl
			+ '/_api/web/lists/getbytitle(''
			+ config.listTitle + '')/fields/getbyinternalnameortitle(''+ config.fieldTitle + '')';
		var payload = {'__metadata': {'type': 'SP.Field'}, 'JSLink': config.jsLink};
	    var config = {'headers' : {'X-HTTP-Method': 'MERGE' }};
		sputils.rest.post(url, payload, config);
	});
};
var config = {
	listTitle: '&lt;your list title&gt;',
	fieldTitle: '&lt;your field title&gt;',
	jsLink: '~site/&lt;your jslink&gt;'
};
updateJsLinkCsom(config);
updateJsLinkRest(config);

var updateJsLinkCsom = function(config) {

var ctx = SP.ClientContext.get_current();

var web = ctx.get_web();

var lists = web.get_lists();

var list = lists.getByTitle(config.listTitle)

var fields = list.get_fields();

var field = fields.getByInternalNameOrTitle(config.fieldTitle)

field.set_jsLink(config.jsLink)

field.update()

ctx.executeQueryAsync()

};

var updateJsLinkRest = function(config) {

SP.SOD.registerSod('sputils.js', '<your cdn endpoint>/sputils.min.js')

SP.SOD.executeFunc('sputils.js', '', function() {

var url = _spPageContextInfo.webAbsoluteUrl

+ '/_api/web/lists/getbytitle(''

+ config.listTitle + '')/fields/getbyinternalnameortitle(''+ config.fieldTitle + '')';

var payload = {'__metadata': {'type': 'SP.Field'}, 'JSLink': config.jsLink};

var config = {'headers' : {'X-HTTP-Method': 'MERGE' }};

sputils.rest.post(url, payload, config);

});

};

var config = {

listTitle: '<your list title>',

fieldTitle: '<your field title>',

jsLink: '~site/<your jslink>'

};

updateJsLinkCsom(config);

updateJsLinkRest(config);

A couple of notes, to update a field we need:

A POST request
with a header ‘X-HTTP-Method’: ‘MERGE’
with __metadata: { type: SP.Field } and JSLink property in the payload
and ‘X-RequestDigest‘ header (but it is nicely handled by sharepoint-utilities)

Trigger SP2010 Workflows using JSOM

Today I found out how to start workflows in JSOM (JavaScript Object Model in SharePoint). Nothing special, but since it is not documented, it took me a while to find a solution. Here is the code which I want to keep as simple as possible.

What you need to start a SP2010 Workflow for a list item or a document in JSOM, you need to load SP.WorkflowServices.js and you need to create the manager and get the service, then you can trigger a workflow using the workflow name, the list guid and the guid of the list item:

var ctx = SP.ClientContext.get_current();
var workflowServicesManager =
	SP.WorkflowServices.WorkflowServicesManager.newObject(ctx,
		ctx.get_web());
var service = workflowServicesManager.getWorkflowInteropService();
service.startWorkflow(workflowName, null,
	listGuid, plainItem.guid, initiationParams);

var ctx = SP.ClientContext.get_current();

var workflowServicesManager =

SP.WorkflowServices.WorkflowServicesManager.newObject(ctx,

ctx.get_web());

var service = workflowServicesManager.getWorkflowInteropService();

service.startWorkflow(workflowName, null,

listGuid, plainItem.guid, initiationParams);

Here is the code to trigger a workflow for multiple items:

//fire the workflows
function fire2010WorkflowForListItems(ctx, listGuid, plainItems) {
	var workflowServicesManager =
		SP.WorkflowServices.WorkflowServicesManager.newObject(ctx,
			ctx.get_web());
	var service = workflowServicesManager.getWorkflowInteropService();
	for(var i = 0; i &lt; plainItems.length; i++) {
		var plainItem = plainItems[i];
		console.log('scheduling workflow for id: ', plainItem.id);
		service.startWorkflow(options.workflowName, null,
			listGuid, plainItem.guid, options.initiationParams);
	}
	console.log('now executing...');
	ctx.executeQueryAsync(function() {
		console.info('yes, workflows completed for '
			+ items.length + ' items');
	}, function() {
		console.error('it didn't go well');
	});
}

//fire the workflows

function fire2010WorkflowForListItems(ctx, listGuid, plainItems) {

var workflowServicesManager =

SP.WorkflowServices.WorkflowServicesManager.newObject(ctx,

ctx.get_web());

var service = workflowServicesManager.getWorkflowInteropService();

for(var i = 0; i < plainItems.length; i++) {

var plainItem = plainItems[i];

console.log('scheduling workflow for id: ', plainItem.id);

service.startWorkflow(options.workflowName, null,

listGuid, plainItem.guid, options.initiationParams);

}

console.log('now executing...');

ctx.executeQueryAsync(function() {

console.info('yes, workflows completed for '

+ items.length + ' items');

}, function() {

console.error('it didn't go well');

});

}

The code above is inspired from this gist and sharepoint stackexchange. It is a simplified version that only works for list item workflows and SharePoint 2010 workflows.
Here is an example how you can get multiple items and batch start a workflow:

//just a couple of variables
var options = {
	workflowName: 'Behörigheter',
	listName: 'Documents',
	initiationParams: {}
};
//load list items
function startWorfklows() {
	//Start 2010 Workflow for a List Item
	var ctx = SP.ClientContext.get_current();
	var web = ctx.get_web();
	var lists = web.get_lists();
	var list = lists.getByTitle('Documents');
	ctx.load(list);
	var items = list.getItems(new SP.CamlQuery());
	ctx.load(items);
	ctx.executeQueryAsync(function() {
		var listGuid = list.get_id() + '';
		var en = items.getEnumerator();
		var plainItems = [];
		while (en.moveNext()) {
			var it = en.get_current();
			//do not take checked out files, it won't work
			if (!it.get_item('CheckoutUser')) {
				plainItems.push({id: it.get_id(), guid: it.get_item('GUID') + '' });
			}
		}
		fire2010WorkflowForListItems(ctx, listGuid, plainItems);
	}, function() {
		alert('boom');
	});
}

//Load Worfklow Js dependency
var wfScript = 'SP.WorkflowServices.js'
SP.SOD.registerSod(wfScript,
	_spPageContextInfo.webAbsoluteUrl + '/_layouts/15/SP.WorkflowServices.js');
SP.SOD.executeFunc(wfScript, '', startWorfklows);

//just a couple of variables

var options = {

workflowName: 'Behörigheter',

listName: 'Documents',

initiationParams: {}

};

//load list items

function startWorfklows() {

//Start 2010 Workflow for a List Item

var ctx = SP.ClientContext.get_current();

var web = ctx.get_web();

var lists = web.get_lists();

var list = lists.getByTitle('Documents');

ctx.load(list);

var items = list.getItems(new SP.CamlQuery());

ctx.load(items);

ctx.executeQueryAsync(function() {

var listGuid = list.get_id() + '';

var en = items.getEnumerator();

var plainItems = [];

while (en.moveNext()) {

var it = en.get_current();

//do not take checked out files, it won't work

if (!it.get_item('CheckoutUser')) {

plainItems.push({id: it.get_id(), guid: it.get_item('GUID') + '' });

}

fire2010WorkflowForListItems(ctx, listGuid, plainItems);

}, function() {

alert('boom');

});

}

//Load Worfklow Js dependency

var wfScript = 'SP.WorkflowServices.js'

SP.SOD.registerSod(wfScript,

_spPageContextInfo.webAbsoluteUrl + '/_layouts/15/SP.WorkflowServices.js');

SP.SOD.executeFunc(wfScript, '', startWorfklows);

Why I needed it

I created a simple workflow that is triggered on Item Added and Item Updated. Unfortunately there are already thousands of items in the document library. To trigger them manually is nothing good. But a simple javascript solution did exactly what I wanted.

Create and download a file in javascript

Phew, I spent a lot of time to get this to work:

Create a text based file in javascript – a simple csv or txt
Download a file in Chrome and Internet Explorer
Make Excel understand Unicode characters (å ä ö and many more) in csv directly.

I found many solutions on the Internet that I used to find out a solution that works for me

A deep diving jsfiddle about unicode encodings, bom, line endings: http://jsfiddle.net/kimiliini/HM4rW (unfortunately, does not work in IE). There I learned one important thing: we need a BOM in order to make Excel understand that it is not just ASCII. The BOM (byte order mark) for utf-8 is %ef%bb%bf for utf-8. Without this bom you’ll see the right characters in a text editor (except Notepad of course), but if you open the csv file directly in Excel, you’ll see wrong letters.
Other good resources are FileSaver.js: https://github.com/eligrey/FileSaver.js and download.js: http://danml.com/download.html

This is my solution that is tested in Chrome and IE10:

function downloadContent(options) {
	if (!options || !options.content) {
		throw 'You have at least to provide content to download';
	}
	options.filename = options.filename || 'tolle.txt';
	options.type = options.type || 'text/plain;charset=utf-8';
	options.bom = options.bom || decodeURIComponent('%ef%bb%bf');

	if (window.navigator.msSaveBlob) {
		var blob = new Blob([options.bom + options.content],
                 {type: options.type });
		window.navigator.msSaveBlob(blob, options.filename);
	}
	else {
		var link = document.createElement('a');
		var content = options.bom + options.content;
		var uriScheme = ['data:', options.type, ','].join('');
		link.href = uriScheme + content;
		link.download = options.filename;
		link.click();
		link.remove();
	}
}

//test
var separator = ';';
downloadContent({
	type: 'text/csv;charset=utf-8',
	filename: 'tolle.csv',
	content: ['ASCII', separator,
		'Åbäcka sig', separator,
		'to się podoba: żźćąęłć',
		separator, 'Яшлӑхӑма туйаймарӑм'].join('')
});

function downloadContent(options) {

if (!options || !options.content) {

throw 'You have at least to provide content to download';

}

options.filename = options.filename || 'tolle.txt';

options.type = options.type || 'text/plain;charset=utf-8';

options.bom = options.bom || decodeURIComponent('%ef%bb%bf');

if (window.navigator.msSaveBlob) {

var blob = new Blob([options.bom + options.content],

{type: options.type });

window.navigator.msSaveBlob(blob, options.filename);

}

else {

var link = document.createElement('a');

var content = options.bom + options.content;

var uriScheme = ['data:', options.type, ','].join('');

link.href = uriScheme + content;

link.download = options.filename;

link.click();

link.remove();

}

//test

var separator = ';';

downloadContent({

type: 'text/csv;charset=utf-8',

filename: 'tolle.csv',

content: ['ASCII', separator,

'Åbäcka sig', separator,

'to się podoba: żźćąęłć',

separator, 'Яшлӑхӑма туйаймарӑм'].join('')

});

Safari

Unfortunately in Safari, the link is opened directly in the web browser. You have to press Cmd – S to trigger Save As manually.

Part of SharePoint Utilities

I submitted this code to sputils (SharePoint Utilities) on github.