JSON based Site Template – Introduction

PnP Provisioning engine is really powerful to create and provision site templates. However PnP uses CSOM – which means to use PnP provision engine, we need to develop either desktop based application (console, wpf) or Provider hosted app. Would be nice to use PnP like templating to create site using SharePoint hosted Add-in which only supports JSOM.

Recently I worked with a client who needed to create sites based on site templates but didn’t want to use Provider hosted app nor any desktop application to provision new site based on site template. This is what I did for the client (more details will be provided in later blogs):

1. Provisioned a site collection based on PnP Provisioning Engine.
   • Common Site Columns, Content Types are provisioned at site collection level.
   • Custom js (jquery, knockout) uploaded at site collection level and referenced in master page through custom action
   • Custom css uploaded at site collection level and used in alternate css property.
2. The actual site template is created in PnP provision template but never used. Rather the template is converted to json using ‘JsonPnPFormatter’ and saved as json file.  More details provided later in this post.
3. A SharePoint hosted Add-in is developed to create site based on site template and installed at site collection level. The add-in creates a new site and then reads the json file created from PnP template and provision artefacts as defined in json template. The Add-In does the followings:
   • Create Site, Site Groups
   • Create lookup fields and create content types
   • create lists
   • setup navigation
   • and many more

Since provisioning site collection/site based on PnP template is not part of this post,I’ll skip step 2.  I’ll explain step 2 – ‘convert PnP template to Json’ in this post. In later posts I’ll explain step 3 – ‘provision site based on json site template’.

Convert PnP template to JSON

To convert PnP template to json, you can use the following code snippet.

public void SaveTemplateAsJson(string templateFilePath, string templateName, string outputFilePath)
{
    var templateProvider = new XMLFileSystemTemplateProvider(Path.GetDirectoryName(templateFilePath), "");
    var template = templateProvider.GetTemplate(Path.GetFileName(XmlPath));
    templateProvider.SaveAs(template, outputFilePath, new JsonPnPFormatter());
}

You can call the above method as

SaveTemplateAsJson(@"c:\templates\PnPTempalte.xml", "TemplateName", @"c:\templates\PnPTempalte.json");

To get a visual representation of Json file you can use online tools like http://jsoneditoronline.org/ or http://jsonviewer.stack.hu/

 

Now we are ready to use this JSON file in SharePoint Add-in to create site based on this template. If you need to convert multiple PnP templates to Json you can modify the SaveTemplateAsJson to do so.

I’ll explain how to use this json template to create SharePoint Add-in in my future posts.