Configuration for SPFX Extensions

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 ...