Create a SharePoint List or Library Using No Framework in SPFx Web Part

In this article, I will explain how to create both a SharePoint list and a document library using the SharePoint Framework (SPFx) web part. To achieve this, we will use the SPHttp client and the web part we will create with No framework. Let’s get started!

Create SharePoint List & Library Using SPFx

Look at the example below; I’ve created a custom webpart that will take the input below to create a SharePoint list & library.

• List Name = Provide SharePoint list or library name
• Description = Provide a description
• List Type
  • SharePoint List
  • SharePoint Document Library

When we click on the button control, it first checks whether the user has provided a list name. If not, it displays an alert message informing users that they should give the list name. If the list /library name is provided, it will check whether this list name already exists on the SharePoint site; if it exists, it displays another alert message like ” the provided list already exists.

If it does not exist on the SharePoint site, it will create and display another alert message to inform you that the list/library has been created successfully.

Follow the steps below to achieve this!

1. Open the Node.js command prompt to create a new solution. Create a directory by providing the command below.

md SharePointListandLibraryCreation

2. Now, enter that directory by providing the command below.

cd SharePointListandLibraryCreation

3. Run the below Yeoman generator command to quickly create a SharePoint client-side solution project with the right toolchain and project structure.

yo @microsoft/sharepoint

Clicking enter after providing the above command will ask the questions below. Please provide the answers I have provided below.

• What is your solution name? = Click enter for the default name or type your own solution name. I took the default one.
• Which type of client-side component to create? = Wepart
• What is your Web part name? =Create SharePoint List & Library
• Which template would you like to use?= No framework

4. Once it creates the project successfully, provide code . Clicking on Enter takes you to Visual Studio Code. In the image below, you will see the web part created under the src folder.

We need to write the code in the .ts file to create a Webpart.

5. To test the web part locally before deployment, provide your SharePoint site URL to the “initialPage” parameter in the serve.json file located in the config folder.

"InitialPage": "https://<tenant name>.sharepoint.com/sites/<Site Name>"

Keep the /_layouts/workbench.aspx as it is in the URL. Only change the tenant domain. Then save the changes.

6. Open the CreateSharePointListLibraryWebpart.ts file and replace the top code with the one below.

import { Version } from '@microsoft/sp-core-library';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import styles from './CreateSharePointListLibraryWebPart.module.scss'
import { SPHttpClient, SPHttpClientResponse, ISPHttpClientOptions } from '@microsoft/sp-http';

export interface ICreateSharePointListLibraryWebPartProps {
  description: string;
  listName: string;
  listDescription: string;
  listType: string;
}

Here, we’re importing the SPHttpClient class to perform REST calls to SharePoint. We must define the custom properties to accept the list name, description, and type on the interface.

7. Within the export default class, add the code below.

  private createSharePointList(): void {
    const listName = this.properties.listName;
    const listDescription = this.properties.listDescription;
    const listType = this.properties.listType;
    const getListUrl: string = `${this.context.pageContext.web.absoluteUrl}/_api/web/lists/GetByTitle('${encodeURIComponent(listName)}')`;

    this.context.spHttpClient.get(getListUrl, SPHttpClient.configurations.v1).then((response: SPHttpClientResponse) => {
      if (response.status === 200) {
        alert(`The list '${listName}' already exists.`);
        return; 
      }
      if (response.status === 404) {
        const createListUrl: string = this.context.pageContext.web.absoluteUrl + "/_api/web/lists";
        const listDefinition: any = {
          "Title": listName,
          "Description": listDescription,
          "AllowContentTypes": true,
          "BaseTemplate": listType === 'List' ? 100 : 101, 
          "ContentTypesEnabled": true
        };
        
        const spHttpClientOptions: ISPHttpClientOptions = {
          "body": JSON.stringify(listDefinition)
        };

        this.context.spHttpClient.post(createListUrl, SPHttpClient.configurations.v1, spHttpClientOptions)
          .then((createResponse: SPHttpClientResponse) => {
            if (createResponse.status === 201) {
              alert(`The ${listType} '${listName}' has been created successfully.`);
            } else {
              alert(`Error: ${createResponse.status} - ${createResponse.statusText}`);
            }
          })
          .catch((error) => {
            alert(`Error creating the list: ${error.message}`);
          });
      } else {
        alert(`An error occurred: ${response.status} - ${response.statusText}`);
      }
    }).catch((error) => {
      alert(`Error checking the list: ${error.message}`);
    });
  }

Here, I have created a private method, createSharePointList(). Refer to the explanation for the code above.

• listName, listDescription, listType = Const variables access the properties we defined in the interface before.
• const getListUrl = This variable stores the SharePoint list Url.
• We use the get() method on the SPHttpClient class to fetch SharePoint list information using REST API calls.
• This get() method takes three parameters.
  • URL = getListUrl (Stores the SharePoint list URL)
  • Configuration(SPHttpClient.configurations.v1) = Used to set the default headers and version numbers.
  • Options (ISPHttpClientOptions) = Optional parameter used to set the URL explicitly.
• From this.context.spHttpClient.get(getListUrl, SPHttpClient.configurations.v1) to fetch the response we’re using
  • .then() method = fetches success messages.
  • .catch() method = fetches error messages.
• Now, the HTTP server sends some responses based on the URL we provided to it.
• If the status code is 200 (OK), it means the list we provided in the URL already exists on the SharePoint site. Through the alert() function, we inform users that the list already exists.
• Status code = 404 (Not Found), list not found on SharePoint site, so we’re creating the list with the help of the post() method of the SPHttp class.
  • createListUrl = Variable stores the SharePoint site url to create the list.
  • listDefinition = Variable stores the list definition.
  • spHttpClientOptions = Variable stores the list definition in JSON format.
