SPFX Create New Subsite using CODE SPHttpClient
import { Version } from '@microsoft/sp-core-library';
import {
IPropertyPaneConfiguration,
PropertyPaneTextField
} from '@microsoft/sp-property-pane';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import { escape } from '@microsoft/sp-lodash-subset';
import styles from './SiteCreationDemoWebPart.module.scss';
import * as strings from 'SiteCreationDemoWebPartStrings';
import { SPHttpClient, SPHttpClientResponse,ISPHttpClientOptions, SPHttpClientConfiguration } from '@microsoft/sp-http';
export interface ISiteCreationDemoWebPartProps {
description: string;
}
export default class SiteCreationDemoWebPart extends BaseClientSideWebPart<ISiteCreationDemoWebPartProps> {
public render(): void {
this.domElement.innerHTML = `
<div class="${ styles.siteCreationDemo }">
<h1>Create New Sub Site dynamically</h1></br>
<p>Please fill out the below details programatically<p></br>
<p>Name of the Site Title<p><input type='text' id='txtNewSiteName'/></br>
<p>Site URL<p><input type='text' id='txtNewSiteURL'/></br>
<p>Site Description<p>
<textarea rows='5' cols='30' id='txtNewSiteDescription'></textarea></br>
<input type='button' id='btnCreateSubSite' value='create new Site'/>
</div>`;
this.bindEvents();
}
private bindEvents():void {
this.domElement.querySelector('#btnCreateSubSite').addEventListener('click',()=>{
this.createSubSite();
});
}
private createSubSite():void {
var newSiteName = document.getElementById('txtNewSiteName')['value'];
var newSiteURL = document.getElementById('txtNewSiteURL')['value'];
var newSiteDescription = document.getElementById('txtNewSiteDescription')['value'];
const Url: string = this.context.pageContext.web.absoluteUrl + "/_api/web/webinfos/add";
//webinfos means web collection. To web collection we are adding a site.
//ISPHttpClientOptions defining as a JSON object
const SPHttpClientOptions:ISPHttpClientOptions = {
body: `{
"parameters":{
"@odata.type":"SP.WebInfoCreationInformation",
"Title":"${newSiteName}",
"Url":"${newSiteURL}",
"Description":"${newSiteDescription}",
"Language":1033,
"WebTemplate":"STS#0",
"UseUniquePermissions":true
}
}`
};
this.context.spHttpClient.post(Url,SPHttpClient.configurations.v1, SPHttpClientOptions).then((response: SPHttpClientResponse)=>{
debugger;
if(response.status===200){
alert("New Subsite has been created successfully");
}
else{
alert("Error Message: "+response.status+" - "+response.statusText);
}
});
}
protected get dataVersion(): Version {
return Version.parse('1.0');
}
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
return {
pages: [
{
header: {
description: strings.PropertyPaneDescription
},
groups: [
{
groupName: strings.BasicGroupName,
groupFields: [
PropertyPaneTextField('description', {
label: strings.DescriptionFieldLabel
})
]
}
]
}
]
};
}
}
Comments
Post a Comment