Create A Subsite By Selecting A Template Using Angular

Introduction

In this article, I am going to explain how to create a subsite programmatically based on a selected template using AngularJS and REST API call.

Overview

• Create a web page to select site template and set a name to the subsite.
• Get all site template names on page load.
• Write a script code for creating a subsite based on the selected template on click of the button.

Procedure

Step1

Create a web page as below to select a site template and to give subsite name.

HTML code for above UI 

<table style="width:100%">
  <thead></thead>
    <tbody>
    <tr><td style="width:10%">Site Name:</td><td style="width:50%"><input ng-model="SiteName" type="text"/></td></tr>
    <tr><td>Select a template:</td><td style="width:50%"><select ng-model="template"><option value="">--Select an option--</option><option ng-repeat="template in templates" value="{{template}}">{{template}}</option></select></td></tr>
    <tr><td></td><td><input  type="button" ng-click="CreateSubSite()" value="Create Subsite"/><input type="reset" value="Cancel"/></td></tr>
  </tbody>
<div id="GetSubsitePath" style="color: green;font-weight: 500;"></div>
</table>

Step 2

Get the all site template names on page load.

Script code for getting the site template names.

$.ajax({
        url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/GetAvailableWebTemplates(lcid=1033)?$filter=(IsHidden%20eq%20false)%20and%20(IsRootWebOnly%20eq%20false)",
        method: "GET",
        async: false,
        headers: { "Accept": "application/json;odata=verbose" },
        success: function(data){
           $scope.WebTemps= data.d.results;
           console.log($scope.WebTemps);/* see the site template names in console window and use the names on post code of create subsite*/
        },

        error: function(sender,args){
            console.log(args.get_message());
        }
    });

Result

Step 3 

Code for "CreateSubsite" button.

• Get the input values of title and template from the web page.
• Set template name based on the selected template.

Pass the template type and name of subsite on title and WebTemplate fields as shown below.

$scope.CreateSubSite=function(){/*Function for create subsite*/
var SbSiteTemp=$scope.template;/*setting name of subsite to a variable from input*/
var SbSiteName=$scope.SiteName; /*setting type of template to another variable from input*/
if(SbSiteTemp=="Team site"){/*setting name of Webtemplate based on selected template type */
  SbSiteTemp="STS#0";
  }else if(SbSiteTemp=="Blog"){
    SbSiteTemp="BLOG#0";/*the all names are taken from console window which we have discussed above*/
  }else if(SbSiteTemp=="Project Site"){
    SbSiteTemp="PROJECTSITE#0";
  }else if(SbSiteTemp=="Enterprise"){
    SbSiteTemp="OFFILE#1";
  }else if(SbSiteTemp=="Publishing"){
    SbSiteTemp="CMSPUBLISHING#0";
  }else if(SbSiteTemp=="WIKI"){
    SbSiteTemp="ENTERWIKI#0";
  }
    $.ajax({/*ajax call for create subsite*/
        url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/webinfos/add",
        type: "POST",
        headers: {
            "accept": "application/json;odata=verbose",
            "content-type": "application/json;odata=verbose",
            "X-RequestDigest": $("#__REQUESTDIGEST").val()
        },
        data: JSON.stringify({
            'parameters': {
                '__metadata': {
                    'type': 'SP.WebInfoCreationInformation'
                },
                'Url': SbSiteName,
                'Title': SbSiteName, /*setting subsite name here*/
                'Description': 'Test',
                'Language': 1033,
                'WebTemplate': SbSiteTemp, /*setting template type here*/
                'UseUniquePermissions': true
            }
        }),
        success: function(data){
           alert('Subsite created successfully.');
$("div#GetSubsitePath").append(_spPageContextInfo.webAbsoluteUrl+"/"+SbSiteName);
        },
        error: function(error){
            alert("This site is already in use");
        }
    });
}

Let’s see the result on screen as below.

We have given site name as SampleBlogSite, and selected the Blog template.

Result

 

Subsite has been created successfully. Let’s see the subsite by using the path:

Hence, we have created a subsite based on the selection of template using AngularJS.

Conclusion

This article explained how to create a subsite, how to get all types of templates, and how to set a web template to create a subsite using AngularJS.