CHunky Universe of Vigourous Astonishing SHarepoint :)

Tag Archives: SP.js

Parameterize a javascript object and create url

If you want to add some parameters to an url which you want to open, you can use jQuery.param function:

var url = "some_url";
var params = { 
   name: "Setner",
   email: "",
   mobile: "123456789"
var search = "?" + $.param(p);
url += search;

It is handy, indeed. In an environment without jQuery (are there some?:) ) you can just iterate an object and join properties:

var url = "some_url";
var params = { 
   name: "Setner",
   email: "",
   mobile: "123456789"
if (url.match("/\?/g") == null) {
   url += "?";
else {
   url += "&";
var search = "";
for(var p in params) {
   search += [p, params[p]].join("=");
url += search;

This solution parameterizes an object and appends it to an url in a smart way (by adding a question mark or an ampersand depending on the situation).

SharePoint javascript API

There is a nice sharepoint javascript api we can use as well. Consider this example:

var u = new SP.Utilities.UrlBuilder("");
u.addKeyValueQueryString("id", "2");
u.addKeyValueQueryString("time", new Date().toISOString());

Pass arguments from/to Modal Dialog

To pass arguments from a ModalDialog is easy. Provide some buttons and invoke close function:

SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK, someValue);

The first argument is result, it is a enumeration with three alternatives: cancel, invalid and OK.

The value you pass back to the main window can be a simple string, or a complex javascript object.

In this example I’ll create a html element which is hidden (id=”modal-form” class=”s4-die”):

<div id="modal-form" class="s4-die">
   <input type="text" class="todo-text"/><br/>
   <input type="button" value="save"
      onclick="SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK, {title: 'Johannes', property: $(this).siblings('.todo-text')});"/>

Then we get the hidden html element and pass it as options to Modal Dialog, provide a callback (cb).

var t = $("#modal-form").clone(true).removeClass("s4-die").get(0);
function cb(result, value) {
	console.log("result: " + result);
	console.log("value: ");
	console.log("title: " + value.title);
	console.log("property: " +;
var options = {
	html: t,
	title: "hej",
	dialogReturnValueCallback: cb }

Pay attention to clone function. You must copy your div in order to use it more than one time. Therefore we have refine the selection of the input: $(this).siblings(‘.todo-text’), otherwise wrong input is selected.

A tip for further reading: SharePoint Development blog.

If some values shown on the page must be refreshed, just invoke RefreshPage, like Tobias Lekman suggests.

Pass arguments to Modal Dialog and use it

In options you pass to SP.UI.ModalDialog.showModalDialog you can define args property. It can be any object with any complexity.

var options = {
	args: {
		title: "title from arguments"

To use it in a modal dialog, you have to get the args this way:

var args = SP.UI.ModalDialog.get_childDialog().get_args();

It is even better to ensure sp.js is loaded:

    var args = SP.UI.ModalDialog.get_childDialog().get_args();
    var title = args.title;
}, "sp.js");

Vänta tills sp.js laddats

Här är en funktion som man kan använda för att vänta till sp.js laddats och köra sin funktion:

ExecuteOrDelayUntilScriptLoaded(myjsfucntion, "sp.js");

Eftersom det kan vara så att sp.js laddas med lazy loading:

<SharePoint:ScriptLink Name="SP.js" 
    runat="server" OnDemand="true"

Uppdatera web med js

Här är ett litet exempel:

 function updateTitle() { 
   var ctx = new SP.ClientContext.get_current();
   this.web = ctx.get_web(); 
   web.set_title('Examensarbete 2011'); 
     Function.createDelegate(this, this.onUpdate), 
     Function.createDelegate(this, this.onFail)); } 
function onUpdate(sender, args) { 
   alert('title updated'); 
function onFail(sender, args) { 
   alert('failed to update title. Error:'+args.get_message()); 

javascript API i Sharepoint

Det är supersmidigt. Här är ett exempel:


function createAnnouncement(title, body) {
    var ctx = new SP.ClientContext.get_current();
    var list = ctx.get_web().get_lists().getByTitle('Meddelanden');
    var itemCreationInfo = new SP.ListItemCreationInformation();
    this.newListItem = list.addItem(itemCreationInfo);
    this.newListItem.set_item("Title", title);
    this.newListItem.set_item("Body", body);
    Function.createDelegate(this, this.onSucceededCallback), Function.createDelegate(this, this.onFailedCallback));

function onSucceededCallback(sender, args) {
    SP.UI.Status.addStatus("Info", "It worked!",true);
function onFailedCallback(sender, args) {
    SP.UI.Status.addStatus("Info", "It didn't work!",true);
Daniel Chronlund Cloud Tech Blog

News, tips and thoughts for Microsoft cloud fans

Вула Чăвашла

VulaCV - Чăвашла вулаттаракан сайт

Discovering SharePoint

And going crazy doing it

Bram de Jager - Architect, Speaker, Author

Microsoft 365, SharePoint and Azure

SharePoint Dragons

Nikander & Margriet on SharePoint

Mai Omar Desouki

PFE @ Microsoft

Cameron Dwyer

Office 365, SharePoint, Azure, OnePlace Solutions & Life's Other Little Wonders


Me and My doings!

Share SharePoint Points !

By Mohit Vashishtha

Jimmy Janlén "Den Scrummande Konsulten"

Erfarenheter, synpunkter och raljerande om Scrum från Jimmy Janlén

Aryan Nava

DevOps, Cloud and Blockchain Consultant


SharePoint for everyone


Ryan Dennis is a SharePoint Solution Architect with a passion for SharePoint and PowerShell

SharePoint 2020

The Vision for a Future of Clarity

Aharoni in Unicode

Treacle tarts for great justice

... And All That JS

JavaScript, Web Apps and SharePoint


Mostly what I know and share about...