SPFX create new list using CODE SPHttpClient
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