SPFx Client-Side Provisioning with Composable Actions

Added: 2026-05-07

[00:00:03]So I'm Fab Franczini. I'm Microsoft MVP on uh  Microsoft development and today I want to show you one project that we build internally in  my company uh to resolve uh the client side provisioning problem in SharePoint framework. So  first of all uh why uh the provision is still a friction point in SharePoint framework.  uh when we create SharePoint web art or application inside SharePoint uh with Sharepoint  framework um probably we need to create some list for storage or we need to change something like  add column on the default libraries and so on.

[00:00:43]Uh the problem is that we don't have an uh good  way to uh automate uh this inside the client side uh project that you are already created on  SharePoint framework. Of course we have some great options like uh the PMP provisioning is  the most uh important way to to make an provision inside Microsoft 365. But uh this uh this way  uh that is very uh wholesome have a big problem uh we need to have an entry ID app registration.  So um in a consultancy company like uh like UPV uh sometimes we have problem to the customer to  uh to ask to register an entry application for use the PMP provisioning. So the idea is that the PMP  provisioning it's outside the scope of Sharepoint framework and every time we need to ask and then  get an approval to uh create an uh enter the application do the deployment and so on. So it's  powerful but uh have this uh uh this requirement.

[00:01:51]The second way of course is to use the default  um capability of SharePoint uh that it's the site designer site script. Uh this is very interesting  because uh uh have a declarative model based on JSON of course uh you can define a lot of actions.  Uh but again one of the big problem is that you need to deploy at the tenant level script and  then when you have deployed you you are able to uh invoke by API or manually inside sharepoint  to apply specific template like create lists and so on. Uh this could be another problem because  if uh I want to install on a web part inside on a specific site and deploy some list for example  inside that site uh we need to deploy first with the sites design the script um the the script at  the tenant level. again uh this require more um permissions that probably the customer don't have  or need to ask to the uh admins to to do this. So we start to think on a different approach. uh we  create internally on a library based on Sharepoint framework of course to do this completely um  completely in the client side and with uh the delegate permission. So uh this mean that every  part of the provisioning works with the permission of the user. Uh this is great because uh when  I install on a web part inside on a on a site uh probably I'm the owner or the admin of the site  and then I'm able to create lists and everything inside that site. Uh it's declarative later I  show you it's based on on a JSON and this is very very close to the site designer site scripts.  uh the idea is to design uh an AJSON with all the actions. I'm able to put uh the uh correct order  of the action to do the provisioning. It's B it's a schema first validation. So we have validation  on that and uh uh the another cool thing is the ability to make an compliance check to uh to view  if uh the the model the the provisioning schema is already deployed or it's partially deployed or  need to be applied. The core of this library it's uh based on uh PMPJS. So every operation that we  made um in this library is based on PMPJS before we use Z v4 just to uh validate the schema and  uh the execution model is based on shared scope.

[00:04:41]This mean that every action u in the scope from  the previous one. uh this mean that for example uh if I need to create an list and then add  some um fields for example to the list uh the scope of the list it's shared with the uh  child actions uh and so on. So this is very um this is very interesting and very powerful.  Um the idea of the process it's we take the plan uh the JSON uh ski the JSON payload we validate  with our schema we start to uh execute the action every action are able to um enrich the scope and  then uh we are able to um to run the sub action for for each actions. The library contains some  components. uh the main components it's the uh provisioning dialogue. It's based on fluent UI  9 uh and is the visual orchestrator of uh the provisioning. Of course, we have uh internally uh  exposed the the the class of the engine of course uh you can invoke manually but in the context of  SharePoint when we use React for example it's very uh powerful to use on a component to do that.  So we have the uh provisioning dialogue um later I show you in a demo. We have uh two property  pane components. One is uh the uh provisioning field component that uh use internally the  provisioning dialogue and the hooks to do uh the works and we added a uh property pane site  selector field that basically it's on a simple site selector. In this way, I'm able to work on  the current site or we can switch on the app site uh of of this site or on a specific site uh that  I'm able to search. If you don't want to use the dialogue or the fields, of course, you can  reuse uh use the reacts that we uh created. So uh we have the use SPFX provisioning engine that  internally use the real provisioning engine made it in in in Typescript or uh maybe uh and you  can use the uh provisioning derivate state that it's a simple hook that transform the snapshot  of the engine for each section and transform uh this uh snapshot into an friendly uh UI derived  state. So this is very very cool. Um this is the payload. This is an simple version of the payload  and it's very very close to the site script. You can see uh the schema version, the version of uh  uh the payload, the title uh we can define uh the actions. You can more uh than one of course uh  for each action we have on a specific verb and for each action we can have some sub actions. This  mean that we can have an action for modify an SP site like for example the title if I define the  property on description and so on and then we can create for that site the list and for that list we  can create for example add SP field or enable the rating for that list. Currently uh we have some uh  actions uh we are creating some action for create spite modify spite delete site we can action  specific for list and we have uh action specific for fields that is mean uh not only uh fields for  uh list like add SP field for a specific list but we can create site column at the site level and  then add this site side column to a specific uh list. At this moment the catalog it's not much  uh big the the catalog of of action but uh uh this is very uh so the the action that we have it's  cover the majority of uh scenarios that we need in SharePoint framework like create some list to  save the web part data. So let me show the demo.

