sharepoint CRUD

on

 

                                                                  Curd Operations on Sharepoint                                                                              .

Step 1  : Create a List in Sharepoint Site.




 

Step 2:   Create a .Html file below I   Created    gridmy.html



 

Step 3:   Gridmy.html open that with Notepad++  and  add below code in it.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />

    <title>Training</title>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

    <script type="text/javascript" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>

 

    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" />

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" />

 

    <script type="text/javascript">

 

// when page refresh or it  call automatically

                  $(document).ready(function () {

            GetEmployees();  //calls GetEmployee Function

                                                 var id = getQueryStringParameter("RequestID");

                                                 

                                                if(id !="")

                                                {

                                                GetEmployeebyid();

                                                }

                                               

        });

//GetEmployee Function Used to get all data from the list by using api we get

 

        function GetEmployees() {

            debugger;

            $.ajax({

      //Employee Is a list

                url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('Employee')/items?$select=*",

                method: "GET",

                headers: { "Accept": "application/json; odata=verbose" },

              

 

 

 

 success: function (data) {

     //if we get data successfully then by using below bindEmpDtls(data.d.results); method calling we can bind get data to grid

                          },

                error: function (error) {

                    debugger;

                    alert("Sorry something went wrong.");

                    console.log(JSON.stringify(error));

                }

            });

        }

 

        function bindEmpDtls(Project) {

            try {

//here we  bind obtained data to #tblprojects ,which used to bind data to table from this method

 

                $('#tblProjects').DataTable({

                    data: Project,

                    "columns": [

                       { "data": "EmployeeId" }

                        , { "data": "Name" }

                        , { "data": "Email" }

                        , { "data": "DateOfJoining" }

                        , { "data": "Title" }

                                                                                                 

                        , {

                            "data": 'ID',

                            'render': function (data, type, row) {

                                return '<a href=grid.aspx?RequestID=' + data + ' "class="editor_edit" >Edit</a>';

                            },

                        }

                    ]

                });

            }

            catch (err) {

            }

        }

                               

                               

                               

                //  This Method used to insert data

        function InsertData() {

            debugger;

            var Item = {

                'Title': $('#ddlDesignation').val(),

                'Name': $('#txtName').val(),

                'Email': $('#txtEmail').val(),

                'DateOfJoining': $('#txtDateOfJoining').val(),

                'EmployeeId': $('#txtEmployeeId').val()

            }

 

            Item.__metadata = {

                'type': 'SP.Data.EmployeeListItem'

            };

 

            $.ajax({

                url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('Employee')/items",

                type: "POST",

                data: JSON.stringify(Item),

                headers: {

                    "Accept": "application/json;odata=verbose",

                    "X-RequestDigest": $("#__REQUESTDIGEST").val(),

                    "Content-Type": "application/json;odata=verbose",

                    "X-HTTP-Method": "POST"

                },

                success: function (data) {

                    debugger;

                    alert("Employee Information saved successfully");

                                                                                clear();

                },

                error: function (error) {

                    debugger;

                    alert("Sorry something went wrong.");

                    console.log(JSON.stringify(error));

                }

            });

        }

                               

 

 

                               

                 // This method Used to get data by id

                                 function GetEmployeebyid() {

            var id = getQueryStringParameter("RequestID");

            debugger;

            $.ajax({

                url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('Employee')/items?$select=*&$filter=ID eq " + id,

                method: "GET",

                headers: { "Accept": "application/json; odata=verbose" },

                success: function (data) {

                                                                <!-- console.log(data); -->

                    debugger;                   

                    $('#txtName').val(data.d.results[0].Name)

                    $('#txtEmail').val(data.d.results[0].Email)

                    $('#txtDateOfJoining').val(data.d.results[0].DateOfJoining)

                                    $('#ddlDesignation').val(data.d.results[0].Title)

                                                $('#txtEmployeeId').val(data.d.results[0].EmployeeId)

                },

                error: function (error) {

                    debugger;

                    alert("Sorry something went wrong.");

                    console.log(JSON.stringify(error));

                }

            });

        }

                               

//This method Used to UpdateData

