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.

• pnp.js

urlParamExists

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.

Syntax

urlParamExists(name: string)

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

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

Note: The parameter value is case sensitive.

 

getUrlParamByName

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

Syntax

getUrlParamByName(name: string)

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

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

 

getUrlParamBoolByName

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.

Syntax

getUrlParamBoolByName(name: string)

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

<script type=”text/javascript” src=”/siteassets/scripts/pnp.js”></script>
<script type="text/javascript">
var param1;
var param2;
var param3;
var param4;
param1 = $pnp.util.getUrlParamBoolByName("param1");
param2 = $pnp.util.getUrlParamBoolByName("param2");
param3 = $pnp.util.getUrlParamBoolByName("param3");
param4 = $pnp.util.getUrlParamBoolByName("param4");
alert("Param1 is "+param1 +"\nParam2 is "+param2+"\nParam3 is "+param3+"\Param4 is "+param4);
</script>

 

stringInsert

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.

Syntax

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

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

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

dateAdd

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.

Syntax

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

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

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

Following example is written to add 10 days from the specified date.

<script type=”text/javascript” src=”/siteassets/scripts/pnp.js”></script>
<script type="text/javascript">
var date = new Date('2016-08-23 01:59:00');
var newDate = $pnp.util.dateAdd(date.toISOString(),"day",10);
alert(newDate);

</script>

loadStylesheet

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.

Syntax

loadStylesheet(path: string, avoidCache: boolean)

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

$pnp.util.loadStylesheet("/SiteAssets/css/customStyle.css");

getRandomString

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.

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789

Syntax

getRandomString(chars: number)

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

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

getGUID

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

Syntax

getGUID()

Following example shows us how to generate GUID from script.

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

 

isFunction

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.

Syntax

isFunction(candidateFunction: any)

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

<script type=”text/javascript” src=”/siteassets/scripts/pnp.js”></script>
<script type="text/javascript">
function testfn()
{
}
var funcTest = $pnp.util.isFunction(testfn);
alert(funcTest);
</script>

isArray

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.

Syntax

isArray(array: any)

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

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

stringIsNullOrEmpty

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

@param s- The string to test.

Syntax

stringIsNullOrEmpty(s: string)

Sample script is given below to check null or empty:

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

isUrlAbsolute

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.

Syntax

isUrlAbsolute(url: string)

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

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

makeUrlAbsolute

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.

Syntax

makeUrlAbsolute(url: string)

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

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

 

Conclusion

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.