SOLVED

SPFx webpart - Custom group name

%3CLINGO-SUB%20id%3D%22lingo-sub-115385%22%20slang%3D%22en-US%22%3ESPFx%20webpart%20-%20Custom%20group%20name%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-115385%22%20slang%3D%22en-US%22%3E%3CP%3EHi%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI've%20created%20an%20SPFx%20webpart%20and%20I'm%20struggling%20to%20add%20it%20to%20a%20group%20with%20a%20new%20name.%20I%20believe%20it's%20the%20preconfiguredEntries%20where%20I%20configure%20this.%20I've%20read%20the%20documentation%20here%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fsharepoint%2Fdev%2Fspfx%2Fweb-parts%2Fguidance%2Fsimplify-adding-web-parts-with-preconfigured-entries%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fsharepoint%2Fdev%2Fspfx%2Fweb-parts%2Fguidance%2Fsimplify-adding-web-parts-with-preconfigured-entries%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20tried%20the%20following%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%3E%22preconfiguredEntries%22%3A%20%5B%7B%0A%20%20%22groupId%22%3A%20%22%26lt%3Bgenerated%20a%20new%20GUID%26gt%3B%22%2C%0A%20%20%22group%22%3A%20%7B%0A%20%20%20%20%22default%22%3A%20%22%26lt%3Bnew%20group%20name%26gt%3B%22%0A%20%20%7D%2C%0A...%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThe%20above%20did%20not%20work.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ECould%20someone%20please%20provide%20and%20example%20of%20creating%20a%20custom%20group%20name%20for%20the%20webpart%3F%20Also%2C%20should%20I%20expect%20the%20group%20name%20to%20be%20displayed%2C%20or%20is%20it%20just%20used%20for%20grouping%20webparts%3F%20Finally%2C%20if%20the%20group%20name%20is%20displayed%2C%20would%20I%20see%20it%20in%20the%20workbench%3F%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-236319%22%20slang%3D%22en-US%22%3ERe%3A%20SPFx%20webpart%20-%20Custom%20group%20name%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-236319%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F180036%22%20target%3D%22_blank%22%3E%40Marco%20Borzi%3C%2FA%3EThanks%20for%20the%20reply.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-236299%22%20slang%3D%22en-US%22%3ERe%3A%20SPFx%20webpart%20-%20Custom%20group%20name%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-236299%22%20slang%3D%22en-US%22%3EHi%20if%20you%20want%20to%20know%2C%20for%20me%20worked%3A%3CBR%20%2F%3E%22groupId%22%3A%20%225c03119e-3074-46fd-976b-c60198311f70%22%2C%3CBR%20%2F%3E%22group%22%3A%20%7B%3CBR%20%2F%3E%22default%22%3A%20%22Hello%20Word!%22%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%3CBR%20%2F%3Ehope%20it%20help%20someone!%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-129711%22%20slang%3D%22en-US%22%3ERe%3A%20SPFx%20webpart%20-%20Custom%20group%20name%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-129711%22%20slang%3D%22en-US%22%3E%3CP%3EHi%20%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F9907%22%20target%3D%22_blank%22%3E%40Joel%20Rodrigues%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks%20for%20pointing%20me%20at%20the%20video.%20It's%20clear%20the%20functionality%20is%20not%20there%20yet.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EAlan%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-129706%22%20slang%3D%22en-US%22%3ERe%3A%20SPFx%20webpart%20-%20Custom%20group%20name%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-129706%22%20slang%3D%22en-US%22%3E%3CP%3EHi%20%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F9907%22%20target%3D%22_blank%22%3E%40Joel%20Rodrigues%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI'm%20targeting%20the%20modern%20experience.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EAlan%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-127943%22%20slang%3D%22en-US%22%3ERe%3A%20SPFx%20webpart%20-%20Custom%20group%20name%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-127943%22%20slang%3D%22en-US%22%3EOw%20it%20is%20indeed%20not%20yet%20available.%20Thank%20you%20very%20much%20to%20look%20out%20for%20a%20solution%20and%20explanation.%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-127616%22%20slang%3D%22en-US%22%3ERe%3A%20SPFx%20webpart%20-%20Custom%20group%20name%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-127616%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F25364%22%20target%3D%22_blank%22%3E%40Alan%20Trafford%3C%2FA%3E%2C%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F28197%22%20target%3D%22_blank%22%3E%40Yannick%20Borghmans%3C%2FA%3E%2C%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F87963%22%20target%3D%22_blank%22%3E%40Lee%20Hoffner%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ECheck%20out%20this%26nbsp%3B%3CA%20title%3D%22YouTube%22%20href%3D%22https%3A%2F%2Fyoutu.be%2F3Ga_LFr7Wlc%3Ft%3D16m5s%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3EYouTube%3C%2FA%3E%26nbsp%3Bvideo%26nbsp%3B(starting%20time%20set%20to%20the%20correct%20moment)%26nbsp%3B%3CSPAN%3Epublished%26nbsp%3Bsome%20hours%20ago%26nbsp%3Bwhere%20you%20can%20confirm%20that%20this%20functionality%20is%20not%20yet%20available%20%3A)%3C%2Fimg%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EJoel%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-127606%22%20slang%3D%22en-US%22%3ERe%3A%20SPFx%20webpart%20-%20Custom%20group%20name%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-127606%22%20slang%3D%22en-US%22%3E%3CP%3EI'm%26nbsp%3Bfollowing%20you%20know...just%20quickly%20tried%20it%20on%20Office%20365%20workbench%20and%20had%20the%20same%20issues.%20It's%20either%20a%20bug%2C%20functionality%20yet%20to%20be%20released%20in%20the%20future%20(maybe%20for%20the%20new%20web%20part%20picker%3F)%2C%20or%20the%20usage%20should%20be%20simpler%20or%20better%20documented%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20would%20recommend%20that%20you%20search%20the%20issues%20list%20on%20the%20following%20GitHub%20repo%20and%20add%20a%20new%20entry%20if%20you%20can't%20find%20the%20issue%20there%3A%3C%2FP%3E%3CP%3E%3CA%20title%3D%22https%3A%2F%2Fgithub.com%2FSharePoint%2Fsp-dev-docs%22%20href%3D%22https%3A%2F%2Fgithub.com%2FSharePoint%2Fsp-dev-docs%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2FSharePoint%2Fsp-dev-docs%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThere%20is%20a%20large%20number%20of%20items%20there%20so%20don't%20be%20surprised%20if%20it%20takes%20some%20days%20to%20get%20an%20answer%20back.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-127591%22%20slang%3D%22en-US%22%3ERe%3A%20SPFx%20webpart%20-%20Custom%20group%20name%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-127591%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%2F28197%22%20target%3D%22_blank%22%3E%40Yannick%20Borghmans%3C%2FA%3E%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EWhen%20you%20open%20the%20web%20part%20picker%20on%20a%20modern%20page%2C%20do%20you%20see%20out-of-the-box%20web%20parts%20grouped%20into%20different%20groups%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-127542%22%20slang%3D%22en-US%22%3ERe%3A%20SPFx%20webpart%20-%20Custom%20group%20name%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-127542%22%20slang%3D%22en-US%22%3EFor%20me%20it%20is%20in%20Modern%2C%20in%20Classic%20it%20indeed%20works%20like%20it%20should..%3CBR%20%2F%3EDo%20you%20got%20any%20reference%20for%20that%20quote%20of%20not%20yet%20working%20in%20modern%3F%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-127501%22%20slang%3D%22en-US%22%3ERe%3A%20SPFx%20webpart%20-%20Custom%20group%20name%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-127501%22%20slang%3D%22en-US%22%3E%3CP%3EHi%20%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F25364%22%20target%3D%22_blank%22%3E%40Alan%20Trafford%3C%2FA%3E%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EAre%20you%20targeting%20modern%20or%20classic%20experience%3F%3C%2FP%3E%3CP%3EAt%20the%20moment%2C%20the%26nbsp%3Bworkbench%20does%20not%20group%20the%20web%20parts%20and%20all%20are%20listed%20under%20the%20%22Featured%22%20category%2Fgroup%20I%26nbsp%3Bbelieve.%20A%20new%20web%20part%20picker%20may%20be%20coming%20soon%20to%20allow%20grouping.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EJoel%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-127481%22%20slang%3D%22en-US%22%3ERe%3A%20SPFx%20webpart%20-%20Custom%20group%20name%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-127481%22%20slang%3D%22en-US%22%3E%3CP%3EUnfortunately%2C%20I%20have%20the%20same%20issue%20over%20here.%3CBR%20%2F%3EI%20already%20tried%20the%20following%20things%3A%3C%2FP%3E%3CUL%3E%3CLI%3Eremoving%20groupID%20(%3D%26gt%3B%20error%20it%20is%20expecting%20the%20field%2Fproperty)%3C%2FLI%3E%3CLI%3EgroupID%3Anull%20(%3D%26gt%3B%20error%20since%20it%20required%20to%20have%20a%20value)%3C%2FLI%3E%3CLI%3EgroupID%20%3A%20%22%22%20(%3D%26gt%3B%20error%20since%20it%20seems%20to%20be%20internally%20parsed%20to%20a%20guid)%3C%2FLI%3E%3CLI%3Enew%20guid%20for%20groupID%3C%2FLI%3E%3C%2FUL%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EAll%20of%20the%20above%20with%20the%20group%20property%3A%3C%2FP%3E%3CPRE%3E%22group%22%3A%20%7B%0A%20%20%20%20%22default%22%3A%20%22%26lt%3Bnew%20group%20name%26gt%3B%22%0A%20%20%7D%2C%3C%2FPRE%3E%3CP%3E%26nbsp%3BThe%20'docs.microsoft.com'-documentation%20seems%20to%20be%20clear%2C%20but%20it%20simply%20doesn't%20work%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CTABLE%3E%3CTBODY%3E%3CTR%3E%3CTD%3EgroupId%3C%2FTD%3E%3CTD%3Estring%3C%2FTD%3E%3CTD%3Eyes%3C%2FTD%3E%3CTD%3EThe%20group%20id%20determines%20which%20toolbox%20group%20will%20contain%20the%20web%20part.%20The%20SharePoint%20Framework%20reserves%20group%20ids%20for%20default%20groups.%20The%20developer%20can%20pick%20one%20of%20those%20groups.%20If%20a%20group%20id%20is%20specified%2C%20then%20the%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CSTRONG%3Egroup%3C%2FSTRONG%3E%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3Eproperty%20will%20be%20ignored.%20Alternatively%2C%20the%20developer%20can%20pick%20a%20completely%20unique%20id%20and%20a%20group%20name.%20The%20toolbox%20will%20then%20show%20the%20web%20part%20in%20its%20own%20group.%3C%2FTD%3E%3CTD%3E%22groupId%22%3A%20%226737645a-4443-4210-a70e-e5e2a219133a%22%3C%2FTD%3E%3C%2FTR%3E%3CTR%3E%3CTD%3Egroup%3C%2FTD%3E%3CTD%3EILocalizedString%3C%2FTD%3E%3CTD%3Eno%3C%2FTD%3E%3CTD%3EThe%20name%20of%20the%20group%20in%20the%20toolbox%20in%20which%20the%20web%20part%20will%20be%20displayed.%20If%20no%20value%20is%20provided%2C%20then%20the%20web%20part%20will%20be%20displayed%20in%20the%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CSTRONG%3ECustom%3C%2FSTRONG%3E%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3Egroup.%3C%2FTD%3E%3CTD%3E%22group%22%3A%20%7B%20%22default%22%3A%20%22Content%22%2C%20%22nl-nl%22%3A%20%22Inhoud%22%20%7D%3C%2FTD%3E%3C%2FTR%3E%3C%2FTBODY%3E%3C%2FTABLE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ESo%20it's%20definitely%20good%20to%20bring%20this%20topic%20under%20attention.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-117256%22%20slang%3D%22en-US%22%3ERe%3A%20SPFx%20webpart%20-%20Custom%20group%20name%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-117256%22%20slang%3D%22en-US%22%3E%3CP%3ESeven%20days%20and%20no%20one%20cares%20to%20respond%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20have%20followed%20the%20same%20steps%20as%20the%20OP%20with%20the%20same%20result.%20If%20anyone%20knows%20the%20answer%2C%20please%20share.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-807609%22%20slang%3D%22en-US%22%3ERe%3A%20SPFx%20webpart%20-%20Custom%20group%20name%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-807609%22%20slang%3D%22en-US%22%3EI'm%20kind%20of%20shocked%20we%20still%20can't%20add%20custom%20groups.%3C%2FLINGO-BODY%3E
Highlighted
Contributor

