In 4 steps get list items from SharePoint using SPFx framework (No JavaScript Framework)

Get list items from SharePoint using SPFx framework (No JavaScript Framework) – In this tutorial, we will learn about how we can get list items from the SharePoint list using the SPFx framework or SharePoint framework (no javascript framework model). This is my fourth article in the SPFx web part learning series. You may refer to my previous articles:

• Create custom property in SharePoint Framework – SPFx web part pane
• Understanding solution structure in SharePoint framework (SPFx)
• Develop your first hello world web part in sharepoint framework (SPFx)

Get list items from SharePoint using SPFx framework(No Javascript Framework)

Now let’s start the web part development. Before that, we should create a custom list on the SharePoint online site. Here I have created the list named “Customer” with the below columns:

• Customer Name (Title column name has been renamed to the customer name).
• Customer ID – Single line of text type.
• Customer Contact No – Single line of text type.

Get list items from SharePoint using SPFx framework (SharePoint API get list items) – Get Data from SharePoint list in SPFx

So, in this web part, our target is to read the ‘customer’ list using the SPFx framework (no javascript framework) and display the items in the web part. Let’s start now. Create SharePoint Framework (SPFx) solution: Step 1: Create a new solution, let’s name it “ReadSPListItems” Open the node.js command prompt and type the below command – mkdir ReadSPListItems

C:\Temp\SPFx>mkdir ReadSPListItems

Navigate to the above newly created directory ReadSPListItems using the below command:

C:\Temp\SPFx>cd ReadSPListItems

Step 2: Run the Yeoman SharePoint Generator (yo @microsoft/sharepoint) to create the solution.

C:\Temp\SPFx\ReadSPListItems>yo @microsoft/sharepoint

After some time, you will be presented with a wizard with some questionnaires. Solution Name: Hit enter, it will take the default solution name otherwise you can pass your custom name.

Let's create a new SharePoint solution.
? What is your solution name? (read-sp-list-items)

The target for your component(s)? Hit enter on the default selection – SharePoint Online only (latest) otherwise you can select SharePoint 2016 or 2019 onwards version as well.

Which baseline packages do you want to target for your component(s)? (Use arrow keys)
> SharePoint Online only (latest)
SharePoint 2016 onwards, including 2019 and SharePoint Online
SharePoint 2019 onwards, including SharePoint Online

Select, where do you want to place the files? hit enter on the default selection – Use the current folder

Let's create a new SharePoint solution.
? What is your solution name? read-sp-list-items
? Which baseline packages do you want to target for your component(s)? SharePoint Online only (latest)
? Where do you want to place the files? (Use arrow keys)
> Use the current folder
Create a subfolder with solution name

Select Deployment option –  Select Y if you want to allow the app to be deployed instantly to all sites and will be accessible everywhere. Select N if you want to install the app on each site explicitly. Here let’s type “N” and hit enter.

Let's create a new SharePoint solution.
? What is your solution name? read-sp-list-items
? Which baseline packages do you want to target for your component(s)? SharePoint Online only (latest)
? Where do you want to place the files? Use the current folder
Found npm version 6.13.4
? Do you want to allow the tenant admin the choice of being able to deploy the solution to all sites immediately without
running any feature deployment or adding apps in sites? (y/N) N

Select solution permission: Will the components in the solution require permission to access web APIs that are unique and not shared with other components in the tenant? (Y/N), type N, and hit enter.

Let's create a new SharePoint solution.
? What is your solution name? read-sp-list-items
? Which baseline packages do you want to target for your component(s)? SharePoint Online only (latest)
? Where do you want to place the files? Use the current folder
Found npm version 6.13.4
? Do you want to allow the tenant admin the choice of being able to deploy the solution to all sites immediately without
running any feature deployment or adding apps in sites? No
? Will the components in the solution require permissions to access web APIs that are unique and not shared with other c
omponents in the tenant? (y/N)N

Type of client-side component to create: We can choose any of the below client-side solutions:

• WebPart
• Extension.
• Library

Let’s,  select “WebPart” and hit enter.

Let's create a new SharePoint solution.
? What is your solution name? read-sp-list-items
? Which baseline packages do you want to target for your component(s)? SharePoint Online only (latest)
? Where do you want to place the files? Use the current folder
Found npm version 6.13.4
? Do you want to allow the tenant admin the choice of being able to deploy the solution to all sites immediately without
running any feature deployment or adding apps in sites? No
? Will the components in the solution require permissions to access web APIs that are unique and not shared with other c
omponents in the tenant? No
? Which type of client-side component to create? (Use arrow keys)
> WebPart
Extension
Library

Web Part Name: Type the web part name, here I have given it as ReadSPListItems, you can give any name or can continue with the default name. Hit enter.

