Spfx webpart to show the list of all webparts

%3CLINGO-SUB%20id%3D%22lingo-sub-799800%22%20slang%3D%22en-US%22%3ESpfx%20webpart%20to%20show%20the%20list%20of%20all%20webparts%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-799800%22%20slang%3D%22en-US%22%3E%3CP%3EDear%20Experts%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20am%20struggling%20to%20fulfil%20my%20requirement%20is%20that%2C%20I%20need%20to%20create%20modern%20SharePoint%20client%20webpart%20(Spfx)%3C%2FP%3E%3CP%3EWhich%20renders%20the%20list%20of%20all%20webpart%2C%20that%20exists%20in%20the%20current%20page.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ECan%20anybody%20helps%20me%20out%20regarding%20he%20same.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks%3C%2FP%3E%3CP%3EAsesh%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-799911%22%20slang%3D%22en-US%22%3ERe%3A%20Spfx%20webpart%20to%20show%20the%20list%20of%20all%20webparts%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-799911%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F235568%22%20target%3D%22_blank%22%3E%40Asesh%20Kumar%20Maity%3C%2FA%3E%26nbsp%3BThe%20easiest%20method%20would%20be%20to%20use%20PnPJs%20Client-side%20page%20functionality.%20Check%20out%20the%20section%20on%20%22Find%20Controls%22%3CBR%20%2F%3E%3CBR%20%2F%3E%3CA%20href%3D%22https%3A%2F%2Fpnp.github.io%2Fpnpjs%2Fsp%2Fdocs%2Fclient-side-pages%2F%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fpnp.github.io%2Fpnpjs%2Fsp%2Fdocs%2Fclient-side-pages%2F%3C%2FA%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-799923%22%20slang%3D%22en-US%22%3ERe%3A%20Spfx%20webpart%20to%20show%20the%20list%20of%20all%20webparts%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-799923%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F39836%22%20target%3D%22_blank%22%3E%40Beau%20Cameron%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIs%20this%20pnpjs%20abblicable%20to%20classic%20sharepoint%20page%20in%20online%3F%3C%2FP%3E%3CP%3EMeans%20if%20I%20create%20a%20SPfx%20webpart%20using%20the%20pnp%2C%20is%20it%20valid%20in%20Classic%20SharePoint%20Page.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1028377%22%20slang%3D%22en-US%22%3ERe%3A%20Spfx%20webpart%20to%20show%20the%20list%20of%20all%20webparts%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1028377%22%20slang%3D%22en-US%22%3E%3CP%3EHi%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F235568%22%20target%3D%22_blank%22%3E%40Asesh%20Kumar%20Maity%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3Eno%2C%20you%20can't%20use%20in%20classic%20page.%3C%2FP%3E%3CP%3Ebtw%2C%20you%20can%20get%20all%20spfx%20webpart%20in%20a%20moder%20page%20using%20this%20method.%26nbsp%3B%3C%2FP%3E%3CP%3EIt%20require%20%3CA%20href%3D%22https%3A%2F%2Fpnp.github.io%2Fpnpjs%2F%22%20target%3D%22_self%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3EPnP%2FPnPJs%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-javascript%22%3E%3CCODE%3E%20%20public%20async%20GetAllWebpart()%3A%20Promise%3CANY%3E%20%7B%0A%20%20%20%20%2F%2F%20page%20file%0A%20%20%20%20const%20file%20%3D%20sp.web.getFileByServerRelativePath(this.context.pageContext.site.serverRequestPath)%3B%0A%20%20%20%20const%20page%20%3D%20await%20ClientSidePage.fromFile(file)%3B%0A%0A%20%20%20%20const%20wpData%3A%20any%5B%5D%20%3D%20%5B%5D%3B%0A%0A%20%20%20%20page.sections.forEach(section%20%3D%26gt%3B%20%7B%0A%20%20%20%20%20%20section.columns.forEach(column%20%3D%26gt%3B%20%7B%0A%20%20%20%20%20%20%20%20column.controls.forEach(control%20%3D%26gt%3B%20%7B%0A%20%20%20%20%20%20%20%20%20%20var%20wp%20%3D%20%7B%20text%3A%20control.data.webPartData.title%2C%20key%3A%20control.data.webPartData.instanceId%20%7D%3B%0A%20%20%20%20%20%20%20%20%20%20wpData.push(wp)%3B%0A%20%20%20%20%20%20%20%20%7D)%3B%0A%0A%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%7D)%3B%0A%20%20%20%20return%20wpData%3B%0A%20%20%7D%3C%2FANY%3E%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ECheers%2C%3C%2FP%3E%3CP%3EFederico%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1163605%22%20slang%3D%22en-US%22%3ERe%3A%20Spfx%20webpart%20to%20show%20the%20list%20of%20all%20webparts%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1163605%22%20slang%3D%22en-US%22%3EThe%20URL%20is%20updated%3A%20%3CA%20href%3D%22https%3A%2F%2Fpnp.github.io%2Fpnpjs%2Fsp%2Fclientside-pages%2F%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fpnp.github.io%2Fpnpjs%2Fsp%2Fclientside-pages%2F%3C%2FA%3E%3C%2FLINGO-BODY%3E
Highlighted
Contributor

Dear Experts,

 

I am struggling to fulfil my requirement is that, I need to create modern SharePoint client webpart (Spfx)

Which renders the list of all webpart, that exists in the current page.

 

Can anybody helps me out regarding he same.

 

Thanks

Asesh

4 Replies
Highlighted

@Asesh Kumar Maity The easiest method would be to use PnPJs Client-side page functionality. Check out the section on "Find Controls"

https://pnp.github.io/pnpjs/sp/docs/client-side-pages/

Highlighted

@Beau Cameron 

 

Is this pnpjs abblicable to classic sharepoint page in online?

Means if I create a SPfx webpart using the pnp, is it valid in Classic SharePoint Page.

 

Thanks

Highlighted

Hi @Asesh Kumar Maity 

no, you can't use in classic page.

btw, you can get all spfx webpart in a moder page using this method. 

It require PnP/PnPJs 

  public async GetAllWebpart(): Promise<any[]> {
    // page file
    const file = sp.web.getFileByServerRelativePath(this.context.pageContext.site.serverRequestPath);
    const page = await ClientSidePage.fromFile(file);

    const wpData: any[] = [];

    page.sections.forEach(section => {
      section.columns.forEach(column => {
        column.controls.forEach(control => {
          var wp = { text: control.data.webPartData.title, key: control.data.webPartData.instanceId };
          wpData.push(wp);
        });

      });
    });
    return wpData;
  }

 

Cheers,

Federico