SPFX create new list using CODE SPHttpClient

on

example:

https://mercedessaga.sharepoint.com/sites/teja_dev/SitePages/SPFX-dynamically-create-SP-List-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 './NewListCreationWbWebPart.module.scss';
  import * as strings from 'NewListCreationWbWebPartStrings';
  import { SPHttpClient, SPHttpClientResponse,ISPHttpClientOptions, SPHttpClientConfiguration } from '@microsoft/sp-http';

  export interface INewListCreationWbWebPartProps {
    description: string;
  }

  export default class NewListCreationWbWebPart extends BaseClientSideWebPart<INewListCreationWbWebPartProps> {

    public render(): void {
      this.domElement.innerHTML = `
        <div class="${ styles.newListCreationWb }">
          <h1>Create New List dynamically</h1></br>
          <p>Please fill out the below details programatically<p></br>
          <p>Name of the List<p><input type='text' id='txtNewListName'/></br>
          <p>List Description<p><input type='text' id='txtNewListDescription'/></br>
          <input type='button' id='btnCreateNewList' value='create new list'/>
        </div>`;

      this.bindEvents();
    }
    private bindEvents():void {
      this.domElement.querySelector('#btnCreateNewList').addEventListener('click',()=>{
        this.createNewList();
      })
    }
    private createNewList():void {
      debugger;
      var newListName = document.getElementById('txtNewListName')['value'];
      var newListDescription = document.getElementById('txtNewListDescription')['value'];
      const listUrl: string = this.context.pageContext.web.absoluteUrl + "/_api/web/lists/GetByTitle('"+ newListName +"')";
      this.context.spHttpClient.get(listUrl,SPHttpClient.configurations.v1).then((response:SPHttpClientResponse)=>{
        if(response.status===200){
          alert("A list already does exists with this name");
          return;
        }
        if(response.status===404){
          const url: string = this.context.pageContext.web.absoluteUrl+"/_api/web/lists";
          const listDefinition:any  = {
            "Title":newListName,
            "Description":newListDescription,
            "AllowContentTypes":true,
            "BaseTemplate":100,//105 contacts list, 100 custom list with title column
            "ContentTypesEnabled":true
          };
          const spHttpClientOptions:ISPHttpClientOptions = {
            "body":JSON.stringify(listDefinition)
          }
          this.context.spHttpClient.post(url, SPHttpClient.configurations.v1,spHttpClientOptions).then((response:SPHttpClientResponse)=>{
            if(response.status===201){
              alert("A new list has been created successfully");
            }
            else{
              alert("Error Message "+response.status+" - "+response.statusText);
            }
          });
        }
        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