Back to previous page

Leveraging Office PnP Core to Create Communication Sites with Saved Page Templates

Series:
1. Securing React App with Azure AD 
2. Setting Up Azure Key Vault with an Azure Website (Web API) 
3. Leveraging Office Pnp Core to run multi tenant specific operations (Create modern site, etc) 
4. Creating communication sites templates and applying them to new sites in different tenants. *this post

This is probably the most exciting post of all series, because it took me a few days before I finally got it working.

The entire idea of the blog series, its to be able to create modern team sites or communication sites, based on pages that already exist in another tenant, yeah, cool? isnt it. So basically in our web application, we register a tenant, then we take a list of the sites, and we can save in our CosmosDB the template of a page, so we can save 100 page templates, and then at a later stage, our customers will be able to create a communication site or modern team site, and select the pages they want to be provisioned on that new site, amazing isnt it? Keep in mind that this is work in progress, so it might not be perfect, but it works 100% with all the Out of the box SPFX webparts out there.

My next step, is to make this future proof, so that it works also with Custom Webparts, but thats going to be a little more difficult, because if there is a custom webpart in one tenant, then I need to deploy it in another tenant in order to get the template working fine wherever I need it.

Entities

In order to save a page template, we have to represent a Page with sections, columns and webparts, and then save that information into our CosmosDB database, in order to do that, I created the following set of entities:

The code is self explanatory, SiteType can either be communication site or modern team sites, I have not tested yet if a template done in a modern team site will work on a communication site and vice-versa.

The section has a list of columns and each column has a list of webparts or Controls.
The control class has a lot of properties, that I took from the existing control class from Office PnP Core.

At this point you might wonder, why didnt I use the existing Sections, Columns, Page classes, well the reason is very simple, on those classes a Page has Sections, but each Section also points to a Page, a section has Columns but each column points to a section, and the same happens with Webparts, the problem with this, is that when saving this to CosmosDB you get Json Circular Reference Exceptions, I know you can overcome this by ignoring the circular reference when serializing to json, but I didnt like it, and I felt it was a dirty approach, so I decided to do it my own way.

Extract page templates

From my user interface I will be able to extract a page template based on the class outlined above, and then save that information into CosmosDB, basically the user selects a SiteCollection, then selects a page from that SiteCollection, and then my business logic will save it correctly into the database. Please note that in the Page level I added an array of Tags, why? because the idea is that later I can search my template collection based on tags, like HR, Finance, Short Page, Long Page, Marketing, Dashboard, etc,etc, this will save time for our users to search for existing templates.

Below the controller method to extract a page template

As you can see, I manually iterate over sections, over columns on each section, and over controls on each column, and then with my mentioned entities above, I save all this information into a template entity on my CosmosDB, cool? isnt it?

Create a communication site with page templates

In the interface, when creating a communication site, the user will be able to select 1 or many page templates, then save all the standard communication site information, like Title, description, etc. And then from the backend it will create a communication sites with all pages selected, with all sections, columns and webparts, just as they were in the template, this is pretty amazing, I cant stress enough how much time our customers will save with this.

Here I get a list of page templates via a List from the front end, then I iterate over each page and basically I do reverse engineer to what I did in the previous step, I iterate over each Section, each column each control in the corresponding order, and I add them to the page, and at the end I publish the page.

And the best thing it works perfectly fine, looking forward to demo this some time 🙂

This is the last part of the series, but I will keep creating posts related to this with other operations.

On this post, I didnt add the Front End, at the end if you use the backend I created and that I will publish soon, then you will need to create your own UI either in react, angular or whatever you want to chose.

About the Author:

Luis Valencia, CTO at Software Estrategico, Medellin, Colombia, independent blogger and still a coder, after 17 years of experience in the field and regardless of my position, and mostly with SharePoint/Office Products, I still love to code, open Visual Studio and bring solutions to users and to the community its what makes me wake up every morning.

Feel free to contact me via twitter direct messages, @levalencia

Reference:

Valencia, L. (2019). Leveraging Office PnP Core to Create Communication Sites with Saved Page Templates. Available at: http://www.luisevalencia.com/2019/03/03/leveraging-office-pnp-core-to-create-communication-sites-with-saved-page-templates/ [Accessed 15th April 2019]

Share this on...

Leave a Reply

Back to previous page