Create sub site and Page using JavaScript jQuery in SharePoint 2016 or SharePoint 2013 or SharePoint Online


Here we will discuss how we can create a sub site and page using JavaScript, jQuery client object model in SharePoint 2016, SharePoint 2013 or SharePoint online. You can use the below code inside a script editor web part inside a web part page in SharePoint site.


Read some SharePoint 2013 tutorials below:

Title: <input type=”text” id=”txtSitename” /> &nbsp <button type=”button” id=”btnCreateSite” >Create</button>
<script type=”text/javascript” src=”/sites/Intranet/Style%20Library/aaa/jquery-1.8.3.min.js” ></script>
<script type=”text/javascript” src=”/_layouts/15/SP.Runtime.js”></script>

<script type=”text/javascript” src=”/_layouts/15/SP.js”></script>
<script type=”text/javascript” src=”/_layouts/15/sp.publishing.js”></script>



<script type=”text/javascript”>

$(“#btnCreateSite”).click(function(){
CreateWebsite($(“#txtSitename”).val(), $(“#txtSitename”).val(), $(“#txtSitename”).val(), “BLANKINTERNET#2”);
});

var context;
var web;
var newWeb;
function CreateWebsite(title, description, webUrl, templateTitle)
{
context = new SP.ClientContext.get_current();
web = context.get_web();
context.load(web);
var webTemplates = web.getAvailableWebTemplates(1033,false);
context.load(webTemplates);
context.executeQueryAsync(function(){
var enumerator = webTemplates.getEnumerator();
var customTemplate;
while(enumerator.moveNext())
{
var webTemplate = enumerator.get_current();
var webTitle = webTemplate.get_title();
if(webTitle == templateTitle)
{
customTemplate = webTemplate.get_name();
break;
}
}
var webCreationInformation = new SP.WebCreationInformation();
webCreationInformation.set_title(title);
webCreationInformation.set_description(description);
webCreationInformation.set_language(1033);
webCreationInformation.set_url(webUrl);
webCreationInformation.set_useSamePermissionsAsParentSite(true);
webCreationInformation.set_webTemplate(customTemplate);
newWeb= web.get_webs().add(webCreationInformation);
context.executeQueryAsync(function(){
createPublishingPage(“Home.aspx”, “blankWebPartPage.aspx”)
alert(‘Website created successfully.’);
},
function(sender, args){
alert(args.get_message());
});
},
function(sender, args){
alert(args.get_message())
}
);
}

function loadPageLayout (pageLayoutName, callback) {
var pageFromDocLayout, pageLayoutItem;

SP.SOD.executeFunc(‘SP.js’, ‘SP.ClientContext’, function () {
context = SP.ClientContext.get_current();
var site = context.get_site();

context.executeQueryAsync(function () {
var rootWeb = site.get_rootWeb();
context.load(rootWeb, ‘ServerRelativeUrl’);

context.executeQueryAsync(function () {
var rootUrl = rootWeb.get_serverRelativeUrl();
pageFromDocLayout = rootWeb.getFileByServerRelativeUrl(rootUrl + “_catalogs/masterpage/” + pageLayoutName);

context.executeQueryAsync(function () {
pageLayoutItem = pageFromDocLayout.get_listItemAllFields();

context.executeQueryAsync(function () {
if (typeof callback == “function”) {
callback(pageLayoutItem);
}
});
});
});
});
});
};

function createPublishingPage (filename, pageLayoutName, callback) {
SP.SOD.executeFunc(‘SP.js’, ‘SP.ClientContext’, function () {
SP.SOD.executeFunc(‘SP.Publishing.js’, ‘SP.Publishing.PublishingWeb’, function () {
var pubWeb, pageInfo, newPage, listItem;
//context = new SP.ClientContext(‘/sites/Intranet’);

//web = currWeb;
context.load(newWeb);
context.executeQueryAsync(function () {
pubWeb = SP.Publishing.PublishingWeb.getPublishingWeb(context, newWeb);
context.load(newWeb);
context.load(pubWeb);
context.executeQueryAsync(function () {

// load page layout and create the new page
loadPageLayout(pageLayoutName, function (pageLayoutItem) {
pageInfo = new SP.Publishing.PublishingPageInformation();
pageInfo.set_pageLayoutListItem(pageLayoutItem);
pageInfo.set_name(filename);

newPage = pubWeb.addPublishingPage(pageInfo);

context.load(newPage);

context.executeQueryAsync(function () {
// Success callback after adding a new Publishing Page.
// We want to get the actual list item that is represented by the Publishing Page.
listItem = newPage.get_listItem();
context.load(listItem);

context.executeQueryAsync(

// Success callback after getting the actual list item that is
// represented by the Publishing Page.
// We can now get its FieldValues, one of which is its FileLeafRef value.
// We can then use that value to build the Url to the new page
// and set the href or our link to that Url.
function () {
if (typeof callback == “function”) {
callback(listItem);
}
},

// Failure callback after getting the actual list item that is
// represented by the Publishing Page.
function (sender, args) {
alert(‘Failed to get new page: ‘ + args.get_message());
}
);
},
// Failure callback after trying to add a new Publishing Page.
function (sender, args) {
alert(‘Failed to Add Page: ‘ + args.get_message());
}
);
});
},
// Failure callback after trying to get the host Web as a PublishingWeb.
function (sender, args) {
alert(‘Failed to get the PublishingWeb: ‘ + args.get_message());
});
});
});
});

}



</script>

Check out Best Alternative to InfoPath -> Try Now

You May Also like the Following SharePoint Online Tutorials: