Post
Ask Question

Create Subsite Using JSOM In SharePoint Online

In this tip, I have explained how JavaScript can be used for creating a subsite in SharePoint 2013 and Online sites.

Before starting with the code, we need to add the following JS references in our page:

<script src="/_layouts/15/sp.runtime.js" type="text/javascript"> </script>

This script file is only for On Premise Servers and not for SharePoint online, because it’s already there in SharePoint online.

When we are creating a site programmatically, we need the template’s internal code. For example, if we create a Team Site, we need to use STS#0 (which is an internal code for Team Site template) in our program. Similarly, creating a site using a custom Web template, we need to get the internal code of the template first.

We need to iterate through the Web template collection to retrieve our custom template with the title provided, while saving the template. The template code is stored in the name property of the Web template.

Here, is the code for creating the sites in SharePoint online plus its designing part:

  1. <html>  
  2.   
  3. <head>  
  4.     <meta name="robots" content="noindex, nofollow">  
  5.     <!-- Include CSS File Here -->  
  6.     <link rel="stylesheet" href="https://xxx.sharepoint.com/sites/TESTSITE/Shared%20Documents/style.css" />  
  7.     <script type="text/JavaScript" src="https://xxx.sharepoint.com/sites/TESTSITE/Shared%20Documents/jquery-1.12.3.js"></script>  
  8.     </script>  
  9.     <script type="text/JavaScript" src="https://xxx.sharepoint.com/sites/TESTSITE/Shared%20Documents/MicrosoftAjax.js"></script>  
  10.     <script type="text/javascript">  
  11.         $(function() {  
  12.             bindButtonClick();  
  13.         });  
  14.   
  15.         function bindButtonClick() {  
  16.             $("#register").on("click", function() {  
  17.                 var name = $("#txtSiteTitle").val();  
  18.                 var id = $("#txtSiteDescription").val();  
  19.                 if (name == '' || id == '') {  
  20.                     alert("Please fill all fields...!!!!!!");  
  21.                 } else {  
  22.                     createSite();  
  23.                 }  
  24.             });  
  25.         }  
  26.   
  27.         function createSite() {  
  28.             var siteTitle = $("#txtSiteTitle").val();  
  29.             var siteDesc = $("#txtSiteDescription").val();  
  30.             var siteUrl = siteDesc.replace(/\s/g, "");  
  31.             var clientContext = new SP.ClientContext('https://xxx.sharepoint.com/sites/TESTSITE');  
  32.             var collWeb = clientContext.get_web().get_webs();  
  33.             var webCreationInfo = new SP.WebCreationInformation();  
  34.             webCreationInfo.set_title(siteTitle);  
  35.             webCreationInfo.set_description(siteDesc);  
  36.             webCreationInfo.set_language(1033);  
  37.             webCreationInfo.set_url(siteUrl);  
  38.             webCreationInfo.set_useSamePermissionsAsParentSite(true);  
  39.             webCreationInfo.set_webTemplate('STS#0');  
  40.             var oNewWebsite = collWeb.add(webCreationInfo);  
  41.             clientContext.executeQueryAsync(Function.createDelegate(this, onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));  
  42.         }  
  43.   
  44.         function onQuerySucceeded() {  
  45.             alert('Site successfully Created!');  
  46.         }  
  47.   
  48.         function onQueryFailed(sender, args) {  
  49.             alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());  
  50.         }  
  51.     </script>  
  52. </head>  
  53.   
  54. <body>  
  55.     <div class="container">  
  56.         <div class="main">  
  57.             <form class="form" method="post" action="#">  
  58.                 <h2>Create Client Site</h2> <label>Client Name :</label> <input type="text" name="dname" id="txtSiteTitle"> <label>Macola ID :</label> <input type="text" name="demail" id="txtSiteDescription"> <input type="button" name="register" id="register" value="Submit"> </form>  
  59.         </div>  
  60. </body>  
  61.   
  62. </html>  
The CSS file should be there. Please follow the code, given below:

 

  1. /* Below line is used for online Google font */  
  2. @import url(http: //fonts.googleapis.com/css?family=Droid+Serif);  
  3.         h2 {  
  4.             text - align: center;  
  5.             font - size: 24 px;  
  6.         }  
  7.         hr {  
  8.             margin - bottom: 30 px;  
  9.         }  
  10.         div.container {  
  11.             width: 960 px;  
  12.             height: 610 px;  
  13.             margin: 50 px auto;  
  14.             font - family: 'Droid Serif',  
  15.             serif;  
  16.             position: relative;  
  17.         }  
  18.         div.main {  
  19.             width: 320 px;  
  20.             float: left;  
  21.             padding: 10 px 55 px 40 px;  
  22.             background - color: rgba(187, 255, 184, 0.65);  
  23.             border: 15 px solid white;  
  24.             box - shadow: 0 0 10 px;  
  25.             border - radius: 2 px;  
  26.             font - size: 13 px;  
  27.         }  
  28.         input[type = text], [type = password] {  
  29.             width: 97.7 % ;  
  30.             height: 34 px;  
  31.             padding - left: 5 px;  
  32.             margin - bottom: 20 px;  
  33.             margin - top: 8 px;  
  34.             box - shadow: 0 0 5 px #00F5FF;  
  35.   
  36. border: 2px solid # 00 F5FF;  
  37.             color: #4f4f4f;  
  38.   
  39. font-size: 16px;  
  40.   
  41. }  
  42.   
  43. label{  
  44.   
  45. color: # 464646;  
  46.             text - shadow: 0 1 px 0# fff;  
  47.             font - size: 14 px;  
  48.             font - weight: bold;  
  49.         }#register {  
  50.             font - size: 20 px;  
  51.             margin - top: 15 px;  
  52.             background: linear - gradient(#22abe9 5%, # 36 caf0 100 % );  
  53.             border: 1 px solid #0F799E;  
  54.   
  55. padding: 7px 35px;  
  56.   
  57. color: white;  
  58.   
  59. text-shadow: 0px 1px 0px # 13506 D;  
  60.             font - weight: bold;  
  61.             border - radius: 2 px;  
  62.             cursor: pointer;  
  63.             width: 100 % ;  
  64.         }#register: hover {  
  65.             background: linear - gradient(#36caf0 5%, # 22 abe9 100 % );  
  66.         } 
Next Recommended Reading Creating List And Columns Using SharePoint Hosted Add-ins

HCL Tech
HCL Tech