PnP-JS-Core: Get SharePoint List full URL

Explains on how to get the full of a SharePoint List and List Collection using PnP JavaScript Library

PnP-JS-Core library contains the number of extensible methods and properties. By using that we can achieve the various actions in a simple code. To know more about this library component, visit the below links,

Simplified JavaScript Library for SharePoint

PnP-JS-Core Library

In one of my previous post “PnP-JS-Core: Get url from all lists from SharePoint Site“, you can get the code snippet used to get the default view URL of a list using PnP JavaScript library. But in this article I’ll show you how to get the full url (without view url) of a SharePoint List.

To get the full URL of a list is little bit tricky in REST API or PnP JavaScript Library(In future version, may be we will get separate property for this to achieve). Because we have to get the URLs from two object (Root Folder and Parent Web)  from the List and then merging those will provide the full URL of a list.

Example 1:

The below example returns the full  URL from the single list in a SharePoint Web using PnP JavaScript Library,

[code language=”javascript”]

//lists.getByTitle returns the List based on the given title input
//expand used to retrive addition properties from the provided objects
//select used to retrive only the value from specified property names

$pnp.sp.web.lists.getByTitle(‘<List Title>’).expand(‘RootFolder, ParentWeb’).select(‘Title,RootFolder/ServerRelativeUrl, ParentWeb/Url’).get().then(function(result) {
console.log(result.Title + ": " + result.ParentWeb.Url + result.RootFolder.ServerRelativeUrl);
});

[/code]

Example 2:

The below example returns the full  URL from all lists in a SharePoint Web using PnP JavaScript Library,

[code language=”javascript”]

//expand used to retrive addition properties from the provided objects
//select used to retrive only the value from specified property names

$pnp.sp.web.lists.expand(‘RootFolder, ParentWeb’).select(‘Title,RootFolder/ServerRelativeUrl, ParentWeb/Url’).get().then(function(result) {
for (var i = 0; i < result.length; i++) {
var list = result[i];
console.log(list.Title + ": " + list.ParentWeb.Url + list.RootFolder.ServerRelativeUrl);
}
});

[/code]

To run the above examples, we have the file dependencies, PnP.js, fetch.js and promise.js. Follow the below steps for executing the examples.

  1. Download Required files to use PnP-JS-Core library from the below links and upload that to Site Asstes or Style Library
    • Download pnp.js  PnP JS file
    • Download fetch.js Used by PnP js file to handle web requests and responses (Required in IE)
    • Download promise.js Used by PnP js file to handle web requests and responses (Required in IE)
  2. Create new web part page and insert Content Editor web part
  3. Create a sample.html file in Site Assets or Style library and insert the example code snippet

    [code language=”javascript”]

    <script type="text/javascript" src="/siteassets/scripts/fetch.js"></script>
    <script type="text/javascript" src="/siteassets/scripts/promise.min.js"></script>
    <script type="text/javascript" src="/siteassets/scripts/pnp.min.js"></script>

    <script type="text/javascript">
    // Insert PnP example script
    </script>

    [/code]

  4. Add the URL of sample.html file to the content editor web part
  5. Click ok to apply the changes to the web part and save the page.
Shantha Kumar
Shantha Kumar
Articles: 278

24,849 Comments

  1. result.ParentWeb.Url + result.RootFolder.ServerRelativeUrl.
    Returns two times the base address if you are not on the root site collection.

Comments are closed.