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

By Global SharePoint in SharePoint, SharePoint Online, SPFx SharePoint Framework on April 12, 2020October 18, 2020

56,687 total views, 108 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

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

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

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

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

You must log in to post a comment.

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

See Also

Like this:

Related

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

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

See Also

Share this:

Like this:

Related

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