SharePoint 2013 Hosting – HostForLIFE.eu :: Create List Item Using PnP JS In SharePoint Framework

In this blog, you will see how to create list item using PnP JS in SharePoint Framework.

@pnp/sp

This package contains the fluent api used to call the SharePoint rest services. Refer to this link for more details.

Create List Item

Create SPFx solution

Open Node.js command prompt.

Create a new folder.

>md spfx-pnpjs-createitem

1	>md spfx-pnpjs-createitem

Navigate to the folder.

>cd spfx-pnpjs-createitem

1	>cd spfx-pnpjs-createitem

Execute the following command to create SPFx webpart.

>yo @microsoft/sharepoint

1	>yo @microsoft/sharepoint

Enter all the required details to create a new solution. Enter the webpart named CreateItem and select React framework.

Yeoman generator will perform scaffolding process and once it is completed, lock down the version of project dependencies by executing the following command.

>npm shrinkwrap

1	>npm shrinkwrap

Execute the following command to open the solution in the code editor.

>code

>code

Execute the following command to install the pnp sp library.

>npm install @pnp/sp --save

1	>npm install @pnp/sp --save

Create a new file named as “ICreateItemState.ts” under Components folder and update the code as shown below.

import { MessageBarType } from 'office-ui-fabric-react';  
export interface ICreateItemState {  
    title: string;  
    showMessageBar: boolean;    
    messageType?: MessageBarType;    
    message?: string;  
}

import { MessageBarType } from 'office-ui-fabric-react';

export interface ICreateItemState {

title: string;

showMessageBar: boolean;

messageType?: MessageBarType;

message?: string;

}

Open the component file “src\webparts\createItem\components\CreateItem.tsx” and update the code as shown below.

import * as React from 'react';  
import styles from './CreateItem.module.scss';  
import { ICreateItemProps } from './ICreateItemProps';  
import { ICreateItemState } from './ICreateItemState';  
import { escape } from '@microsoft/sp-lodash-subset';  
import { TextField } from 'office-ui-fabric-react/lib/TextField';  
import { MessageBar, MessageBarType, IStackProps, Stack } from 'office-ui-fabric-react';  
import { autobind } from 'office-ui-fabric-react';  
import { sp } from "@pnp/sp";  
import "@pnp/sp/webs";  
import "@pnp/sp/lists";  
import "@pnp/sp/items";  
  
const verticalStackProps: IStackProps = {  
  styles: { root: { overflow: 'hidden', width: '100%' } },  
  tokens: { childrenGap: 20 }  
};  
  
export default class CreateItem extends React.Component<ICreateItemProps, ICreateItemState> {  
  constructor(props: ICreateItemProps, state: ICreateItemState) {  
    super(props);  
    this.state = {  
      title: '',  
      showMessageBar: false  
    };  
  }  
  public render(): React.ReactElement<ICreateItemProps> {  
    return (  
      <div className={styles.container}>  
        <div className={styles.row}>  
          {  
            this.state.showMessageBar  
              ?  
              <div className="form-group">  
                <Stack {...verticalStackProps}>  
                  <MessageBar messageBarType={this.state.messageType}>{this.state.message}</MessageBar>  
                </Stack>  
              </div>  
              :  
              null  
          }  
          <div className={styles.row}>  
            <div className="form-group">  
              <TextField label="Title" required onChanged={this.onchangedTitle} />  
            </div>  
            <div className={`${styles.buttonRow} form-group`}>  
              <button type="button" className="btn btn-primary" onClick={this.createItem}>Submit</button>  
            </div>  
          </div>  
        </div>  
      </div>  
    );  
  }  
  
  @autobind  
  private onchangedTitle(title: any): void {  
    this.setState({ title: title });  
  }  
  
  @autobind  
  private async createItem() {  
    try {  
      await sp.web.lists.getByTitle('Customer Tracking').items.add({  
        Title: this.state.title  
      });  
      this.setState({  
        message: "Item: " + this.state.title + " - created successfully!",  
        showMessageBar: true,  
        messageType: MessageBarType.success  
      });  
    }  
    catch (error) {  
      this.setState({  
        message: "Item " + this.state.title + " creation failed with error: " + error,  
        showMessageBar: true,  
        messageType: MessageBarType.error  
      });  
    }  
  }  
}

import * as React from 'react';

import styles from './CreateItem.module.scss';

import { ICreateItemProps } from './ICreateItemProps';

import { ICreateItemState } from './ICreateItemState';

import { escape } from '@microsoft/sp-lodash-subset';

import { TextField } from 'office-ui-fabric-react/lib/TextField';

import { MessageBar, MessageBarType, IStackProps, Stack } from 'office-ui-fabric-react';

import { autobind } from 'office-ui-fabric-react';

import { sp } from "@pnp/sp";

import "@pnp/sp/webs";

import "@pnp/sp/lists";

import "@pnp/sp/items";

const verticalStackProps: IStackProps = {

styles: { root: { overflow: 'hidden', width: '100%' } },

tokens: { childrenGap: 20 }

};

export default class CreateItem extends React.Component<ICreateItemProps, ICreateItemState> {

constructor(props: ICreateItemProps, state: ICreateItemState) {

super(props);

this.state = {

title: '',

showMessageBar: false

};

}

public render(): React.ReactElement<ICreateItemProps> {

return (

{

this.state.showMessageBar

<MessageBar messageBarType={this.state.messageType}>{this.state.message}</MessageBar>

</Stack>

</div>

null

}

</div>

<button type="button" className="btn btn-primary" onClick={this.createItem}>Submit</button>

</div>

);

}

@autobind

private onchangedTitle(title: any): void {

this.setState({ title: title });

}

@autobind

private async createItem() {

try {

await sp.web.lists.getByTitle('Customer Tracking').items.add({

Title: this.state.title

});

this.setState({

message: "Item: " + this.state.title + " - created successfully!",

showMessageBar: true,

messageType: MessageBarType.success

});

}

catch (error) {

this.setState({

message: "Item " + this.state.title + " creation failed with error: " + error,

showMessageBar: true,

messageType: MessageBarType.error

});

}

Open the webpart file “src\webparts\createItem\CreateItemWebPart.ts” and add the OnInit() method.

public onInit(): Promise<void> {  
  return super.onInit().then(_ => {    
    sp.setup({  
      spfxContext: this.context  
    });  
  });  
}

public onInit(): Promise<void> {

return super.onInit().then(_ => {

sp.setup({

spfxContext: this.context

});

}

Deploy the solution

Execute the following commands to bundle and package the solution.

>gulp bundle --ship  

>gulp package-solution --ship

>gulp bundle --ship

>gulp package-solution --ship

Navigate to tenant app catalog – Example: https://c986.sharepoint.com/sites/appcatalog/SitePages/Home.aspx

Go to Apps for SharePoint library and upload the package file (sharepoint\solution\spfx-pnpjs-createitem.sppkg). Click Deploy.

Test the webpart

Navigate to the SharePoint site and add the app. Navigate to the page and add the webpart.

Result

Summary

Thus, in this blog, you saw how to create list items using PnP JS in SharePoint Framework.

SharePoint 2013 Hosting – HostForLIFE.eu :: Create List Item Using PnP JS In SharePoint Framework

@pnp/sp

Create List Item

Deploy the solution

Test the webpart

Summary

BLOGROLL

Featured On

SharePoint 2013 Hosting – HostForLIFE.eu :: Create List Item Using PnP JS In SharePoint Framework

@pnp/sp

Create List Item

Deploy the solution

Test the webpart

Summary

BLOGROLL

Featured On

Tags