SharePoint JavaScript OOB Utilities URL

SharePoint provides Out of Box JavaScript libraries to manipulate URL property.

GetUrlKeyValue(KeyName, bNoDecode, url, bCaseInsensitive)
Gets the key value from url. The second parameter is a Booleans indicating whether the value needs decoding and the last parameter indicates whether key is case sensitive

SetUrlKeyValue(keyName, keyValue, bEncode, url)
Set the value of key in the Url. The third parameter indicates whether the value needs to be encoded

The two functions below are useful before saving a file to detect any illegal characters in url and file name as both have different sets of illegal characters.
http://”, question mark, hash, ssemicolon and ampersand have to be stripped before passing to these functions otherwise they will be interpreted as illegal characters.

//check URL
//check file name

An example of the use of the functions are below

var currentUrl = _spPageContextInfo.webAbsoluteUrl.replace("http://", "") + _spPageContextInfo.serverRequestPath;

var illChar = IndexOfIllegalCharInUrlPath(currentUrl);


Allows to replace all instances of one of six SP specific tokens in a URL
{ItemId} {ItemUrl} {SiteUrl} {ListId} {Source} {ListUrlDir}

The code below uses the function to obtain listId , SiteUrl and ListUrlDir which is the rootfolder Url of the list.

var tokenizedUrl = "http://www.test?list={ListId}&SiteUrl={SiteUrl}&ListDir={ListUrlDir}"
var url = ReplaceUrlTokens(tokenizedUrl,ctx);
var listId = GetUrlKeyValue ( "List",false, url, true);
console.log("ListId:" + listId)
var siteUrl = GetUrlKeyValue ( "SiteUrl",false, url, true);
console.log("siteUrl" + siteUrl)
var ListUrlDir = GetUrlKeyValue ( "ListUrlDir",false, url, true);
console.log("ListUrlDir:" + ListUrlDir)

SP.Utilities.UrlBuilder.urlCombine(string1, string2)
Combines the two string parameters without redundant slashes between them. However only works if second string does not begin with a slash.

Removes key value parameter from url.

var urllink = ""

Get relative URL for specific layout page for current context
It is useful when writing in a mixed 2010, 2013 mode where some sites have been upgraded


It takes the browser to specified url. It is useful when the page url is loaded into a SP modal dialog then the new page that gets loaded will remain inside that dialog as well.

Copy the code into a script editor web part to test.

<a onclick="SP.Utilities.UrlBuilder.navigateTo('')">Navigate in Dialog</a>
<a href='')">Navigate without Dialog</a>

var testUrl = SP.Utilities.Utility.getLayoutsPageUrl(“test.aspx”)
var urlBuilder = SP.Utilities.UrlBuilder(testUrl);
console.log( urlBuilder.get_url());


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s