Skip to main content

SPFx CRUD operations using React Framework code

props.ts: ICrudwithreactwebpart.ts

import { WebPartContext } from "@microsoft/sp-webpart-base";

export interface ICrudWithReactWebPartProps {
  description: string;
  context:WebPartContext;
  siteUrl: string;
}
-------------
main.ts
CrudWithReactWebPart,
      {
        description: this.properties.description,
        context:this.context,
        siteUrl:this.context.pageContext.web.absoluteUrl
      }
----------------
State file: ICrudWithReactState.ts
import { ISoftwareListItem } from "./ISoftwareListItem";

export interface ICrudWithReactState{
    status: string;
    SoftwareListItems: ISoftwareListItem[];
    SoftwareListItem: ISoftwareListItem;
}
-----------
interface: ISoftwareListItem.ts
export interface ISoftwareListItem{
    Id:number;
    Title:string;
    SoftwareName: string;
    SoftwareVendor: string;
    SoftwareVersion: string;
    SoftwareDescription: string;
}
------------------------
Note: in tsx file, auto bind property onChange
npm i autobind-decorator
import autobind from 'autobind-decorator';

-------------
.tsx file

import * as React from 'react';
import styles from './CrudWithReactWebPart.module.scss';
import { ICrudWithReactWebPartProps } from './ICrudWithReactWebPartProps';
import { escape } from '@microsoft/sp-lodash-subset';
import { ISoftwareListItem } from './ISoftwareListItem';
import { ICrudWithReactState } from './ICrudWithReactState';

import { ISPHttpClientOptions, SPHttpClient, SPHttpClientResponse } from '@microsoft/sp-http';

import { TextField, PrimaryButton, DetailsList, DetailsListLayoutMode, CheckboxVisibility, SelectionMode, Dropdown, IDropdown, IDropdownOption, ITextFieldStyles, IDropdownStyles, DetailsRowCheck, Selection } from 'office-ui-fabric-react';
import autobind from 'autobind-decorator';


//configure columns for the details list component
let _softwareListColumns = [
  {
    key: 'ID',
    name: 'ID',
    fieldName: 'ID',
    minWidth: 50,
    maxWidth: 100,
    isResizable: true
  },
  {
    key: 'Title',
    name: 'Title',
    fieldName: 'Title',
    minWidth: 50,
    maxWidth: 100,
    isResizable: true
  },
  {
    key: 'SoftwareName',
    name: 'SoftwareName',
    fieldName: 'SoftwareName',
    minWidth: 50,
    maxWidth: 100,
    isResizable: true
  },
  {
    key: 'SoftwareVendor',
    name: 'SoftwareVendor',
    fieldName: 'SoftwareVendor',
    minWidth: 50,
    maxWidth: 100,
    isResizable: true
  },
  {
    key: 'SoftwareVersion',
    name: 'SoftwareVersion',
    fieldName: 'SoftwareVersion',
    minWidth: 50,
    maxWidth: 100,
    isResizable: true
  },
  {
    key: 'SoftwareDescription',
    name: 'SoftwareDescription',
    fieldName: 'SoftwareDescription',
    minWidth: 50,
    maxWidth: 100,
    isResizable: true
  }
];

const textFieldStyles: Partial<ITextFieldStyles> = { fieldGroup: { width: 300 } };
const narrowTextFields: Partial<ITextFieldStyles> = { fieldGroup: { width: 300 } };
const narrowDropdownStyles: Partial<IDropdownStyles> = { dropdown: { width: 300 } };

export default class CrudWithReactWebPart extends React.Component<ICrudWithReactWebPartProps, ICrudWithReactState> {


  private _selection: Selection;
  private _onItemsSelectionChanged = () =>{
    this.setState({
      SoftwareListItem:(this._selection.getSelection()[0] as ISoftwareListItem)
    });
  }

  constructor(props: ICrudWithReactWebPartProps, state: ICrudWithReactState) {
    super(props);
    this.state = {
      status: 'Ready',
      SoftwareListItems: [],
      SoftwareListItem: {
        Id: 0,
        Title: "",
        SoftwareName: "",
        SoftwareVendor: "Select an Option",
        SoftwareVersion: "",
        SoftwareDescription: ""
      }
    };

    this._selection = new Selection({
      onSelectionChanged:this._onItemsSelectionChanged,
    });
   
  }

