Angular

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.

Angular
HTML code for above UI 

  1. <table style="width:100%">  
  2.   <thead></thead>  
  3.     <tbody>  
  4.     <tr><td style="width:10%">Site Name:</td><td style="width:50%"><input ng-model="SiteName" type="text"/></td></tr>  
  5.     <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>  
  6.     <tr><td></td><td><input  type="button" ng-click="CreateSubSite()" value="Create Subsite"/><input type="reset" value="Cancel"/></td></tr>  
  7.   </tbody>  
  8. <div id="GetSubsitePath" style="color: green;font-weight: 500;"></div>  
  9. </table>  

Step 2

Get the all site template names on page load.

Script code for getting the site template names.

  1. $.ajax({      
  2.         url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/GetAvailableWebTemplates(lcid=1033)?$filter=(IsHidden%20eq%20false)%20and%20(IsRootWebOnly%20eq%20false)",  
  3.         method: "GET",      
  4.         async: false,      
  5.         headers: { "Accept": "application/json;odata=verbose" },      
  6.         success: function(data){   
  7.            $scope.WebTemps= data.d.results;  
  8.            console.log($scope.WebTemps);/* see the site template names in console window and use the names on post code of create subsite*/  
  9.         },    
  10.             
  11.         error: function(sender,args){      
  12.             console.log(args.get_message());      
  13.         }      
  14.     });  

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.
  1. $scope.CreateSubSite=function(){/*Function for create subsite*/  
  2. var SbSiteTemp=$scope.template;/*setting name of subsite to a variable from input*/  
  3. var SbSiteName=$scope.SiteName; /*setting type of template to another variable from input*/  
  4. if(SbSiteTemp=="Team site"){/*setting name of Webtemplate based on selected template type */  
  5.   SbSiteTemp="STS#0";  
  6.   }else if(SbSiteTemp=="Blog"){  
  7.     SbSiteTemp="BLOG#0";/*the all names are taken from console window which we have discussed above*/  
  8.   }else if(SbSiteTemp=="Project Site"){  
  9.     SbSiteTemp="PROJECTSITE#0";  
  10.   }else if(SbSiteTemp=="Enterprise"){  
  11.     SbSiteTemp="OFFILE#1";  
  12.   }else if(SbSiteTemp=="Publishing"){  
  13.     SbSiteTemp="CMSPUBLISHING#0";  
  14.   }else if(SbSiteTemp=="WIKI"){  
  15.     SbSiteTemp="ENTERWIKI#0";  
  16.   }  
  17.     $.ajax({/*ajax call for create subsite*/  
  18.         url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/webinfos/add",  
  19.         type: "POST",  
  20.         headers: {  
  21.             "accept": "application/json;odata=verbose",  
  22.             "content-type": "application/json;odata=verbose",  
  23.             "X-RequestDigest": $("#__REQUESTDIGEST").val()  
  24.         },  
  25.         data: JSON.stringify({  
  26.             'parameters': {  
  27.                 '__metadata': {  
  28.                     'type': 'SP.WebInfoCreationInformation'  
  29.                 },  
  30.                 'Url': SbSiteName,  
  31.                 'Title': SbSiteName, /*setting subsite name here*/  
  32.                 'Description': 'Test',  
  33.                 'Language': 1033,  
  34.                 'WebTemplate': SbSiteTemp, /*setting template type here*/  
  35.                 'UseUniquePermissions': true  
  36.             }  
  37.         }),  
  38.         success: function(data){   
  39.            alert('Subsite created successfully.');   
  40. $("div#GetSubsitePath").append(_spPageContextInfo.webAbsoluteUrl+"/"+SbSiteName);  
  41.         },    
  42.         error: function(error){      
  43.             alert("This site is already in use");      
  44.         }      
  45.     });  
  46. }   
Let’s see the result on screen as below.

Angular

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

Result

Angular

 Angular

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

Angular

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.

Up Next
Ebook Download
View all
Learn
View all
Mahipal Reddy
Mahipal Reddy
NA 2.7k1.1m

I’m a developer and designer living in Hyderabad, Telangana, India. I spend my days with my hands in many different areas of web development... Know more


  • (0) Comments
 
Message
Membership not found