Working With: Webs

Webs are one of the fundamental entry points when working with SharePoint. Webs serve as a container for lists, features, sub-webs, and all of the entity types.

Add a Web

Using the library you can add a web to another web's collection of subwebs. The basic usage requires only a title and url. This will result in a team site with all of the default settings.

import pnp, { WebAddResult } from "sp-pnp-js";

pnp.sp.web.webs.add("title", "subweb1").then((w: WebAddResult) => {

    // show the response from the server when adding the web
    console.log(w.data);

    w.web.select("Title").get().then(w => {

        // show our title
        console.log(w.Title);
    });
});

You can also provide other settings such as description, template, language, and inherit permissions.

import pnp, { WebAddResult } from "sp-pnp-js";

// create a German language wiki site with title, url, description, which inherits permissions
pnp.sp.web.webs.add("wiki", "subweb2", "a wiki web", "WIKI#0", 1031, true).then((w: WebAddResult) => {

    // show the response from the server when adding the web
    console.log(w.data);

    w.web.select("Title").get().then(w => {

        // show our title
        console.log(w.Title);
    });
});

Get A Web's properties

import pnp from "sp-pnp-js";

// basic get of the webs properties
pnp.sp.web.get().then(w => {

    console.log(w.Title);
});

// use odata operators to get specific fields
pnp.sp.web.select("Title").get().then(w => {

    console.log(w.Title);
});

// use with a simple getAs to give the result a type
pnp.sp.web.select("Title").getAs<{ Title: string }>().then(w => {

    console.log(w.Title);
});

Get Complex Properties

Some properties, such as AllProperties, are not returned by default. You can still access them using the expand operator.

import pnp from "sp-pnp-js";

pnp.sp.web.select("AllProperties").expand("AllProperties").get().then(w => {

    console.log(w.AllProperties);
});

Get a Web Directly

You can also use the Web object directly to get any web, though of course the current user must have the necessary permissions. This is done by importing the web object.

import { Web } from "sp-pnp-js";

let web = new Web("https://my-tenant.sharepoint.com/sites/mysite");

web.get().then(w => {

    console.log(w);
});

Open Web By Id

Added in 2.0.5

Support for the open web by id method of site was added in 2.0.5. Because this method is a POST request you can chain off it directly. You will get back the full web properties in the data property of the return object. You can also chain directly off the returned Web instance on the web property.

pnp.sp.site.openWebById("111ca453-90f5-482e-a381-cee1ff383c9e").then(w => {

    //we got all the data from the web as well
    console.log(w.data);

    // we can chain
    w.web.select("Title").get().then(w2 => {
        // ...
    });
});

Update Web Properties

You can update web properties using the update method. The properties available for update are listed in this table. Updating is a simple as passing a plain object with the properties you want to update.

import { Web } from "sp-pnp-js";

let web = new Web("https://my-tenant.sharepoint.com/sites/mysite");

web.update({
    Title: "New Title",
    CustomMasterUrl: "{path to masterpage}",
    Description: "My new description",
}).then(w => {

    console.log(w);
});

Delete a Web

import { Web } from "sp-pnp-js";

let web = new Web("https://my-tenant.sharepoint.com/sites/mysite");

web.delete().then(w => {

    console.log(w);
});