Create SharePoint site programmatically (JavaScript and Rest API)

In this SharePoint tutorial, we will discuss how to create a SharePoint site programmatically using JavaScript and Rest API. We will learn:

  • Create SharePoint site using rest api
  • Create a SharePoint site using JavaScript
  • How to delete a SharePoint Site using Rest API

Create SharePoint Site using Rest API

Let us see, how to create a SharePoint site using Rest API. Also, we will check how to delete a SharePoint site using Rest API in SharePoint Online or SharePoint 2013/2016.

We can create a SharePoint site using Rest API in SharePoint Online Office 365. This will also work fine with SharePoint 2013 and SharePoint 2016.

Here we have taken two textboxes where the user can put the SharePoint site name and the site description and a submit button. On click of that, the SharePoint site will get created.

The html code looks like below:

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

Here divResults will display the successfull message after the site got created successfully.

Then the script code will be like below. Here in the createSite() method we are retrieving the site title and description from the textboxes and we are making the site URL by removing the space from the title. Other properties which were required to create a site, we have hardcoded inside the __metadata.

The whole code we have added inside a Script editor web part or in content editor web part, inside a web part page.

Rest API 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 () {
createSite();
});
}

function createSite() {
var newSiteTitle = $("#txtSiteTitle").val();
var newSiteDesc = $("#txtSiteDescription").val();
var newSiteUrl = newSiteTitle.replace(/\s/g, "");
var siteUrl = _spPageContextInfo.webAbsoluteUrl;
var fullUrl = siteUrl + "/_api/web/webinfos/add";
$.ajax({
url: fullUrl,
type: "POST",
data: JSON.stringify({
'parameters': {
'__metadata': { 'type': 'SP.WebInfoCreationInformation' },
'Url': newSiteUrl,
'Title': newSiteTitle,
'Description': newSiteDesc,
'Language': 1033,
'WebTemplate': 'sts#0',
'UseUniquePermissions': false
}

}),

headers: {
"accept": "application/json;odata=verbose",
"content-type": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val()
},
success: onQuerySucceeded,
error: onQueryFailed
});
}

function onQuerySucceeded() {
$("#divResults").html("Site Created Successfully!");
}

function onQueryFailed(sender, args) {
alert('Error!');
}
</script>

Once you will Save the page and the page looks like below. Here put a title for the site and a description for the site. Then click on the Submit button. It will show a successful message once the site got created successfully.

create sharepoint site using rest api
create sharepoint site using rest api

You can navigate to the Site Contents page and you can see the site got created successfully.

create sharepoint online site using rest api
create sharepoint online site using rest api

Delete SharePoint Site using Rest API

Now we will see how we can delete a site using Rest API in SharePoint Online Office 365. The same code we can use to delete a site using Rest API in SharePoint 2013/2016.

Here in this example, we are going to take a textbox and a button. The user can put the site title in the textbox and can click on the button to delete the site. The HTML code looks like below and the div with id divResults will display the successful message when the site will get deleted successfully.

HTML Code:

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

Rest API Code:

Below is the Rest API code, here we have taken the site from the textbox. Let us added the full HTML and rest API code inside a script editor web part. You can also use a content editor web part. For this example let us put inside a script editor web part in a web part page.

<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;
var fullUrl = siteUrl + "/" + siteTitleNoSpaces + "/_api/web";
$.ajax({
url: fullUrl,
type: "POST",
headers: {
"accept": "application/json;odata=verbose",
"content-type": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
"X-HTTP-Method": "DELETE",
"IF-MATCH": "*"
},

success: onQuerySucceeded,
error: onQueryFailed
});
}

function onQuerySucceeded() {
$("#divResults").html("Site deleted successfully !");
}

function onQueryFailed(sender, args) {
alert('Error!');
}

</script>

Once you save the page, the form will appear like below, where users can put the title and click on the Delete Site button. If the site will get deleted successfully, it will show a successful message like below:

delete sharepoint online site using rest api
delete sharepoint online site using rest api

Now if you will check the SharePoint Site Contents page, you can see the site will not be there.

delete sharepoint site using rest api
delete sharepoint site using rest api