Let's create a new SharePoint solution.
? What is your solution name? read-sp-list-items
? Which baseline packages do you want to target for your component(s)? SharePoint Online only (latest)
? Where do you want to place the files? Use the current folder
Found npm version 6.13.4
? Do you want to allow the tenant admin the choice of being able to deploy the solution to all sites immediately without
running any feature deployment or adding apps in sites? No
? Will the components in the solution require permissions to access web APIs that are unique and not shared with other c
omponents in the tenant? No
? Which type of client-side component to create? WebPart
Add new Web part to solution read-sp-list-items.
? What is your Web part name? ReadSPListItems

Web part description: You can give your own web part description or can continue with the default description. Hit enter.

Let's create a new SharePoint solution.
? What is your solution name? read-sp-list-items
? Which baseline packages do you want to target for your component(s)? SharePoint Online only (latest)
? Where do you want to place the files? Use the current folder
Found npm version 6.13.4
? Do you want to allow the tenant admin the choice of being able to deploy the solution to all sites immediately without
running any feature deployment or adding apps in sites? No
? Will the components in the solution require permissions to access web APIs that are unique and not shared with other c
omponents in the tenant? No
? Which type of client-side component to create? WebPart
Add new Web part to solution read-sp-list-items.
? What is your Web part name? ReadSPListItems
? What is your Web part description? (ReadSPListItems description)

Web part framework select: We can select any of the below frameworks:

• No JavaScript framework
• React
• Knockout

Select the No JavaScript framework and hit enter.

Let's create a new SharePoint solution.
? What is your solution name? read-sp-list-items
? Which baseline packages do you want to target for your component(s)? SharePoint Online only (latest)
? Where do you want to place the files? Use the current folder
Found npm version 6.13.4
? Do you want to allow the tenant admin the choice of being able to deploy the solution to all sites immediately without
running any feature deployment or adding apps in sites? No
? Will the components in the solution require permissions to access web APIs that are unique and not shared with other c
omponents in the tenant? No
? Which type of client-side component to create? WebPart
Add new Web part to solution read-sp-list-items.
? What is your Web part name? ReadSPListItems
? What is your Web part description? ReadSPListItems description
? Which framework would you like to use? (Use arrow keys)
> No JavaScript framework
React
Knockout

Finally, the solution scaffolding looks like the below:

This will take a few minutes to scaffold the solution, let’s wait till that, then we will get the below “Congratulation!” status – now we can type “code .” to open the solution in the visual studio code editor.

Step 3:

In the command prompt type the below command  “code .” to open the solution files in the visual studio code editor.

C:\Temp\SPFx\ReadSPListItems>code .

Once the solution gets opened, navigate to the “ReadSpListItemsWebPart.ts” under the src->webparts\readSPListItems which is the main file, gets created automatically. This file we need to customize in order to add any custom functionality to the default web part.

Copy-paste the below code in the above file – the below-highlighted code or method I have added, the rest of the codes were created by default.

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 './ReadSpListItemsWebPart.module.scss';

import * as strings from 'ReadSpListItemsWebPartStrings';

import {

  SPHttpClient,

  SPHttpClientResponse   

} from '@microsoft/sp-http';

import {

  Environment,

  EnvironmentType

} from '@microsoft/sp-core-library';

export interface IReadSpListItemsWebPartProps

 {

  description: string;

}

export interface ISPLists 

{

  value: ISPList[];

}

export interface ISPList 

{

  Title: string;

  CustomerID: string;

  CustomerContactNo :string;

}

export default class ReadSpListItemsWebPart extends BaseClientSideWebPart <IReadSpListItemsWebPartProps>

 {

  private _getListData(): Promise<ISPLists>

   {

    return this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl + "/_api/web/lists/GetByTitle('Customer')/Items",SPHttpClient.configurations.v1)

        .then((response: SPHttpClientResponse) => 

        {

        return response.json();

        });

    }

    private _renderListAsync(): void

    {

   

     if (Environment.type == EnvironmentType.SharePoint || 

              Environment.type == EnvironmentType.ClassicSharePoint) {

      this._getListData()

        .then((response) => {

          this._renderList(response.value);

        });

 }

  }

  private _renderList(items: ISPList[]): void 

   {

    let html: string = '<table border=1 width=100% style="border-collapse: collapse;">';

    html += '<th>Customer Name</th> <th>Customer Code </th><th>Customer Contact Number</th>';

    items.forEach((item: ISPList) => {

      html += `

      <tr>            

          <td>${item.Title}</td>

          <td>${item.CustomerID}</td>

          <td>${item.CustomerContactNo}</td>

          

          </tr>

          `;

    });

    html += '</table>';

  

    const listContainer: Element = this.domElement.querySelector('#spListContainer');

    listContainer.innerHTML = html;

  }

  public render(): void {

    this.domElement.innerHTML = `

      <div class="${ styles.readSpListItems }">

        <div class="${ styles.container }">

          <div class="ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${ styles.row }">

          <div class="ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1">

          <span class="ms-font-xl ms-fontColor-white">Welcome to SharePoint Modern Developmennt</span>

          <p class="ms-font-l ms-fontColor-white">Loading from ${this.context.pageContext.web.title}</p>

          <p class="ms-font-l ms-fontColor-white">Retrive Data from SharePoint List</p>

        </div>

      </div> 

          <div class="ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}">

          <div>List Items</div>

          <br>

           <div id="spListContainer" />

        </div>

      </div>`;

      this._renderListAsync();

  }
   

  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

              })

            ]

          }

        ]

      }

    ]

  };

}

}

