In this demo, we'll see many Utilities function for URLs:
Demo 1: See URL combine and Check for Illegal Character like (: colon)
var currentUrl = _spPageContextInfo.webAbsoluteUrl.replace("https://", "") + _spPageContextInfo.serverRequestPath;
//Note: we can't use SP.Utilities.UrlBuilder.urlCombine here as _spPageContextInfo.serverRequestPath begins with a "/" so because of this urlCombine will not work right
alert("urlCombine doesn't work right: \n\n" + SP.Utilities.UrlBuilder.urlCombine(_spPageContextInfo.webAbsoluteUrl.replace('https://', ''), _spPageContextInfo.serverRequestPath));
var illChar = IndexOfIllegalCharInUrlPath(currentUrl); // This method returns -1 for legal char
var msg = "Current URL is " + currentUrl + ". ";
if (illChar > -1){
msg += "It contains an illegal character: " + currentUrl.substring(illChar,illChar + 1);
}
else{
msg += "It does not contain any illegal characters";
}
alert(msg);
Demo 2: In this demo, I'll show you how to replace tokens from any URL, you can say that I am going to replace the different QueryStrings that I passed in my imagined URL, let's see this in action:
var myTokenizedUrl = "https://www.myExample.com?List={ListId}&SiteUrl={SiteUrl}&ListUrlDir={ListUrlDir}&Source={Source}";
var url = ReplaceUrlTokens(myTokenizedUrl, ctx);
var listId = GetUrlKeyValue("List", false, url, true);
var siteUrl= GetUrlKeyValue("SiteUrl", false, url, true);
var listUrlDir = GetUrlKeyValue("ListUrlDir", false, url, true);
var source = GetUrlKeyValue("Source", false, url, true);
source = SP.Utilities.UrlBuilder.removeQueryString(source, "badParam");
var msg = "Values added for tokens (after decoding):\n\n";
msg += "List: " + listId + "\n\n";
msg += "Site URL: " + siteUrl + "\n\n";
msg += "ListURLDir: " + listUrlDir + "\n\n";
msg += "Source: " + source + "\n\n";
alert(msg);
Same example only changing the URL:
var myImaginedUrl = "https://www.imaginedURL.com?List={ListId}&SiteUrl={SiteUrl}&ListUrlDir={ListUrlDir}&Source={Source}";
var currentURL = ReplaceUrlTokens(tokenizedUrl,ctx);
var listID=GetUrlKeyValue("List",false,currentURL,true);
var siteURL = GetUrlKeyValue("SiteUrl",false,currentURL,true);
var listUrlDir = GetUrlKeyValue("ListUrlDir",false,currentURL,true);
var source = GetUrlKeyValue("Source",false,currentURL,true);
source=SP.Utilities.UrlBuilder.removeQueryString(source,"badParameter");
var msg = "Values added for tokens (after decoding):\n\n";
msg += "List: " + listID + "\n\n";
msg += "Site URL: " + siteURL + "\n\n";
msg += "ListURLDir: " + listUrlDir + "\n\n";
msg += "Source: " + source + "\n\n";
alert(msg);
Output:
Let's add in badParameter in the URL and change your script little bit by removing the line
source=SP.Utilities.UrlBuilder.removeQueryString(source,"badParameter");
Then you'll see the Source in the alert has badParameter=abc, so in this way you can manipulate the url and you can use several SP functions and properties in the browser console when any SharePoint site is opened in the browser, I hope you are understanding each and every steps easily
Again after adding the removeQueryString(url,"parameterNameToRemove"); the output will be:
As you see this code work fine for library also, you don't to worry about where you are going to writing the JavaScript, you just have to know why and how you are going to use the JavaScript on a particular page for a particular task.
Demo 3: In this, I'll show how to get the correct Layouts folder URL for any particular page
alert(SP.Utilities.Utility.getLayoutsPageUrl("SiteSettings.aspx"));
alert(SP.Utilities.Utility.getLayoutsPageUrl("viewlsts.aspx"));
Demo 4: In this demo, I'll show you how navigateTo("url") function works
SP.Utilities.HttpUtility.navigateTo("https://yourUrl.com/yourPage.aspx")
navigateTo is another very important Utility function of SharePoint that enables you to navigate within the current active area.
Let's do little Changes for this demo:
Open Default Add new Form Page:
After opening this page put the page in edit mode, add a web part choose Script Editor Web part, and add following script in it:
<a onclick='SP.Utilities.HttpUtility.navigateTo("https://metaoptionllc455.sharepoint.com/sites/apptest/_layouts/15/settings.aspx")'>Navigate in Dialog</a>
<a href="https://metaoptionllc455.sharepoint.com/sites/apptest/_layouts/15/settings.aspx" > Navigate without Dialog</a>
Click Insert and Stop Editing, and do one more setting for the List from the List settings page, So go the List Setting and Choose Advanced Settings from the List Settings Page,
and enable Launch forms in Dialog option to Yes:
That's it, Now Come back to your List Page and Click on New Item Button, now your New Add Item Form will open in the Dialog as shown in below image:
As you see two options are available here:
1. For Navigate to Site Settings page within this opened dialog
2. Other is for Navigate without Dialog
Check each option one by one:
When you click on Navigate in Dialog then Site Settings page will open as shown as follows:
When you click on Navigate without Dialog then Site Settings page will open in new Tab as shown:
I hope you like this Utilities URL demo using browser developer console.
Thank you for reading this article.........
I am very thankful to David Mann (SharePoint Instructor)