Here, we saw, how to create SharePoint site using rest api and how to delete SharePoint site using Rest API.

Create a SharePoint site using JavaScript

Let us check now, how to create a SharePoint site using JavaScript Object Model (JSOM).

First, let us discuss how we to create a site using the JavaScript Object Model (jsom) in SharePoint Online or SharePoint 2013/2016.

Here I have created an HTML form, where I have added 3 textboxes and one submit button. In those textboxes, the user will enter the SharePoint site title, description and site template.

Once the user puts that information and click on OK, it will create the SharePoint 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 or content editor web part which we will add inside a web part page in SharePoint.

HTML Code:

<div id="CreateSite">
<div>
<strong>Name of Site:</strong>
<br />
<input type="text" id="txtSiteTitle" />
</div>
<br />
<div>
<strong>Description of Site:</strong>
<br />
<textarea cols="20" id="txtSiteDescription"></textarea>
</div>
<div>
<br />
<strong>Site Template:</strong>
<br />
<input type="text" id="txtSiteTemplate" />
</div>
<br />
<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 SharePoint 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 SharePoint web part page, you can see the site creation form will look like below. Here user can put SharePoint site name, description and template like below. On successful creation it will display the message like below:

create sharepoint site programmatically javascript
create sharepoint site programmatically javascript

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

create sharepoint site jsom
create sharepoint site jsom

Here, we learned, how to create a site using jsom in SharePoint Online as well SharePoint 2016/2013.

Delete SharePoint Site using JavaScript Object Model (JSOM)

Now we will see how to delete a SharePoint site using the JavaScript object model (jsom) in SharePoint Online/2013/2016.

Here I have created an HTML form and in the form, I have added a textbox where user can put the SharePoint site title in the textbox and user can click on submit button.

Once click on the submits button it 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>
<br />
<input type="text" id="txtSiteTitle" />
</div>
<br />
<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 SharePoint page, you can see the page like below, where user can put the site title and you can see on successful deletion it is displaying a successful message.

jsom delete sharepoint subsite
jsom delete sharepoint site

Now if you will go and see the SharePoint site contents page, in subsites section you will not see the site, because it is already got deleted.

Delete SharePoint Site using JavaScript

Here, we checked how to delete a SharePoint site using the JavaScript Object Model (jsom) in SharePoint Online/2013/2016.

Change Search Center URL using JavaScript in SharePoint

Let us see, how to change the search center URL in SharePoint Online/2013/2016 using JavaScript object model code (jsom).

To change the search center URL using browser we can navigate to Open SharePoint Online Site Settings -> then click on “Search Settings” which is under “Site Collection Administration”.

By default it will be blank like below:

Change Search Center URL using JavaScript in SharePoint
Change Search Center URL using JavaScript in SharePoint

Change Search Center URL using JavaScript in SharePoint

Now we will see how to change the search center URL in SharePoint 2013 using JSOM (JavaScript Object Model).

Here let us take a button and on click of that button, we will change the search center URL. Both the HTML and JSOM code we have written inside a script editor web part which is inside a web part page.

We can set the SRCH_ENH_FTR_URL_SITE property which will change the search center URL.

<input type="button" id="btnSubmit" value="Set Search URL" />

<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 () {
setSearchURL();
});
}

function setSearchURL() {
var ctx = new SP.ClientContext.get_current();
var web = ctx.get_site().get_rootWeb();
var props = web.get_allProperties();
props.set_item("SRCH_ENH_FTR_URL_SITE", "/sites/Bhawana/MySearchCenter");
web.update();
ctx.load(web);
ctx.executeQueryAsync(function () {
alert("Search Settings Modified");
},

function () {
alert("failed");
});
}
</script>

Once you Save the code and click on the button, the search center URL will be changed like below:

change search center url using javascript sharepoint
Change Search Center URL using JavaScript in SharePoint

You may like the following SharePoint tutorials:

In this tutorial, we learned how to create a SharePoint site programmatically. And,

  • Create SharePoint Site using Rest API
  • Delete SharePoint Site using Rest API
  • Create a SharePoint site using JavaScript
  • Delete SharePoint Site using JavaScript Object Model (JSOM)
>