  private _getListItems():Promise<ISoftwareListItem[]>{
    const url:string = this.props.siteUrl+"/_api/web/lists/getbytitle('SoftwareCatalog')/items";
    return this.props.context.spHttpClient.get(url,SPHttpClient.configurations.v1)
    .then(response =>{
      return response.json();
    })
    .then(json=>{
      return json.value;
    }) as Promise<ISoftwareListItem[]>;
  }

  public componentDidMount():void{
    this.bindDetailsList("All records have been loaded successfully");
  }
 
  @autobind
  public btnAdd_click():void{
    debugger;

    const url: string = this.props.siteUrl + "/_api/web/lists/getbytitle('SoftwareCatalog')/items";
   
    const SPHttpClientOptions:ISPHttpClientOptions = {
      "body":JSON.stringify(this.state.SoftwareListItem)
    };

    this.props.context.spHttpClient.post(url,SPHttpClient.configurations.v1,SPHttpClientOptions).then((response:SPHttpClientResponse) => {
      if(response.status === 201){
        alert("record has been added successfully");
        this.bindDetailsList("Record Added and All records loaded successfully!");
      }
      else{
        let errormessage: string = "An error occured. i.e "+response.status+" - "+response.statusText;
        this.setState({
          status:errormessage
        });
      }
    });
  }

  @autobind
  public btnUpdate_click():void{
    debugger;
    let id:number=this.state.SoftwareListItem.Id;

    const url: string = this.props.siteUrl + "/_api/web/lists/getbytitle('SoftwareCatalog')/items("+id+")";

    const headers:any={
      "X-HTTP-Method":"MERGE",
      "IF-MATCH":"*"
    };
   
    const SPHttpClientOptions:ISPHttpClientOptions = {
      "headers":headers,
      "body":JSON.stringify(this.state.SoftwareListItem)
    };

    this.props.context.spHttpClient.post(url,SPHttpClient.configurations.v1,SPHttpClientOptions).then((response:SPHttpClientResponse) => {
      if(response.status === 204){
        alert("record has been updated successfully");
        this.bindDetailsList("Record Updated and All loaded are updated successfully!");
      }
      else{
        let errormessage: string = "An error occured. i.e "+response.status+" - "+response.statusText;
        this.setState({
          status:errormessage
        });
      }
    });
  }

  @autobind
  public btnDelete_click():void{
    debugger;
    let id:number=this.state.SoftwareListItem.Id;

    const url: string = this.props.siteUrl + "/_api/web/lists/getbytitle('SoftwareCatalog')/items("+id+")";

    const headers:any={
      "X-HTTP-Method":"DELETE",
      "IF-MATCH":"*"
    };
   
    const SPHttpClientOptions:ISPHttpClientOptions = {
      "headers":headers
    };

    this.props.context.spHttpClient.post(url,SPHttpClient.configurations.v1,SPHttpClientOptions).then((response:SPHttpClientResponse) => {
      if(response.status === 204){
        alert("record has been deleted successfully");
        this.bindDetailsList("Record Deleted and All records loaded successfully!");
      }
      else{
        let errormessage: string = "An error occured. i.e "+response.status+" - "+response.statusText;
        this.setState({
          status:errormessage
        });
      }
    });
  }
  public bindDetailsList(message:string):void{
    this._getListItems().then(listItems=>{
      this.setState({
        SoftwareListItems:listItems,
        status:message
      });
    });
  }


