Create Subsite Using JSOM In SharePoint Online

Rajkiran Swain
8y
7.1k
0
1

Blog

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:

<html>
<head>
<meta name="robots" content="noindex, nofollow">
<link rel="stylesheet" href="https://xxx.sharepoint.com/sites/TESTSITE/Shared%20Documents/style.css" />
<script type="text/JavaScript" src="https://xxx.sharepoint.com/sites/TESTSITE/Shared%20Documents/jquery-1.12.3.js"></script>
</script>
<script type="text/JavaScript" src="https://xxx.sharepoint.com/sites/TESTSITE/Shared%20Documents/MicrosoftAjax.js"></script>
<script type="text/javascript">
$(function() {
bindButtonClick();
});
function bindButtonClick() {
$("#register").on("click", function() {
var name = $("#txtSiteTitle").val();
var id = $("#txtSiteDescription").val();
if (name == '' || id == '') {
alert("Please fill all fields...!!!!!!");
} else {
createSite();
}
});
}
function createSite() {
var siteTitle = $("#txtSiteTitle").val();
var siteDesc = $("#txtSiteDescription").val();
var siteUrl = siteDesc.replace(/\s/g, "");
var clientContext = new SP.ClientContext('https://xxx.sharepoint.com/sites/TESTSITE');
var collWeb = clientContext.get_web().get_webs();
var webCreationInfo = new SP.WebCreationInformation();
webCreationInfo.set_title(siteTitle);
webCreationInfo.set_description(siteDesc);
webCreationInfo.set_language(1033);
webCreationInfo.set_url(siteUrl);
webCreationInfo.set_useSamePermissionsAsParentSite(true);
webCreationInfo.set_webTemplate('STS#0');
var oNewWebsite = collWeb.add(webCreationInfo);
clientContext.executeQueryAsync(Function.createDelegate(this, onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}
function onQuerySucceeded() {
alert('Site successfully Created!');
}
function onQueryFailed(sender, args) {
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
</script>
</head>
<body>
<div class="container">
<div class="main">
<form class="form" method="post" action="#">
<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>
</div>
</body>
</html>