function UpdateData() {

            try {

                debugger;

                var id = getQueryStringParameter("RequestID");

                id = parseInt(id);

                var Item = {

                                                                 'Title': $('#ddlDesignation').val(),

                'Name': $('#txtName').val(),

                'Email': $('#txtEmail').val(),

                'DateOfJoining': $('#txtDateOfJoining').val(),

                'EmployeeId': $('#txtEmployeeId').val()

                                                               

                }

 

                Item.__metadata = {

                    'type': 'SP.Data.EmployeeListItem'

                };

 

                $.ajax({

                    url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('Employee')/items(" + id + ")",

                    type: "POST",

                    data: JSON.stringify(Item),

                    headers: {

                        "Accept": "application/json;odata=verbose",

                        "content-type": "application/json; odata=verbose",

                        "X-RequestDigest": $("#__REQUESTDIGEST").val(),

                        "IF-MATCH": "*",

                        "X-HTTP-Method": "MERGE"

                    },

                    success: function (data) {

                        debugger;

                                                                                                clear();

                        alert("Employee Information updated successfully");

                                                                                               

                    },

                    error: function (error) {

                        debugger;

                        alert("Sorry something went wrong.");

                        console.log(JSON.stringify(error));

                    }

                });

            }

            catch (err) {

                console.log(err.message);

            }

        }

           

 

 

 

 

 

 

      

                              // This Method used, to clear Clear fields after submit data or update or edit or delete

                function clear(){

                  $('#txtName').val("")

                 $('#txtEmail').val("")

               $('#txtDateOfJoining').val("")

                                 $('#txtDesignation').val("")

                                                 $('#txtEmployeeId').val("")

//used to get back to the original page after edit or update or delete

                                                window.location.href =  window.location.href.split("?")[0];

          }

                                // This Method used to  delete data

                                function Delete() {

            try {

                debugger;

                var id = getQueryStringParameter("RequestID");

                id = parseInt(id);

                $.ajax({

                    url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('Employee')/items(" + id + ")",

                    type: "POST",

                    async: false,

                    headers: {

                        "Accept": "application/json;odata=verbose",

                        "X-RequestDigest": $("#__REQUESTDIGEST").val(),

                        "IF-MATCH": "*",

                        "X-HTTP-Method": "DELETE"

                    },

                    success: function () {

                        alert("Deleted Employee information from List");

                                                                                                clear();

                    },

                    error: function (err) {

                        console.log(err);

                    }

                });

            }

            catch (err) {

                console.log(err.message);

            }

        }

                               

                               

                                // Function to retrieve a query string value.

        function getQueryStringParameter(paramToRetrieve) {

                                debugger

            var returnValue = "";

            if (document.URL.split("?").length > 1) {

                var params = document.URL.split("?")[1].split("&");

                var strParams = "";

 

                for (var i = 0; i < params.length; i = i + 1) {

                    var singleParam = params[i].split("=");

                    if (singleParam[0] == paramToRetrieve)

                        returnValue = singleParam[1];

                }

            }

            return returnValue;

        }

 

// to clear with button

           function cancle()

            {

               clear();

                 }

    </script>

                                    //html to view  

</head>

<body>

<div class="container">     

        <h4>Add Employee Information</h4>

        <div class="row">

            <div class="col-sm-6">

                <label for="Emp">Name: </label>

                <input type="text" id="txtName" class="form-control" />

            </div>

            <div class="col-sm-6">

                <label for="Emp">Email: </label>

                <input type="text" id="txtEmail" class="form-control" />

            </div>

                                                <div class="col-sm-6">

                <label for="Emp">DateOfJoining: </label>

                <input type="text" id="txtDateOfJoining" class="form-control" />

            </div>                                       

                                    <div class="col-sm-6">

                <label for="Emp">EmployeeId: </label>

                <input type="number" id="txtEmployeeId" class="form-control" />

            </div>

                                                <div class="col-sm-6">

                <label for="Emp">Designation: </label>

                <!-- <input type="text" id="txtDesignation" class="form-control" /> -->

                                                                  <select id="ddlDesignation" class="form-control">

                                                                   <option value="">Select</option>

                    <option value="HR">HR</option>

                                                                                 <option value="Manager">Manager</option>

                    <option value="Sales">Sales</option>

                    <option value="Pre Sales">Pre Sales</option>

                    <option value="Finance">Finance</option>

                    <option value="Production">Production</option>

                    <option value="Marketing">Marketing</option>

                    <option value="R&D">R&D</option>

                </select>

            </div>  

        </div>

        <div class="text-right">

             <button type="button" id="btnSubmit" onclick="InsertData()" class="btn btn-success">Submit</button>

            <button type="button" id="btnSubmit" onclick="UpdateData()" class="btn btn-primary">Update</button>

            <button type="button" id="btnSubmit"   onclick="Delete()" class="btn btn-danger">Delete</button>

          <button type="button" id="btnSubmit"   onclick="cancle()" class="btn btn-warning">cance1</button>

        </div>

    </div>               

   <div class="container">

        <h4>Add Employee Information</h4>

        <table class="table table-bordered" id="tblProjects">

            <thead class="thead-light">

                <tr>

                <th>EmployeeId</th>                                          

                    <th>Name</th>

                    <th>email</th>

                    <th>DateOfJoining</th>

                    <th>Designation</th>

                 

                    <th></th>

                </tr>

            </thead>

            <tbody></tbody>

        </table>

    </div>

</body></html>

Step 4: drag and drop the Created gridmy.html in  Site Assets of of our site   See below I added


* Click on 3 dots to get url 



 


Step 5 :  Create a web part

Ø   Goto Site Pages




 

 >    Click On FILES 

>     THEN SELECT NewDocument,

>       then select Web Part Page

>      give name and  give location to store and  click on Create

 


                                                                                                                        

Then click on add a web part ,then page display like below



 

Then click on add

 



 

Now click on edit web part and add url which page u want to display .i added url here of gridmy which is stored in site assests shown above at Step 5.



Now the  page is ready we can see it in sitepages. because when creating web part then I given location sitepages

Now click on grid page .to run then page displays like below to do curd operations




Comments

Post a Comment