Utility Functions Available In PnP Core JS

PnP-JS-Core library is a reusable library, developed by Microsoft and community contributors. This library is designed mainly to make common SharePoint tasks easy and spontaneous. It contains many fluent API for working with SharePoint REST API. Please refer to the following site to know more about the PnP-JS-Core library.

Pnp Core has also provided the utility functions to handle some of the basic operations, using script. In this article, we see the following operations, which can be handled, using those Utility functions of PnP Core.

  • urlParamExists
  • getUrlParamByName
  • getUrlParamBoolByName
  • stringInsert
  • dateAdd
  • loadStylesheet
  • getRandomString
  • getGUID
  • isFunction
  • isArray
  • stringIsNullOrEmpty
  • isUrlAbsolute
  • makeUrlAbsolute

To use PnP-JS-core in our JavaScript, we need to include Pnp JS file, which can be downloaded from the following link.


Using this function, we can check whether the particular query string is available in the current URL or not. This function will return a true/false value.

@param name- The name of the URL parameter to check.


urlParamExists(name: string)

Following is a sample example, which will find, whether the query string contains “source” or not.

  1. <script type=”text/javascript” src=”/siteassets/scripts/pnp.js”></script>  
  2. <script type="text/javascript">  
  3. var isSrc;   
  4. isSrc = $pnp.util.urlParamExists("source");   
  5. alert(isSrc);  
  6. </script>  

Note: The parameter value is case sensitive.


We can retrieve the query string values from the current URL, using this function. We have to pass the value of the query string to be retrieved.

@param name- The name of the parameter for which we want the value


getUrlParamByName(name: string)

Following example will show, how to retrieve the value for the query string “source”.

  1. <script type=”text/javascript” src=”/siteassets/scripts/pnp.js”></script>  
  2. <script type="text/javascript">  
  3. var srcVal;   
  4. srcVal = $pnp.util.getUrlParamByName("source");   
  5. alert(srcVal);  
  6. </script>  


This function will parse the URL and get the query string value by name and attempts to parse a bool value.

It will parse true/false and 0/1.

If the specified query string is not available in the URL, it will result in false.

@param name- The name of the parameter for which we want the Boolean value.


getUrlParamBoolByName(name: string)

Following example will show us, how to parse some of the parameters and parse them as Boolean.

  1. <script type=”text/javascript” src=”/siteassets/scripts/pnp.js”></script>  
  2. <script type="text/javascript">  
  3. var param1;   
  4. var param2;  
  5. var param3;   
  6. var param4;   
  7. param1 = $pnp.util.getUrlParamBoolByName("param1");   
  8. param2 = $pnp.util.getUrlParamBoolByName("param2");   
  9. param3 = $pnp.util.getUrlParamBoolByName("param3");  
  10. param4 = $pnp.util.getUrlParamBoolByName("param4");  
  11. alert("Param1 is "+param1 +"\nParam2 is "+param2+"\nParam3 is "+param3+"\Param4 is "+param4);  
  12. </script>  

Using this function, we can insert a string into the target string in the specified index location.

  • @param target- The string into which we will insert s.
  • @param index- The location in the target to insert s (zero based).
  • @param s- The string to insert into target at the position index.


stringInsert(target: string, index: number, s: string)

The following example shows, how to use the stringInsert function and obtain a new string.

  1. <script type=”text/javascript” src=”/siteassets/scripts/pnp.js”></script>  
  2. <script type="text/javascript">  
  3. var targetString = " This is Util Dev";   
  4. var insertString="new inserted ";   
  5. var newString = $pnp.util.stringInsert(targetString,9,insertString);  
  6. alert(newString);  
  7. </script>  


We can use this function to add certain year / quarter / month / week / day / hour / minute / second to any date or current date.

  • @param date- The date to which, we will add the units and it is done in local time.
  • @param interval- The name of the interval to add, one of: ['year', 'quarter', 'month', 'week', 'day', 'hour', 'minute', 'second'].
  • @param units- The amount to add to date of the given interval.


dateAdd(date: Date, interval: string, units: number)

Following example shows us, how to add 5 months to the current date.

  1. <script type=”text/javascript” src=”/siteassets/scripts/pnp.js”></script>  
  2. <script type="text/javascript">  
  3. var time = new Date().getTime();  
  4. ar date = new Date(time);  
  5. var newDate = $pnp.util.dateAdd(date.toISOString(),"month",5);  
  6. alert(newDate);  
  7. </script>  


