116,728 total views, 33 views today
In this tutorial, we will learn about how we can get list items from 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)
- 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.

C:\Temp\SPFx>mkdir ReadSPListItemsNavigate to the above newly created directory ReadSPListItems using the below command:
C:\Temp\SPFx>cd ReadSPListItemsStep 2: Run the Yeoman SharePoint Generator (yo @microsoft/sharepoint) to create the solution.
C:\Temp\SPFx\ReadSPListItems>yo @microsoft/sharepointAfter sometimes, 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 OnlineSelect, 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 nameSelect 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 lets 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) NSelect 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)NType of client-side component to create: We can choose any of the below client-side solutions:
- WebPart
- Extension.
- Library
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 LibraryWeb Part Name: Type the web part name, here I have given 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? ReadSPListItemsWeb 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
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 KnockoutFinally, the solution scaffolding looks like below:


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.

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 }) ] } ] } ] }; } }
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; }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

- 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
- 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
1 comments on “Get list items from SharePoint using SPFx framework(No Javascript Framework)”
You must log in to post a comment.