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