SPFX Create New Subsite using CODE SPHttpClient











https://mercedessaga.sharepoint.com/sites/teja_dev/SitePages/SPFX-sub-site-creation-using-code.aspx

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 { SPHttpClientSPHttpClientResponse,ISPHttpClientOptionsSPHttpClientConfiguration } from '@microsoft/sp-http';

export interface ISiteCreationDemoWebPartProps {
  descriptionstring;
}

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 Urlstring = 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.v1SPHttpClientOptions).then((responseSPHttpClientResponse)=>{
      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