Retrieve SharePoint List Items Using SharePoint Framework Development Model

SharePoint Framework is the new development model and a lot of work has been going on with it in the past year. It went to General Availability on Feb 23, 2017. It is a page and Web part model which provides full support for client-side SharePoint development, easy integration with SharePoint data, and support for an open source tooling. With SharePoint Framework, you can use modern Web technologies and the tools in your preferred development environment to build productive experiences and apps in SharePoint.

In the previous article, we saw how to set up the development environment for SharePoint Framework. We have seen how to create and deploy the first client Web part, using SharePoint Framework here.

Create SharePoint Framework Web part project

In this article, we will be creating a client Web part, which will be retrieving the list items from SharePoint List (EmployeeList) and will display it in the tabular form in the client Web part, as shown below.

Before moving forward, ensure that SharePoint Framework development environment is ready.

Spin up Node.js command prompt, using which we will be creating the Web part project structure.

We can create the directory, where we will be adding the solution, using the command given below.

md GetSharePointListItems

Let’s move to the newly created working directory, using the command.

cd GetSharePointListItems

We will then create the client Web part by running the Yeoman SharePoint Generator.

yo @microsoft/sharepoint

This will display the prompt, which we will have to fill up, so as to proceed with the project creation.

• What is your solution name? : Set it to ‘GetSPListItems’.

On pressing enter, we will be asked to chose the working folder for the project.

• Where do you want to place your files- Use current folder.
• What framework would you like to start with- Select “No javaScript web framework” for the time being, as this is a sample Web part.
• What is your Webpart name- We will specify it as ‘GetSPListItems’ and press Enter
• What is your Webpart description- We will specify it as this Webpart will retrieve the list items from SharePoint list and display in a table.
  
  
  

Yeoman has started working on the scaffolding of the project. It will install the required dependencies and scaffold the solution files for the ‘GetListItems’ Web part, which will take some time to complete. Once completed, we will get a congratulations message.

Test the Web part locally

In order to test the client Web part, we can build and run it on the local Web Server, where we are developing the Web part. SharePoint Framework development uses HTTPS endpoint by default. Since a default certificate is not configured for the local development environment, our Browser will report a certificate error. SharePoint Framework tool chain comes with a developer certificate, which we can install for testing the client Web parts locally. From the current Web part directory, run the command given below.

gulp trust-dev-cert

Now, let’s preview the Web part by running the gulp serve command.

This command will execute a series of gulp tasks and will create a Node-based HTTPS Server at 'localhost:4321'. It will then open the Browser and display the client Web part.

This indicates that the project structure is set up correctly. We will now open up the solution in Visual Studio Code to add the logic to retrieve the list items from SharePoint and display it as a table in this page.

To stop Gulp from listening to the process, we can press ‘Control + C’ . This will terminate the Gulp Serve command and stop the Server.

Edit the web part

Now let’s try to edit the web part and add more functionality to it. To do that navigate to “src\webparts\getSpListItems” location.

In the left pane of Visual Studio Code, we can see the project structure. The bulk of the logic resides within the GetSPListItemsWebPart.ts file. Let’s add the code to retrieve SharePoint list items from the Employee List within this TypeScript file.

Define List Model

Since we want to retrieve an Employee list items data, we will be creating list model with SharePoint list fields in the GetListItemsWebPart.TS file, as shown below. Place it above the ‘GetSpListItemsWebPart’ class.

Create Mock HTTPClient to test data locally

In order to test the list item retrieval in the local workbench, we will create a mock store, which returns mock Employee list data. We will create a new file inside ‘src\webparts\ getSpListItems’ folder named MockHttpClient.ts, as shown below.

We will then copy the code given below into MockHttpClient.ts, as shown below.

We can now use the MockHttpClient class in the ‘GetSPListItems’ class. Let’s import the ‘MockHttpClient’ module by going to the GetSpLitItemsWebPart.ts and pasting the line given below just after “import { IGetSpListItemsWebPartProps } from './IGetSpListItemsWebPartProps';”