[00:09:11]Probably I need to make an zoom in. Okay. So uh  let me start first with uh this part. This is the property pane of the web part of course and  we are able to see the two the two property pane controls. One is the provisioning site URL.  So this mean that it's just on a simple site selector. We are able to select the current site  that is the default. If the current site have the parent uh website I'm able to to select or I'm  able to search some site that I want to uh to use. The second control is this one. It's the real  control that are able to make the provisioning. So uh in this case I'm able to view that the um  the provisioning it's not applied but I'm able to click on provision to start the provisioning.  Of course, uh this is the the first part of the dialogue that uh show me uh if you uh I if  I'm sure to execute the the provisioning. If I'm click on run, the dialogue open um this UI  that show you the progress of the provisioning in this case of the current site and you are  able to see all the logs. the logs. It's very uh interesting because for each action that I  define and decide the uh the provision uh schema uh it's showed here and I'm able to view  if it's executed and which uh how much time uh spent to execute uh the creation of the  list and then add the SP field and so on.

[00:10:47]uh I'm able to view the result the complex  the global result of the provisioning and uh I'm able to view uh what is the number of  success action that it's already uh executed. If I try to again to execute the provision, you are  able to see that if the list is already present, uh it's completely skipped. Uh the overall process  is uh uh successed but uh all the action it's already skipped. So we are uh managed the uh all  the state in this case if I need to create an list but the list is already present uh we can skip uh  totally. Uh this is very powerful when you need to uh modify a new version of the web part and  you need to add for example new SP field to that web part. But uh we can make just a  check to view if uh uh the provision it's uh it's compliant or not. And in this case with  the uh we added the possibility this is very cool to make the the provision of uh uh of of the list.  For example, if I click on the provision I must to the confirmation. Yes, of course I want to the  provision and basically we do the same thing but in this case by deleting SP list. So the payload  in this case it's very very simple. uh we have an object provisioning plan with everything.  We have the action and the cool part is that we can use the parameters. This mean that we can  reuse these keys inside for example the title of the create SP list or inside the description by  using the the correct value and in this case we have for the provisioning the create SP list add  SP field and so on. In this case uh for each sub action for uh create a SP list we have a specific  uh field type and for each field type we have the u in a typed way we have all the property that we  need to set for uh this specific uh field type but what about the provisioning? So the deprovisioning  it's the same thing uh we reuse the provisioning plan because basically the deprovisioning it's  uh execute uh in this case the delete SP field uh actions. So we uh when when we we have to  deprovision we need just to define the payload and then uh use the action to delete SP uh SP list  for the order list and the customer list in the correct in the correct order. There are the last  demo it's uh uh the most complex one is this one.

[00:13:41]Uh in this case the demo uh are able to uh execute  all the actions that we made and this mean that we are able to create SP uh site. In this case we  create the engineering portal with a specific URL and then you are able to see that we have a lot  of actions that uh one by one will be executed in the order that I put inside the um the plan. Let  me show you the complete plan. This is basically uh the same thing but with all um with all  um actions. So uh we have the possibility to create not only communication site but uh team  sites in this case I commented this part but uh of course works uh and we have all all all  the action that we can do uh every action it's typed this mean that if you write something that  it's not compliant to the specific verb you have uh the um the error in the compile time. Okay, the  provisioning is completely uh executed and then if I click again on check, I'm able to view uh  every information. If I'm able to open this site, this is the uh engineering port I created with the  engineering request and the engineering documents with all the fields that I added inside the  um the um the list and the libraries. Okay.

[00:15:26]Uh let me show you just the reference of the  project. So uh this is the URL. It's an open project. The repository it's open to everyone.  Uh it's mid license. So you can uh contribute or uh you can fork to use uh by yourself. Uh the plan  is to uh finalize something and then publish this uh framework uh as an MPM package that you can  reuse uh in your project without uh a problem.

[00:15:58]Just uh add the the package to the to your package  JSON and then uh and then use. Yeah. Thank you.