  private onChangeIDField(event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue: string): void {
    this.setState({
      SoftwareListItem:{
        Id:Number(newValue),
        Title:this.state.SoftwareListItem.Title,
        SoftwareName: this.state.SoftwareListItem.SoftwareName,
        SoftwareVendor: this.state.SoftwareListItem.SoftwareVendor,
        SoftwareVersion: this.state.SoftwareListItem.SoftwareVersion,
        SoftwareDescription:this.state.SoftwareListItem.SoftwareDescription
      }
    });
  }
  private onChangeTitleField(event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue: string): void {
    this.setState({
      SoftwareListItem:{
        Id:this.state.SoftwareListItem.Id,
        Title:newValue,
        SoftwareName: this.state.SoftwareListItem.SoftwareName,
        SoftwareVendor: this.state.SoftwareListItem.SoftwareVendor,
        SoftwareVersion: this.state.SoftwareListItem.SoftwareVersion,
        SoftwareDescription:this.state.SoftwareListItem.SoftwareDescription
      }
    });
  }
  private onChangeSoftwareNameField(event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue: string): void {
    this.setState({
      SoftwareListItem:{
        Id:this.state.SoftwareListItem.Id,
        Title:this.state.SoftwareListItem.Title,
        SoftwareName: newValue,
        SoftwareVendor: this.state.SoftwareListItem.SoftwareVendor,
        SoftwareVersion: this.state.SoftwareListItem.SoftwareVersion,
        SoftwareDescription:this.state.SoftwareListItem.SoftwareDescription
      }
    });
  }
  private onChangeDescriptionField(event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue: string): void {
    this.setState({
      SoftwareListItem:{
        Id:this.state.SoftwareListItem.Id,
        Title:this.state.SoftwareListItem.Title,
        SoftwareName: this.state.SoftwareListItem.SoftwareName,
        SoftwareVendor: this.state.SoftwareListItem.SoftwareVendor,
        SoftwareVersion: this.state.SoftwareListItem.SoftwareVersion,
        SoftwareDescription:newValue
      }
    });
  }
  private onChangeSoftwareVersionField(event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue: string): void {
    this.setState({
      SoftwareListItem:{
        Id:this.state.SoftwareListItem.Id,
        Title:this.state.SoftwareListItem.Title,
        SoftwareName: this.state.SoftwareListItem.SoftwareName,
        SoftwareVendor: this.state.SoftwareListItem.SoftwareVendor,
        SoftwareVersion: newValue,
        SoftwareDescription:this.state.SoftwareListItem.SoftwareDescription
      }
    });
  }
  private onChangeDropDownField(event: React.FormEvent<HTMLDivElement>, option?: IDropdownOption, index?: number): void {
    console.log(option.text);
    this.setState({
      SoftwareListItem:{
        Id:this.state.SoftwareListItem.Id,
        Title:this.state.SoftwareListItem.Title,
        SoftwareName: this.state.SoftwareListItem.SoftwareName,
        SoftwareVendor: option.text,
        SoftwareVersion: this.state.SoftwareListItem.SoftwareVersion,
        SoftwareDescription: this.state.SoftwareListItem.SoftwareDescription
      }
    });
  }

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

    const dropdownRef = React.createRef<IDropdown>();

    return (
      <div className={styles.crudWithReactWebPart}>
        <TextField
          label="ID"
          required={false}
          value={(this.state.SoftwareListItem.Id).toString()}
          styles={textFieldStyles}
          onChange={this.onChangeIDField.bind(this)}
        />
        <TextField
          label="Software Title"
          required={false}
          value={(this.state.SoftwareListItem.Title).toString()}
          styles={textFieldStyles}
          onChange={this.onChangeTitleField.bind(this)}
        />
        <TextField
          label="Software Name"
          required={false}
          value={(this.state.SoftwareListItem.SoftwareName).toString()}
          styles={textFieldStyles}
          onChange={this.onChangeSoftwareNameField.bind(this)}
        />
        <TextField
          label="Software Description"
          required={false}
          value={(this.state.SoftwareListItem.SoftwareDescription).toString()}
          styles={textFieldStyles}
          onChange={this.onChangeDescriptionField.bind(this)}
        />
        <TextField
          label="Software Version"
          required={false}
          value={(this.state.SoftwareListItem.SoftwareVersion).toString()}
          styles={textFieldStyles}
          onChange={this.onChangeSoftwareVersionField.bind(this)}
        />
        <Dropdown
          componentRef={dropdownRef}
          placeholder="select an option"
          label="Software Vendor"
          options={[
            { key: 'Microsoft', text: 'Microsoft' },
            { key: 'Sun', text: 'Sun' },
            { key: 'Oracle', text: 'Oracle' },
            { key: 'Google', text: 'Google' }
          ]}
          defaultSelectedKey={this.state.SoftwareListItem.SoftwareVendor}
          required
          styles={narrowDropdownStyles}
          onChange={this.onChangeDropDownField.bind(this)}
        />
        <br/>
        <PrimaryButton
          text='Add'
          title='Add'
          onClick={this.btnAdd_click}
        />
        &nbps;
        <PrimaryButton
          text='Update'
          title='Update'
          onClick={this.btnUpdate_click}
        />
        &nbps;
        <PrimaryButton
          text='Delete'
          title='Delete'
          onClick={this.btnDelete_click}
        />
        <br/>
        <div id="divStatus">
          {this.state.status}
        </div>

        <p className={styles.title}>
          <div>
            <DetailsList
              items={this.state.SoftwareListItems}
              columns={_softwareListColumns}
              setKey='Id'
              checkboxVisibility={CheckboxVisibility.always}
              selectionMode={SelectionMode.single}
              layoutMode={DetailsListLayoutMode.fixedColumns}
              compact={true}
              selection={this._selection}

            />
          </div>
        </p>
      </div>
    );
  }
}


