Pnpjs: Unable to add "News" webpart programatically in modern page.

[pavan2920]

Hi Team,

I am trying to add the default News webpart in the modern page but unable to get the webpart.

By debugging i got the default id for "News" webpart - "8c88f208-6c77-4bdb-86a0-0c47b4316588"

When i try to find this id in the available web parts using below code, i am unable to find the same.
const partDefs = await mySP.web.getClientSideWebParts();

Could any one help me.

Thanks & Regards,
Pavan.

[koltyakov]

Hey @pavan2920,

The simplest approach is:

• Create webpart manually
• Configure it with settings you need
• Switch to ?maintenancemode=true
• Check parameters, tweak them for your case

Then with PnPjs:

import { sp, ClientSidePage, ClientSideWebpart } from '@pnp/sp';

(async () => {

  // Create new page
  const page = await sp.web.addClientSidePage('News.aspx', 'Sample News Rollup Page');

  // Getting existing page
  // const webUri = `get from SPFx context or somehow`;
  // const pageFile = sp.web.getFileByServerRelativeUrl(`${webUri}/SitePages/News.aspx`);
  // const page = await ClientSidePage.fromFile(pageFile);

  page.sections = [];
  const section = page.addSection();

  // News webpart
  section.addControl(
    new ClientSideWebpart('News', null, {
      carouselSettings: {
        autoplay: false,
        autoplaySpeed: 5,
        dots: true,
        lazyLoad: true,
        metadata: true,
        swipe: true
      },
      showChrome: true,
      layoutId: 'FeaturedNews', // 'NewsHub',
      prefetchCount: 12,
      newsDataSourceProp: 2,
      dataProviderId: 'viewCounts',
      renderItemsSliderValue: 4
    }, '8c88f208-6c77-4bdb-86a0-0c47b4316588')
  );

  await page.save();

})()
  .then(_ => console.log('Done'))
  .catch(console.log);

Cheers!

[patrick-rodgers]

Going to close this as answered, please _reopen_ if you need to continue the conversation. Thanks!

[pavan2920]

Hi @koltyakov, That's really great solution.
This helped me in tweak other webpart as well :)