0

I was not able perform crud operation in bootstrap form using SP PnP JS library .

Below is the code:

public render(): void {
    let cssURL = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css";
    SPComponentLoader.loadCss(cssURL);
  
    this.domElement.innerHTML = `
    <div class="panel panel-info">
        <div class="panel-heading"><h3 class="panel-title"><strong>Sign In </strong></h3></div>
        <div class="panel-body">
            <div class="form-group">
              <div class="row" hidden>
                <div class="col-md-12">
                  <label for="empID" class="control-label">Enter Employee ID</label>
                </div>
                <div class="col-sm-8">
                  <input type="text" class="form-control" id="empID" placeholder="Enter ID">
                </div>
                <div class="col-sm-2">
                  <button type="submit" class="btn btn-primary" id="btnRead">Read Details</button>
                </div>
              </div>
            </div>
            <div class="form-group">
                <label for="empName">Employee Name</label>
                <input type="text" class="form-control" id="empName" placeholder="Enter email">
            </div>
            <div class="form-group">
                <label for="gender">Gender</label>
                <input type="text" class="form-control" id="empGender" placeholder="Password">
            </div>
            <div class="form-group">
                <label for="empDesignation">Designation</label>
                <input type="text" class="form-control" id="empDesignation" placeholder="Enter email">
            </div>
            <div class="form-group">
                <label for="empDepartment">Department</label>
                <input type="text" class="form-control" id="empDepartment" placeholder="Password">
            </div>
            <div class="form-group">
                <label for="empLocation">Location</label>
                <input type="text" class="form-control" id="empLocation" placeholder="Enter email">
            </div>
            <div class="form-group">
                <label for="empEmail">Email</label>
                <input type="text" class="form-control" id="empEmail" placeholder="Password">
            </div>
            <button type="submit" id="btnSubmit" class="btn btn-sm btn-primary">Submit</button>
            
            <div id="divStatus"></div>
            <div id="spListData"></div>
        </div>
    </div>`;
    this._bindEvents();
  }

  private _bindEvents(): void {
    this.domElement.querySelector('#btnSubmit').addEventListener('click', () => { this.addListItem(); });
  }

  private addListItem(): void {
    var employeeName = document.getElementById("empName")["value"];
    var employeeGender = document.getElementById("empGender")["value"];
    var employeeDesignation = document.getElementById("empDesignation")["value"];
    var employeeDepartment = document.getElementById("empDepartment")["value"];
    var employeeLocation = document.getElementById("empLocation")["value"];
    var employeeEmail = document.getElementById("empEmail")["value"];
  
    pnp.sp.web.lists.getByTitle("EmployeeDetails").items.add({
      Title: employeeName,
      Gender: employeeGender,
      Designation: employeeDesignation,
      Department: employeeDepartment,
      Location: employeeLocation,
      Email: employeeEmail
    
    }).then(r => {

      alert("success");
    }); 
  }
3
  • 1
    What is the problem here exactly? Are you getting any error or what? – Ganesh Sanap Aug 5 '20 at 4:52
  • i am not able add the employee details in SharePoint list – Davy Aug 5 '20 at 5:03
  • Try adding breakpoint inside addListItem() function and check if there is any error in browser's console? – Ganesh Sanap Aug 5 '20 at 5:07
0

Check if the request has this problem. enter image description here

You could know how to solve this problem here:

https://github.com/SharePoint/PnP-JS-Core/wiki/Using-sp-pnp-js-in-SharePoint-Framework

My test code for your reference:

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 {Web } from 'sp-pnp-js'

import styles from './NoframeworkspfxWebPart.module.scss';
import * as strings from 'NoframeworkspfxWebPartStrings';
import { SPHttpClient, SPHttpClientResponse, SPHttpClientConfiguration,ISPHttpClientOptions } from '@microsoft/sp-http'; 
export interface INoframeworkspfxWebPartProps {
  description: string;
}
var moment:any = require('moment-timezone');
export default class NoframeworkspfxWebPart extends BaseClientSideWebPart <INoframeworkspfxWebPartProps> {

  
  public render(): void {
    //let cssURL = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css";
    //SPComponentLoader.loadCss(cssURL);
  
    this.domElement.innerHTML = `
    <div class="panel panel-info">
        <div class="panel-heading"><h3 class="panel-title"><strong>Sign In </strong></h3></div>
        <div class="panel-body">
            <div class="form-group">
              <div class="row" hidden>
                <div class="col-md-12">
                  <label for="empID" class="control-label">Enter Employee ID</label>
                </div>
                <div class="col-sm-8">
                  <input type="text" class="form-control" id="empID" placeholder="Enter ID">
                </div>
                <div class="col-sm-2">
                  <button type="submit" class="btn btn-primary" id="btnRead">Read Details</button>
                </div>
              </div>
            </div>
            <div class="form-group">
                <label for="empName">Employee Name</label>
                <input type="text" class="form-control" id="empName" placeholder="Enter email">
            </div>
            <div class="form-group">
                <label for="gender">Gender</label>
                <input type="text" class="form-control" id="empGender" placeholder="Password">
            </div>
            <div class="form-group">
                <label for="empDesignation">Designation</label>
                <input type="text" class="form-control" id="empDesignation" placeholder="Enter email">
            </div>
            <div class="form-group">
                <label for="empDepartment">Department</label>
                <input type="text" class="form-control" id="empDepartment" placeholder="Password">
            </div>
            <div class="form-group">
                <label for="empLocation">Location</label>
                <input type="text" class="form-control" id="empLocation" placeholder="Enter email">
            </div>
            <div class="form-group">
                <label for="empEmail">Email</label>
                <input type="text" class="form-control" id="empEmail" placeholder="Password">
            </div>
            <button type="submit" id="btnSubmit" class="btn btn-sm btn-primary">Submit</button>
            
            <div id="divStatus"></div>
            <div id="spListData"></div>
        </div>
    </div>`;
    this._bindEvents();
  }

  private _bindEvents(): void {
    this.domElement.querySelector('#btnSubmit').addEventListener('click', () => { this.addListItem(); });
  }

  private addListItem(): void {
    var employeeName = document.getElementById("empName")["value"];
    var employeeGender = document.getElementById("empGender")["value"];
    var employeeDesignation = document.getElementById("empDesignation")["value"];
    var employeeDepartment = document.getElementById("empDepartment")["value"];
    var employeeLocation = document.getElementById("empLocation")["value"];
    var employeeEmail = document.getElementById("empEmail")["value"];
    let web = new Web(this.context.pageContext.web.absoluteUrl);
    web.lists.getByTitle("test_test").items.add({
      Title: employeeName,
      // Gender: employeeGender,
      // Designation: employeeDesignation,
      // Department: employeeDepartment,
      // Location: employeeLocation,
      // Email: employeeEmail
    
    }).then(r => {

      alert("success");
    }); 
  }
  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
              })
            ]
          }
        ]
      }
    ]
  };
}
}

Test result: enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.