Comments

Post a Comment

Popular posts from this blog

Powerapps overcome 2000 item limit from any datasource

First go through delegation concept https://tejasadventure.blogspot.com/2020/05/power-apps-understanding.html In powerapps, we observe by default 500 item limit has set with in the app level for any data source. In order to overcome, we have option to set the limit of 2000 item limit maximum in the app. Now using code, MaximoFacility is my data source name contains 3000 items. ColFacilityDropdown is the collection storing the count of items from data source. We expect to see more than 2000 items. Based on StartWith function filtering the data with respective to the charectors and numbers as mentioned below. Code: Place the below code in a button on select property. Add label with code CountRows(ColFacilityDropdown) ClearCollect(ColFacilityDropdown,Filter(Filter(MaximoFacility, Status = "ACTIVE"), StartsWith( Title, "A" ))); Collect(ColFacilityDropdown,Filter(Filter(MaximoFacility, Status = "ACTIVE"), StartsWith( Title, "B" ))); Collect(ColFacilit...
Post a Comment
Read more

PowerApps multiselect cascading dropdown and save an item to SharePoint List

 I have one scenario as below List 1: Division List has title field List 2: District List has Title and Division Field(LookUp from Division List) List 3: Facility List has Title, District Field(LookUp field from District List) List 4: County List has Title, Facility Field(LookUp field from Facility List) Main List: Spill Report is the main list  Division Field( Look up from Division List) District Field(Look up field from District List) Facility Field(Look up field from Facility List) County Field(Look up field from County List) List Screenshots provided below can be refered for clarification. ----------------------------------------------------------------------------------------------------- PowerApps Canvas Apps In Power Apps Canvas App, We need to first design the app with the 4 respective fields Since those fields are multiselect, then it is to combo box. Generally power apps are not supported for multiselect cascasding dropdown. Refere microsoft documentation, Know Limit...
Post a Comment
Read more

Creating SharePoint List with columns and content types using Power Automate Flow

 Rest API Uri: https://gitbrent.github.io/SpRestLib/blog/2018/04/20/create-sharepoint-list-columns-using-rest.html Create SharePoint List: site address: Enter URL method: Post URi: /_api/web/lists headers: Accept:application/json;odata=verbose Content-Type:application/json;odata=verbose Body: {   "__metadata": {"type": "SP.List"},   "AllowContentTypes": true,   "BaseTemplate": 100,  "Description": "Admin configuration list",  "Title": "AdminConfigList" } -------------------------------------------------------------------------------------- Multi line text field: create a multiline text column: Site URL: Target Site URi: _api/lists/getbytitle('CI_CompanyNews')/fields Type: POST Body: {     '__metadata': {'type':'SP.Field', 'addToDefaultView': 'true' },     'FieldTypeKind': 3,     'Title': 'Blurb' } Headers:  Accept:application/...
Post a Comment
Read more