1

I am trying to create a sharepoint page that contains a webpart which contains some text and images. I am trying to do this using pnp/js. I have been able to create a page using pnp/js, but I can not determine how to create the webpart with the text and images. If you can give me some pointers that would be greatly appreciated.

0

At first, you have to create custom SharePoint Framework(SPFx) webpart where you can write code for the text and images. Then you can add this webpart in your page. Below is the code how you can add webpart in a page using pnpjs:

import {
    sp,
    ClientSideWebpart,
    ClientSideWebpartPropertyTypes,
} from "@pnp/sp";

// this will be a ClientSidePageComponent array
// this can be cached on the client in production scenarios
const partDefs = await sp.web.getClientSideWebParts();

// find the definition we want, here by id
const partDef = partDefs.filter(c => c.Id === "490d7c76-1824-45b2-9de3-676421c997fa");

// optionally ensure you found the def
if (partDef.length < 1) {
    // we didn't find it so we throw an error
    throw new Error("Could not find the web part");
}

// create a ClientWebPart instance from the definition
const part = ClientSideWebpart.fromComponentDef(partDef[0]);

// set the properties on the web part. Here we have imported the ClientSideWebpartPropertyTypes module and can use that to type
// the available settings object. You can use your own types or help us out and add some typings to the module :).
// here for the embed web part we only have to supply an embedCode - in this case a youtube video.
part.setProperties<ClientSideWebpartPropertyTypes.Embed>({
    embedCode: "https://www.youtube.com/watch?v=IWQFZ7Lx-rg",
});

// we add that part to a new section
page.addSection().addControl(part);

// save our content changes back to the server
await page.save();

References link


If the answer is helpful, please upvote and mark as accepted.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.