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

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

By Global SharePoint in SharePoint, SharePoint Online, SPFx SharePoint Framework on
One comment

 95,810 total views,  16 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: Now let’s start the web part development. Before that, we should create a custom list in the SharePoint online site. Here I have created the list named as “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 SharePoint List Items using SPFx no javascript framework
Get SharePoint List Items using SPFx no javascript framework
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 as  “ReadSPListItems” Open the node.js command prompt 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 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 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 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) 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
Lets, 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 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 below:
Get SharePoint List Items using SPFx no javascript framework - solution scaffolding
Get SharePoint List Items using SPFx no javascript framework – solution scaffolding
This will take 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.
Get SharePoint List Items using SPFx no javascript framework code editor
Get SharePoint List Items using SPFx no javascript framework 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.
ReadSpListItemsWebPart.ts - Get SharePoint List Items using SPFx no javascript framework
ReadSpListItemsWebPart.ts – Get SharePoint List Items using SPFx no javascript framework
Copy-paste the below code in the above file – the below-highlighted code or method I have added, rest all 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

              })

            ]

          }

        ]

      }

    ]

  };

}

}
  Brief description about the above code or how you can display your list data into the web part. Add your list columns 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;
  }
  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
Get SharePoint List Items using SPFx no javascript framework - Display Data
Get SharePoint List Items using SPFx no javascript framework – Display Data
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: 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

Download SharePoint Online & Office 365 Administration eBook

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



Buy SharePoint Online & Office 365 Administration eBook


 

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.

 
 
Tags: , , , , ,

1 comments on “Get list items from SharePoint using SPFx framework(No Javascript Framework)”

  1. Pingback: How to pass textbox entry in SPFx framework as a parameter - SharePoint Online | Global SharePoint Diary