Kategoriarkiv: javascript

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.

Minimal Download Strategy. Simple

There are many correct ways (1, 2, 3, 4, 5…) of making scripts work with the Minimal Download Strategy Feature (MDS) in SharePoint 2013 and 2016. But to be honest – every time I need it, I get confused. So now it is time to find a simple solution for that.

Who is better at it than the developers of the SharePoint themselves? Look at the MDS code in the built-in Display Templates:

mds-001

Let’s keep it as simple as Item_Default.js, let’s take it as it is and create our own scripts. Here is a skeletton of and MDS-ready script:

function runMyCode() {
	var time = new Date().toISOString();
	console.log('runMyCode', time );
}
runMyCode();
if (typeof(RegisterModuleInit) == 'function') {
	var scriptUrl = '/Style Library/runMyCode.js';
  RegisterModuleInit(scriptUrl, runMyCode);
}

function runMyCode() {

var time = new Date().toISOString();

console.log('runMyCode', time );

}

runMyCode();

if (typeof(RegisterModuleInit) == 'function') {

var scriptUrl = '/Style Library/runMyCode.js';

RegisterModuleInit(scriptUrl, runMyCode);

}

Which boils down to this in pseudocode:

Execute your code
Determine if MDS is enabled
If MDS is enabled
Register your code for execution

That’s it. No more overcomplicating.

Related findings

External scripts (outside SharePoint Site Collection, from CDN) within ScriptBlock of a custom action (like AddJSLink in PnP) work withou any MDS-adjustments. The ScriptBlock adds a script tag to the head of the html document, and it the js reference is added to every AjaxDelta load. I would need more time to find out why. The good news is: it is an argument for using more CDN solutions in SharePoint.

Old stuff

A while ago I wrote two blog posts about MDS. Now I realise they were overcomplicated and the solution required customizations of the master page and 3rd-party scripts.

Vi på Bool tror att om man delar med sig av sin kunskap, så blir världen ett lite trevligare ställe. Här delar vi med oss av det vi kan och tror på.