Following example is written to add 10 days from the specified date.
  1. <script type=”text/javascript” src=”/siteassets/scripts/pnp.js”></script>  
  2. <script type="text/javascript">  
  3. var date = new Date('2016-08-23 01:59:00');  
  4. var newDate = $pnp.util.dateAdd(date.toISOString(),"day",10);  
  5. alert(newDate);  

  6. </script>  


We can use this function in order to load a custom style sheet.

  • @param path- The URL to the stylesheet.
  • @param avoidCache- If true, a value will be appended as a query string to avoid the Browser caching issues.


loadStylesheet(path: string, avoidCache: boolean)

Following command shows us, how to load a CSS file to the current page.



We can generate a random string, using this utility function. This function will be handy in case of generating a random string password from the script.

  • @param chars- The length of the random string to generate.

The random string will contain the characters from the following set.



getRandomString(chars: number)

The following example illustrates, how to generate a 10-digit random string.

  1. <script type=”text/javascript” src=”/siteassets/scripts/pnp.js”></script>  
  2. <script type="text/javascript">  
  3. var password = $pnp.util.getRandomString(10);  
  4. alert(password);  
  5. </script>  


Through this function, we can generate a new GUID from the script. This function does need any parameter.



Following example shows us how to generate GUID from script.

  1. <script type=”text/javascript” src=”/siteassets/scripts/pnp.js”></script>  
  2. <script type="text/javascript">  
  3. var guid = $pnp.util.getGUID();  
  4. alert(guid);  
  5. </script>  

This function is used to check, whether the specified input is a function name or not.

  • @param candidateFunction- The thing to test for being a function.


isFunction(candidateFunction: any)

Following example shows, how to check, whether the input is a function or not.

  1. <script type=”text/javascript” src=”/siteassets/scripts/pnp.js”></script>  
  2. <script type="text/javascript">  
  3. function testfn()  
  4. {  
  5. }  
  6. var funcTest = $pnp.util.isFunction(testfn);  
  7. alert(funcTest);  
  8. </script>  


This function can be used to check, whether the specified input is an array or not.

  • @param array- The thing to test for being an array.


isArray(array: any)

Following sample script shows us, how to check for an array.

  1. <script type=”text/javascript” src=”/siteassets/scripts/pnp.js”></script>  
  2. <script type="text/javascript">  
  3. var testArray = ["one","two","three"];  
  4. var isArr = $pnp.util.isArray(testArray);  
  5. alert(isArr);  
  6. </script>  


With the help of this function, we can check, whether a string is null or empty.

@param s- The string to test.


stringIsNullOrEmpty(s: string)

Sample script is given below to check null or empty:

  1. <script type=”text/javascript” src=”/siteassets/scripts/pnp.js”></script>  
  2. <script type="text/javascript">   
  3.  var s1="PnpDemo";  
  4. var s2 ;  
  5. var res1 = $pnp.util.stringIsNullOrEmpty(s1);  
  6. var res2 = $pnp.util.stringIsNullOrEmpty(s2);  
  7. alert("Is string 1 Null or Empty - "+ res1 + "\nIs string 2 Null or Empty - " + res2);  
  8. </script>  


This function can be used to check, whether the specified URL is an absolute or not. It will return True/False.

  • @param url- The url is checked to see, if it is an absolute.


isUrlAbsolute(url: string)

Sample script is given below, which illustrates, how to check if a URL is absolute or not:

  1. <script type=”text/javascript” src=”/siteassets/scripts/pnp.js”></script>  
  2. <script type="text/javascript">   
  3. var url1 = "/sitepages/test.aspx";  
  4. var url2 = "http://server/sitepages/test.aspx";  
  5. var res1 = $pnp.util.isUrlAbsolute(url1);  
  6. var res2 = $pnp.util.isUrlAbsolute(url2);  
  7. alert("Is string 1 Absolute - "+ res1 + "\nIs string 1 Absolute - " + res2);  
  8. </script>  


By using this function, we can build an Absolute URL from a Relative URL. This function will attempt to make the supplied relative URL absolute, based on the _spPageContextInfo object, if available.

  • @param url- The relative URL to make absolute.


makeUrlAbsolute(url: string)

Following example shows, how to build an Absolute URL, using the _spPageContextInfo object.

  1. <script type=”text/javascript” src=”/siteassets/scripts/pnp.js”></script>  
  2. var url1 = "sitepages/test.aspx";  
  3. var result = $pnp.util.makeUrlAbsolute(url1);  
  4. alert("Result absolute url is "+result);  
  5. </script>  

Thus, in this article, we learned, how to use the utility functions, which are provided in PnP Core js. These functions will be handy in many Applications, where we might need to check some conditions or manipulate various variables. 


Build smarter apps with Machine Learning, Bots, Cognitive Services - Start free.

Start Learning Now