Retrieve SharePoint list items using SPFx – SharePoint API get list items

Brief description about the above code or how you can display your list data in the web part. Add your list column’s internal name in the below section:

export interface ISPList 
{
  Title: string;
  CustomerID: string;
  CustomerContactNo :string;
}

In the below method, replace the “Customer” list with your list title. this.context.pageContext.web.absoluteUrl + “/_api/web/lists/GetByTitle(‘Customer‘)

private _getListData(): Promise<ISPLists>
   {
    return this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl + "/_api/web/lists/GetByTitle('Customer')/Items",SPHttpClient.configurations.v1)
        .then((response: SPHttpClientResponse) => 
        {
        return response.json();
        });
    }

Now, in the _renderList method in the html+= line add your all table headers and in the tr section add reference all your SharePoint list columns.

private _renderList(items: ISPList[]): void 
   {
    let html: string = '<table border=1 width=100% style="border-collapse: collapse;">';
    html += '<th>Customer Name</th> <th>Customer Code </th><th>Customer Contact Number</th>';
    items.forEach((item: ISPList) => {
      html += `
      <tr>            
          <td>${item.Title}</td>
          <td>${item.CustomerID}</td>
          <td>${item.CustomerContactNo}</td>       
          </tr>
          `;

    });
    html += '</table>'
    const listContainer: Element = this.domElement.querySelector('#spListContainer');
    listContainer.innerHTML = html;
  }

Get list items from SharePoint using SPFx framework (retrieve SharePoint list items using SPFx) demo

Finally, let’s run the “Gulp Serve” command in the same command prompt and once we launch and add the web part in the SharePoint workbench like below https://globalsharepoint2020.sharepoint.com/sites/allcompany/_layouts/15/workbench.aspx

Now, we can see all list items from the “Customer” list have been displayed over here. Download: The above code can be downloaded from here.

Summary: Get list items from SharePoint using SPFx framework (Get Data from SharePoint list in SPFx)

Thus, in this article, we have learned the below with respect to reading the list items from SharePoint online list:

• How to get list items from SharePoint List using the SPFx framework(No Javascript Framework).
• How to work with list items with Typescript and REST API.
• How to create the SPFx web part to retrieve SharePoint List Items using no javascript framework.
• How to retrieve and display SharePoint List Items using REST API and SPFx

See Also: SharePoint Online tutorial

You may also like the below SharePoint Online tutorials:

• Create custom property in SharePoint Framework – SPFx web part pane
• Understanding solution structure in SharePoint framework (SPFx)
• Develop your first hello world web part in sharepoint framework (SPFx)
• Column header formatting in SharePoint list Quick Edit or Datasheet View
• Enable and configure information rights management (IRM) in SharePoint Online
• Manage recycle bin in SharePoint Online – Office 365
• In 4 steps create office 365 trial account – sign up free subscription
• Add more than 5 conditions in InfoPath form’s rule
• How to validate the date column in Infopath form
• How to a copy list item to another list using SharePoint designer workflow
• SharePoint Framework (SPFx) development environment Setup step by step
• 3 ways add a picture library in the communication site – SharePoint Online
• SharePoint generation or version history from the year 2000 to 2020
• Office 365: Getting started with SharePoint PnP PowerShell – installation
• In 2 steps convert a classic SharePoint page to modern using PnP
• Office 365: Retrieve hub sites and associated sites using PnP Powershell
• Create a modern team site using PnP PowerShell in SharePoint
• In 4 steps access SharePoint online data using postman tool
• SharePoint admin center: Learn SharePoint online administration in an hour – step by step
• SharePoint REST API: GET vs POST vs PUT vs DELETE vs PATCH
• Office 365: Understanding the hub site in SharePoint online
• Create SharePoint online list using PnP provisioning template
• List Template IDs In SharePoint Online/SharePoint 2019/2016/2013/2010/2007

Download SharePoint Online & Office 365 Administration eBook

Buy the premium version of SharePoint Online & Office 365 administration eBook from here:

 

Get the free demo PDF eBook from here:

FREE DOWNLOAD

Send download link to:

Subscribe to get exclusive content and recommendations every month. You can unsubscribe anytime.

 

About Post Author

Global SharePoint

SharePoint Specialist (2019 | 2016 | 2013 | 2010 | 2007 | SharePoint Online | Microsoft 365)

See author's posts