Hi

 

I've created an SPFx webpart and I'm struggling to add it to a group with a new name. I believe it's the preconfiguredEntries where I configure this. I've read the documentation here:

 

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/guidance/simplify-adding-web-parts-wi...

 

I tried the following:

 

"preconfiguredEntries": [{
  "groupId": "<generated a new GUID>",
  "group": {
    "default": "<new group name>"
  },
...

 

The above did not work.

 

Could someone please provide and example of creating a custom group name for the webpart? Also, should I expect the group name to be displayed, or is it just used for grouping webparts? Finally, if the group name is displayed, would I see it in the workbench?

 

Thanks.

13 Replies
Highlighted

Seven days and no one cares to respond?

 

I have followed the same steps as the OP with the same result. If anyone knows the answer, please share.

 

 

Highlighted

Unfortunately, I have the same issue over here.
I already tried the following things:

  • removing groupID (=> error it is expecting the field/property)
  • groupID:null (=> error since it required to have a value)
  • groupID : "" (=> error since it seems to be internally parsed to a guid)
  • new guid for groupID

 

All of the above with the group property:

"group": {
    "default": "<new group name>"
  },

 The 'docs.microsoft.com'-documentation seems to be clear, but it simply doesn't work:

 

groupIdstringyesThe group id determines which toolbox group will contain the web part. The SharePoint Framework reserves group ids for default groups. The developer can pick one of those groups. If a group id is specified, then the group property will be ignored. Alternatively, the developer can pick a completely unique id and a group name. The toolbox will then show the web part in its own group."groupId": "6737645a-4443-4210-a70e-e5e2a219133a"
groupILocalizedStringnoThe name of the group in the toolbox in which the web part will be displayed. If no value is provided, then the web part will be displayed in the Custom group."group": { "default": "Content", "nl-nl": "Inhoud" }

 

So it's definitely good to bring this topic under attention.

Highlighted

Hi @Alan Trafford,

 

Are you targeting modern or classic experience?

At the moment, the workbench does not group the web parts and all are listed under the "Featured" category/group I believe. A new web part picker may be coming soon to allow grouping.

 

Joel

Highlighted
For me it is in Modern, in Classic it indeed works like it should..
Do you got any reference for that quote of not yet working in modern?
Highlighted

Hi @Yannick Borghmans,

 

When you open the web part picker on a modern page, do you see out-of-the-box web parts grouped into different groups?

Highlighted

I'm following you know...just quickly tried it on Office 365 workbench and had the same issues. It's either a bug, functionality yet to be released in the future (maybe for the new web part picker?), or the usage should be simpler or better documented

 

I would recommend that you search the issues list on the following GitHub repo and add a new entry if you can't find the issue there:

https://github.com/SharePoint/sp-dev-docs

 

There is a large number of items there so don't be surprised if it takes some days to get an answer back.

Highlighted
Best Response confirmed by Alan Trafford (Contributor)
Solution

@Alan Trafford@Yannick Borghmans@Lee Hoffner

 

Check out this YouTube video (starting time set to the correct moment) published some hours ago where you can confirm that this functionality is not yet available :)

 

Joel

PnP Webcast around the different options for defining an icon for your SharePoint Framework client-side web part, which would be visible in the web part picker.
Highlighted
Ow it is indeed not yet available. Thank you very much to look out for a solution and explanation.
Highlighted

Hi @Joel Rodrigues

 

I'm targeting the modern experience.

 

Alan

Highlighted

Hi @Joel Rodrigues

 

Thanks for pointing me at the video. It's clear the functionality is not there yet.

 

Alan

Highlighted
Hi if you want to know, for me worked:
"groupId": "5c03119e-3074-46fd-976b-c60198311f70",
"group": {
"default": "Hello Word!"
},

hope it help someone!
Highlighted

@Marco BorziThanks for the reply.

Highlighted
I'm kind of shocked we still can't add custom groups.