top of page
Search

Create and Delete Site using JavaScript Object Model (JSOM) in SharePoint Online/2013/2016

In this SharePoint JSOM tutorial, we will discuss how we to create and delete SharePoint site using JavaScript Object Model (jsom) in SharePoint Online office 365.


We can also use the same JavaScript (jsom) code to create and delete SharePoint site in SharePoint 2013 or SharePoint 2016.


Create 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


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



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.

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.



You may like following SharePoint jsom tutorials:

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


We also discussed how to delete a SharePoint site using the JavaScript Object Model (jsom) in SharePoint Online/2013/2016.


Source:Paper.li

0 comments

Comentarios

bottom of page