Configuration for SPFX Extensions

%3CLINGO-SUB%20id%3D%22lingo-sub-991300%22%20slang%3D%22en-US%22%3EConfiguration%20for%20SPFX%20Extensions%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-991300%22%20slang%3D%22en-US%22%3E%3CP%3EHi%20Community%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI'm%20preparing%20to%20develop%20a%20SPFX%20extension%20that%20will%20add%20buttons%20to%20the%20commandbar%20and%20context-menu.%20However%20-%20I%20would%20need%20to%20configure%20the%20actual%20actions%20that%20are%20being%20executed.%20So%20far%20I%20have%20stored%20my%20configs%20for%20such%20buttons%20always%20using%20custom-action-properties.%20But%20this%20works%20best%20at%20design-time%20-%20but%20now%20I%20need%20some%20way%20to%20create%20a%20UI%20to%20enable%20users%20to%20set%20some%20configuration-values.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EWhat%20would%20be%20the%20beast%20way%20to%20create%20such%20a%20config%20UI%3F%20With%20the%20traditional%20app-model%20I%20would%20create%20a%20sharepoint-hosted%20app%20and%20store%20those%20settings%20in%20the%20app-web%20...%20but%20I%20think%20this%20will%20not%20be%20the%20way%20to%20go%20in%20the%20future%20...%20any%20hints%2Fideas%2Fsuggestions%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-991300%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-994041%22%20slang%3D%22en-US%22%3ERe%3A%20Configuration%20for%20SPFX%20Extensions%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-994041%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%2F2725%22%20target%3D%22_blank%22%3E%40Henning%20Eiben%3C%2FA%3E%26nbsp%3B%2C%3C%2FP%3E%3CP%3Eyou%20could%20use%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fpnp.github.io%2Fpnpjs%2Fconfig-store%2Fdocs%2Fproviders%2F%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fpnp.github.io%2Fpnpjs%2Fconfig-store%2Fdocs%2Fproviders%2F%3C%2FA%3E%26nbsp%3Band%20access%20using%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fpnp.github.io%2Fpnpjs%2Fconfig-store%2Fdocs%2Fconfiguration%2F%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fpnp.github.io%2Fpnpjs%2Fconfig-store%2Fdocs%2Fconfiguration%2F%3C%2FA%3E.%20Basically%20it%20is%20a%20SharePoint%20list%20based%20solution%20%3A)%3C%2Fimg%3E%3C%2FP%3E%3CP%3EIs%20it%20useful%20in%20you%20case%3F%3C%2FP%3E%3CP%3ECheers%2C%3C%2FP%3E%3CP%3EFederico%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-995348%22%20slang%3D%22en-US%22%3ERe%3A%20Configuration%20for%20SPFX%20Extensions%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-995348%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F138334%22%20target%3D%22_blank%22%3E%40Federico%20Porceddu%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThis%20is%20somehting%20I%20was%20thinking%20of%20as%20well%20-%20I'm%20just%20wondering%3A%20how%20would%20I%20interact%20with%20the%20data%20in%20the%20list%3F%20I%20write%20the%20data%20directly%20into%20the%20list%2C%20or%20I%20would%20need%20to%20create%20a%20custom%20webpart%20that%20could%20write%20to%20the%20list%20and%20make%20the%20list%20hidden.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EBack%20in%20the%20on-prem-days%20I%20would%20create%20a%20new%20section%20within%20the%20site-actions%20with%20a%20link%20to%20a%20config%20page%20-%20I%20guess%20something%20like%20this%20is%20not%20the%20way%20to%20go%20anymore%20...%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-995890%22%20slang%3D%22en-US%22%3ERe%3A%20Configuration%20for%20SPFX%20Extensions%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-995890%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%2F2725%22%20target%3D%22_blank%22%3E%40Henning%20Eiben%3C%2FA%3E%26nbsp%3B%2C%3C%2FP%3E%3CP%3Ethis%20conversation%20is%20interesting%20%3A)%3C%2Fimg%3E%3C%2FP%3E%3CP%3EWell%2C%20after%20list%20configuration%2C%20you%20can%20realize%20a%20webpart%2C%20and%20put%20it%20inside%20a%20%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fsharepoint%2Fdev%2Fspfx%2Fweb-parts%2Fsingle-part-app-pages%22%20target%3D%22_self%22%20rel%3D%22noopener%20noreferrer%22%3ESingle%20part%20app%20page%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3Eso%20you%20can%20put%20your%20webpart%20in%20a%20page%2C%20and%20turn%20it%20in%20something%20like%20application%20page.%3C%2FP%3E%3CP%3EWhat%20do%20you%20think%20about%20%3F%3C%2FP%3E%3CP%3ECheers%2C%3C%2FP%3E%3CP%3EFederico%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1000352%22%20slang%3D%22en-US%22%3ERe%3A%20Configuration%20for%20SPFX%20Extensions%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1000352%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F138334%22%20target%3D%22_blank%22%3E%40Federico%20Porceddu%3C%2FA%3E%26nbsp%3Byeah%2C%20that%20was%20what%20I%20was%20thinking%20of.%20The%20only%20thing%20I%20don't%20like%20that%20much%20is%20the%20fact%2C%20that%20I%20(as%20a%20user)%20would%20have%20to%20create%20a%20page%20and%20add%20a%20webpart%20to%20it%2C%20just%20to%20configure%20my%20commands.%20I'm%20wondering%20if%20there%20would%20be%20any%20other%20way%20to%20make%20such%20configurations%20accessable%20...%3C%2FP%3E%3C%2FLINGO-BODY%3E
New Contributor

Hi Community,

 

I'm preparing to develop a SPFX extension that will add buttons to the commandbar and context-menu. However - I would need to configure the actual actions that are being executed. So far I have stored my configs for such buttons always using custom-action-properties. But this works best at design-time - but now I need some way to create a UI to enable users to set some configuration-values.

 

What would be the beast way to create such a config UI? With the traditional app-model I would create a sharepoint-hosted app and store those settings in the app-web ... but I think this will not be the way to go in the future ... any hints/ideas/suggestions?

4 Replies

Hi @Henning Eiben ,

you could use https://pnp.github.io/pnpjs/config-store/docs/providers/ and access using https://pnp.github.io/pnpjs/config-store/docs/configuration/. Basically it is a SharePoint list based solution :)

Is it useful in you case?

Cheers,

Federico

@Federico Porceddu 

This is somehting I was thinking of as well - I'm just wondering: how would I interact with the data in the list? I write the data directly into the list, or I would need to create a custom webpart that could write to the list and make the list hidden.

 

Back in the on-prem-days I would create a new section within the site-actions with a link to a config page - I guess something like this is not the way to go anymore ...

Hi @Henning Eiben ,

this conversation is interesting :)

Well, after list configuration, you can realize a webpart, and put it inside a Single part app page 

so you can put your webpart in a page, and turn it in something like application page.

What do you think about ?

Cheers,

Federico

@Federico Porceddu yeah, that was what I was thinking of. The only thing I don't like that much is the fact, that I (as a user) would have to create a page and add a webpart to it, just to configure my commands. I'm wondering if there would be any other way to make such configurations accessable ...