SharePoint Online: Working with Sites using JSOM

Article
1/17/2024

Introduction:

Here we will discuss how we can create and delete site using JavaScript Object Model (jsom) in SharePoint online office 365. The same jsom code works as it is inside SharePoint 2013 as well as SharePoint 2016.

Create Site using JSOM in SharePoint Online:

First, let us discuss how we can create a site using JavaScript Object Model (jsom) in SharePoint. Here we have put three textboxes and one submit button. In those textboxes, the user will enter the site title, description and site template. Once user puts that information and clicks OK, it will create the site and it will show a successful message.

Here we will put the JSOM code as well as the HTML code inside a script editor web part which we will add inside a web part page.

 

      <    div id="CreateSite">
      <    div    >  
   
      <    strong    >Name of Site:</    strong    >  
   
      <    input type="text" id="txtSiteTitle" />
   
      </    div    >  
   
      <    div    >  
   
      <    strong    >Description of Site:</    strong    >  
   
      <    textarea cols="20" id="txtSiteDescription"></textarea>
   
      </    div    >  
   
      <    div    >  
   
      <    strong    >Site Template:</    strong    >  
   
      <    input type="text" id="txtSiteTemplate" />
   
      </    div    >  
   
      <    input type="button" id="btnSubmit" value="Create Site" />
   
      </    div    >  
   
      <    div id="divResults"></div>

JSOM Code:

Here we are calling the createSite() method in the button click event. To create a site we also need to provide the site URL, which we can take the from the title. We are getting the site URL by removing the space from the site title textbox.

 

      var siteUrl = siteTitle.replace(/\s/g, "");  
      <    script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
   
      <    script    >  
   
      $(function () {  
   
      bindButtonClick();  
   
      });  
   
   
      function bindButtonClick() {  
   
      $("#btnSubmit").on("click", function () {  
   
      createSite();  
   
      });  
   
      }  
   
      function createSite() {  
   
      var siteTitle = $("#txtSiteTitle").val();  
   
      var siteDesc = $("#txtSiteDescription").val();  
   
      var siteUrl = siteTitle.replace(/\s/g, "");  
   
      var siteTemplate = $("#txtSiteTemplate").val();  
   
      var clientContext = new SP.ClientContext();  
   
      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(siteTemplate);  
   
      var oNewWebsite = collWeb.add(webCreationInfo);  
   
      clientContext.executeQueryAsync(  
   
      Function.createDelegate(this, this.onQuerySucceeded),  
   
      Function.createDelegate(this, this.onQueryFailed)  
   
      );  
   
      }  
   
      function onQuerySucceeded() {  
   
      $("#divResults").html("Site successfully created!");  
   
      }  
   
      function onQueryFailed(sender, args) {  
   
      alert('Request failed. ' + args.get_message() +'\n' + args.get_stackTrace());  
   
      }  
   
      </    script    >

Once you will save the page, you can see the site creation form will look like below. Here a user can put site name, description and template like below. On successful creation it will display the message like below:

Now if you will go to the site contents and then under subsites section, you can see the subsite got created successfully.

Delete Site using JSOM SharePoint Online:

Now we will see how we can delete a SharePoint site using JavaScript object model (jsom) in SharePoint online. Here we have added a textbox where a user can put the site title in the textbox and user can click on submit button which will delete the site and on successful deletion, it will display a successful message to the user.

HTML Code:

<div id="DeleteSite"> <div><strong>Site Name to delete:</strong><input type="text" id="txtSiteTitle" /></div><input type="button" id="btnSubmit" value="Delete Site" /></div><div id="divResults"></div>

JSOM Code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script>$(function () {bindButtonClick();});function bindButtonClick() {$("#btnSubmit").on("click", function () {deleteSite();});}function deleteSite() {var siteTitle = $("#txtSiteTitle").val();var siteTitleNoSpaces = siteTitle.replace(/\s/g, "");var siteUrl = _spPageContextInfo.webAbsoluteUrl + "/" + siteTitleNoSpaces;var clientContext = new SP.ClientContext(siteUrl);var oWebsite = clientContext.get_web();oWebsite.deleteObject();clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded),Function.createDelegate(this, this.onQueryFailed));}function onQuerySucceeded() {$("#divResults").html("Site successfully deleted!");}function onQueryFailed(sender, args) {alert('Request failed. ' + args.get_message() +\n' + args.get_stackTrace());}</script>

Once you Save the page, you can see the page like below, where a user can put the site title and you can see on successful deletion it is displaying a successful message.