Developing SharePoint Framework Web Parts Using ReactJS - Part Two

Introduction

 

In this article, you will learn about developing a SharePoint framework web part to retrieve and render list items from SharePoint using React JavaScript framework.

 

In my previous article, you will have seen creating the SPFx web part with ReactJS and gotten a basic understanding about the components present.

• Developing SharePoint Framework Web Parts using React JS - Part One 

The following sections show the files of SPFx web part project with necessary changes. The files are already present in the project, only the content should be modified. 

 

Local Properties File (ISplistitemsProps.ts)

 

The properties that will be used across the files are declared in ISplistitemsProps.ts file. The properties are declared using the interface, which can then be accessed by other files. 

export interface ISplistitemsProps {
  description: string;
  siteurl: string;
}

Note

Don't confuse this file with pane property definition file (ISplistitemsWebPartProps.ts).  

 

Web Part File (SplistitemsWebPart.ts)

 

The web part file is the starting point for rendering the web part data. Let us start the changes with the web part file (SplistitemsWebPart.ts).

• There are no changes to the properties pane.
• The render method displays the content.
• The data should be manipulated using React framework. The same is accomplished with React.createElement. This is the entry point for React library/component. This will create DOM elements. The class and properties are passed as parameters.

public render(): void {
  const element: React.ReactElement<ISplistitemsProps > = React.createElement(
    Splistitems,
    {
      description: this.properties.description,
      siteurl: this.context.pageContext.web.absoluteUrl
    }
  );

  ReactDom.render(element, this.domElement);
}

React Components File (Splistitems.tsx)

 

Modules

Splistitems.tsx file is used for manipulating the React components. Necessary modules are imported using 'import' keyword.

import * as React from 'react';
import { css } from 'office-ui-fabric-react';
import styles from './Splistitems.module.scss';
import { ISplistitemsProps } from './ISplistitemsProps';
import * as jquery from 'jquery';

Note

• Additionally, the jQuery module is imported to retrieve the items as JSON data. The data can be displayed without using jQuery plugin as well.
• The jQuery plugin is installed using 'npm install --save jquery' and 'npm install --save @types/jquery' commands.
• Then, it can be imported using "import * as jquery from 'jquery'" in the web part or React component files.

State Object

The list item properties, required for rendering, are declared using the interface (ISplistitemsState). Later, this interface will be used for setting State Object (check constructor method). This interface will be considered as subset of the JSON data (list items, AJAX response,  JSON). 

export interface ISplistitemsState{
  items:[
        {
          "Title":string,
          "Id":string,
          "Created":string;
          "Author":{
            Title:string;
          }
        }]
}

Class with constructor and methods

• The class is defined with the constructor, which has properties and state object parameters. The state object is initialized here.
• The render method has the HTML elements to be displayed on the web part. Please note here, the state object is used to display the data dynamically on the web part.
• The list data will be displayed once the state object is loaded. This can be done using any of the ReactJS life cycle methods. In this sample, I have used componentWillMount method to set the state object. The life cycle method pulls the list items using AJAX call as JSON response. On success, the JSON data is initialized to state object.

export default class Splistitems extends React.Component<ISplistitemsProps, ISplistitemsState> {
  public constructor(props: ISplistitemsProps, state: ISplistitemsState){
    super(props);
    this.state = {
      items: [
        {
          "Title": "",
          "Id": "",
          "Created":"",
          "Author":{
            "Title":""
          }
        }
      ]
    };
  }

  public componentWillMount(){
    var reactHandler = this;
    jquery.ajax({
        url: `${this.props.siteurl}/_api/web/lists/getbytitle('TestList')/items?$select=Title,Id,Created,Author/Title&$expand=Author`,
        type: "GET",
        headers:{'Accept': 'application/json; odata=verbose;'},
        success: function(resultData) {
          /*resultData.d.results;*/
          reactHandler.setState({
            items: resultData.d.results
          });
        },
        error : function(jqXHR, textStatus, errorThrown) {
        }
    });
  }


  public render(): React.ReactElement<ISplistitemsProps> {
    return (
      <div className={styles.listItemsForm}>
        <div className={styles.Table}>
          <div className={styles.Heading}>
            <div className={styles.Cell}>Title</div>
            <div className={styles.Cell}>Created</div>
            <div className={styles.Cell}>Author</div>

          </div>
            {this.state.items.map(function(item,key){
              return (<div className={styles.Row} key={key}>
                  <div className={styles.Cell}>{item.Title}</div>
                  <div className={styles.Cell}>{item.Created}</div>
                  <div className={styles.Cell}>{item.Author.Title}</div>
                </div>);
            })}

        </div>
      </div>

    );
  }
}

Style File (Splistitems.module.scss)

 

The necessary style content is placed inside Splistitems.module.scss file.

.listItemsForm {
  .container {
    max-width: 700px;
    margin: 0px auto;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
  }

  .row {
    padding: 20px;
  }

  .listItem {
    max-width: 715px;
    margin: 5px auto 5px auto;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
  }

  .button {
    text-decoration: none;
  }
  .listItemTitle{
    font-size: large;
    color: darkblue;
  }
  .listItemProps{
    font-size: small;
  }

  .Table
    {
        display: table;
    }
    .Title
    {
        display: table-caption;
        text-align: center;
        font-weight: bold;
        font-size: larger;
    }
    .Heading
    {
        display: table-row;
        font-weight: bold;
        text-align: center;
    }
    .Row
    {
        display: table-row;
    }
    .Cell
    {
        display: table-cell;
        border: solid;
        border-width: thin;
        padding-left: 5px;
        padding-right: 5px;
    }
}

Test/Deploy

• Then, the web part can be tested using gulp serve command and then opening the web part using SharePoint site's workbench.aspx page.  
• The web part can also be packaged and deployed to the site. I have explained about the same in this article. 

The below snapshot shows the web part added to the site's workbench.aspx page.

 

Summary

 

Thus, you have learned developing the SPFx web part with React framework components to display the list items.