SharePoint  

Mastering SharePoint Client-Side Pages with PnPjs in SPFx

Modern SharePoint pages are the foundation of engaging intranet experiences. They allow organizations to present information with rich layouts, web parts, and content that drive collaboration. For developers, being able to create, update, and manage client-side pages programmatically is a powerful capability, especially when building custom solutions in the SharePoint Framework (SPFx).

This is where PnPjs comes in. With its clean, fluent APIs, PnPjs simplifies working with client-side pages without requiring a deep dive into complex REST calls. In this article, we’ll explore how to leverage PnPjs in your SPFx solutions to automate page operations such as creating new pages, adding sections, and managing web parts.

Why Use PnPjs for Client-Side Pages?

While SharePoint REST APIs provide direct access to page data, they can be verbose and complex to use. PnPjs wraps these endpoints into a developer-friendly, strongly-typed API that integrates seamlessly with SPFx.

Key benefits include

  • 🚀 Simplicity: Fluent syntax reduces boilerplate code.

  • 📦 SPFx Integration: Works directly with the context of your web part or extension.

  • 🛠 Powerful API Coverage: Supports creation, updates, publishing, and manipulation of modern pages.

  • 🔄 Consistency: Reliable support for both on-prem and Microsoft 365 SharePoint environments.

Setting Up PnPjs in SPFx

First, ensure you have PnPjs installed in your SPFx project.

  
    npm install @pnp/sp @pnp/sp/presets/all

Initialize PnPjs in your web part.

  
    import { sp } from "@pnp/sp/presets/all";

export default class MyWebPart extends BaseClientSideWebPart<{}> {
  public onInit(): Promise<void> {
    return super.onInit().then(_ => {
      sp.setup({
        spfxContext: this.context,
      });
    });
  }
}

Working with Client-Side Pages

PnPjs exposes a client-side pages module that lets you manage modern SharePoint pages.

1. Import the Module

  
    import { sp } from "@pnp/sp/presets/all";
import { ClientsidePage, ClientsideText, ClientsideWebpart } from "@pnp/sp/clientside-pages";

2. Create a New Page

  
    const createPage = async () => {
  const page = await sp.web.addClientsidePage("DemoPage.aspx", "Demo Page Title");

  // Add a text section
  page.addSection().addControl(
    new ClientsideText("Welcome to our demo page created with PnPjs!")
  );

  // Save and publish
  await page.save();
  await page.publish();
  console.log("Page created successfully!");
};

✅ This creates a new modern page with a text control and publishes it.

3. Load an Existing Page

  
    const loadPage = async () => {
  const page = await ClientsidePage.fromFile(sp.web.getFileByServerRelativePath("/sites/dev/SitePages/DemoPage.aspx"));
  console.log("Page title:", page.title);
};

4. Add a Web Part to a Page

You can add custom or out-of-the-box web parts using their ID.

  
    const addWebPart = async () => {
  const page = await ClientsidePage.fromFile(sp.web.getFileByServerRelativePath("/sites/dev/SitePages/DemoPage.aspx"));

  const partDefs = await sp.web.getClientsideWebParts();
  const textPartDef = partDefs.find(p => p.Name === "Text");

  if (textPartDef) {
    const textWebPart = ClientsideWebpart.fromComponentDef(textPartDef);
    textWebPart.setProperties({ text: "Hello, this is a dynamic web part!" });
    page.addSection().addControl(textWebPart);

    await page.save();
    await page.publish();
  }
};

5. Update Page Properties

  
    const updatePage = async () => {
  const page = await ClientsidePage.fromFile(sp.web.getFileByServerRelativePath("/sites/dev/SitePages/DemoPage.aspx"));
  page.title = "Updated Demo Page Title";
  await page.save();
  await page.publish();
};

6. Delete a Page

  
    const deletePage = async () => {
  await sp.web.getFileByServerRelativePath("/sites/dev/SitePages/DemoPage.aspx").delete();
  console.log("Page deleted!");
};

Use Cases

Here are some scenarios where PnPjs client-side page APIs are very useful.

  • 📄 Automating site provisioning with pre-created pages.

  • ⚡ Rolling out consistent templates across multiple sites.

  • 🔍 Injecting analytics or reporting web parts dynamically.

  • 🏗 Building site migration or modernization tools.

Conclusion

Managing modern SharePoint pages is a crucial aspect of building robust intranet solutions. With PnPjs and SPFx, developers can efficiently automate page creation, updates, and customization without writing complex REST calls.

By mastering PnPjs’s client-side pages module, you can empower your SharePoint projects with scalable and maintainable solutions that deliver consistent user experiences.

Membership not found