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);
- },
-
- 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(){
- var SbSiteTemp=$scope.template;
- var SbSiteName=$scope.SiteName;
- if(SbSiteTemp=="Team site"){
- SbSiteTemp="STS#0";
- }else if(SbSiteTemp=="Blog"){
- SbSiteTemp="BLOG#0";
- }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({
- 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,
- 'Description': 'Test',
- 'Language': 1033,
- 'WebTemplate': SbSiteTemp,
- '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.