• Now this.context.spHttpClient.post(createListUrl, SPHttpClient.configurations.v1, spHttpClientOptions) will create the SharePoint list or document library we provided. It returns Http status codes.
  • Status code 201 (Created) indicates that the list was created successfully.
• In case any problems occur while creating the SharePoint list/library, the catch() method catches the errors and displays them using an alert().

8. Replace the render() method in your .ts file with the one below.

  public render(): void {
    this.domElement.innerHTML = `
      <div class="">
        <h3>Create SharePoint List or Document Library</h3>
        <table>
          <tr>
              <td><label for="listName">List Name:</label></td>
              <td><input type="text" id="listName" placeholder="Enter List Name" /></td>
          </tr>
          <tr>
              <td><label for="listDescription">Description:</label></td>
              <td><textarea id="listDescription"  rows="4" cols="50" placeholder="Enter List  Description" ></textarea></td>
          </tr>
          <tr>
              <td><label for="listType">List Type:</label></td>
              <td> 
                  <input type="radio" id="list" name="listType" value="List" />
                  <label for="list">SharePoint List</label><br />
                  <input type="radio" id="documentLibrary" name="listType" value="DocumentLibrary" />
                 <label for="documentLibrary">SharePoint Document Library</label>
            </td>
          </tr>
          <tr>
              <td colspan="2" class="${styles[buttonContainer]}">        
                  <button type="button" id="createListBtn" class="${styles[msButton]}">
                      <span class="ms-Button-label">Create SharePoint List / Library</span>
                  </button>
            </td>
          </tr>
        </table>
      </div>;
  
    // Bind input field values
    const listNameInput: HTMLInputElement = this.domElement.querySelector('#listName') as HTMLInputElement;
    const listDescriptionInput: HTMLInputElement = this.domElement.querySelector('#listDescription') as HTMLInputElement;
    const listRadioButtons: NodeListOf<HTMLInputElement> = this.domElement.querySelectorAll('input[name="listType"]');

    listNameInput.value = this.properties.listName || '';
    listDescriptionInput.value = this.properties.listDescription || '';
    this.setListTypeRadioButtonValue(this.properties.listType || 'List', listRadioButtons);
    const createListButton: HTMLButtonElement = this.domElement.querySelector('#createListBtn') as HTMLButtonElement;

    createListButton.addEventListener('click', () => {
      if(listNameInput.value.trim()===''){
alert('Please Provide SharePoint List Name / Library Name');
return;
      }
      this.properties.listName = listNameInput.value;
      this.properties.listDescription = listDescriptionInput.value;
      this.properties.listType = this.getListTypeFromRadioButtons(listRadioButtons);
      this.createSharePointList();
    });
  }

The above code creates the webpart on the SharePoint site workbench.

• Within the HTML <table> </table> tags, we’ve defined the script to create a webpart with the following input controls.
  • List name =text input control
  • List Description = text area control
  • List Type = radio control
  • Button control
• const listNameInput, listDescriptionInput, listRadioButtons = To interact with the HTML elements dynamically, we’re using DOM elements and binding the input data to these variables.
• While clicking the button control to create a SharePoint list/ library, we add an event listener called createListButton. We provide the input values to the properties used to create a SharePoint list within this.
  • If the list name is empty, we’re displaying an alert message to inform users that the list name is empty.
  • After providing input values to the properties, we call the create list method with these createSharePointList();

9. In the export default class under the render() method, add the code below and delete the getPropertyPaneConfiguration () method; it is not required here.

private setListTypeRadioButtonValue(defaultValue: string, radioButtons: NodeListOf<HTMLInputElement>): void {
    radioButtons.forEach((radioButton: HTMLInputElement) => {
      if (radioButton.value === defaultValue) {
        radioButton.checked = true;
      }
    });
  }  
private getListTypeFromRadioButtons(radioButtons: NodeListOf<HTMLInputElement>): string {
    let selectedValue = '';
    radioButtons.forEach((radioButton: HTMLInputElement) => {
      if (radioButton.checked) {
        selectedValue = radioButton.value;
      }
    });
    return selectedValue;
  }

  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }

Here, setListTypeRadioButtonValue and getListTypeFromRadioButtons methods are used to set and get the radio button values.

• SharePoint List
• SharePoint Document Library

In the render() method, when adding input values to the properties, we used the setListTypeRadioButtonValue method, and in the event listener for the list type, we used the getListTypeFromRadioButtons method.

10. Add the code below to the .scss file to apply styles for the button control.

.buttonContainer {
  text-align: center; 
  padding-top: 10px;  
}

.msButton {
  background-color: #04AA6D;
  border: none;
  color: white; 
  border: none;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 15px;
}

Here, I have applied various styles, including font size, padding, and border.

11. Save all the changes and run ‘gulp serve’ in the terminal. Then, it launches the SharePoint site on the workbench. Click on the + icon; under Local, click on the newly created web part CreateSharePointList&Library.

12. Now you’ll get the SPFx web part, as shown in the image below. Click on the Preview button and try to create a SharePoint list and library; it will create and display alert messages based on our actions.

I hope you understand how to create a webpart that will create a SharePoint list and document library using SPFX. In this article, I have explained the code step-by-step, its purpose, and its usage with a demo of how it creates a SharePoint list and library. Follow this article if you’re also trying to develop a webpart to create a SharePoint list.

Also, you may like:

• SPFx Fluent UI Basic List Example
• Change Browser Tab Title in SharePoint
• SPFx SwatchColorPicker Office UI Fabric React Control example
• SPFx – Bind dropdown list from SharePoint list using PnP
• Configure SharePoint Framework Properties and PreconfiguredEntries