How to Turn SharePoint Summary Web part link as an accordion menu

Welcome to Designers dairy blog,Here we are going to discuss about, 

How to Turn  SharePoint Summary Web part  link as an accordion Menu

Step1:

Add the summary link webpart in Sharepoint ribbon

Webpart - > Content Rollup - >  Summary  Links

The Summary Link Web Part has a toolbar along the top, with these four options:

• New Link: Click this button to link to a new item in the Web Part. You can link to a page, item, or person. You can also link to content outside SharePoint.
  
• New Group: Create a new group that you can use to group the links you add to the Web Part.
• Configure Styles and Layout: Select the default style that’s applied to new links or change the style on all links you already entered into the Web Part.
• Reorder: Move the items in the Web Part up or down to change the order.

As shown in below images

Step2:

Let us see, how to customize and add the new group header style in configure styles and layout.

Now, we are going to add the custom group header style called CustomAccordionGroups as shown in below image

Step3:

To add the custom style CustomAccordionGroups . You have to add  in Header.xsl file.

which is located in the below path :

Style Library/XSL Style Sheets/Header.xsl

Open the Header.xsl file and add the below XML template code  with the class
name CustomAccordionGroups

 <xsl:template name="CustomAccordionGroups" match="*[@GroupStyle='CustomAccordionGroup']" mode="header">
<div class="groupheader item accordionCustomHeaderItem">
<xsl:call-template name="OuterTemplate.GetGroupName">
<xsl:with-param name="GroupName" select="@*[name()=$Group]"/>
<xsl:with-param name="GroupType" select="$GroupType"/>
</xsl:call-template>
</div>
</xsl:template>

Once you added,  you will find the custom style CustomAccordionGroups in the drop down list

Step4:

Once you applied the CustomAccordiongroup to the Headers

Now I am going to making this web part into a fully functional accordion for this I added a 

CustomAccordiongroup.

Simple Jquery script the performs hide all hyperlinks in this groups and when a user clicks a group header, hide all sections that is not the current header and expand current selected link selection. 

So, adding the jquery library Reference

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Script:

$(document).ready(function(){

$('.accordionCustomHeaderItem').click(function(){
   if( $(this).hasClass('active') ){
    $(this).removeClass('active');
    $(this).next().removeClass('show');
  }else{
    $('.accordionCustomHeaderItem').removeClass('active');
    $('.accordionCustomHeaderItem  + ul.dfwp-list').removeClass('show');

    $(this).addClass('active');
    $(this).next().addClass('show');
  }

})

});

CSS:

.accordionCustomHeaderItem  + ul.dfwp-list
{
display:none;

}
.groupheader {
       background-color: #921c1c;
color: white;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
font-size: 140%;
padding: 0.5em;
padding-left: 15px;
margin-right: 0.5em;
margin-bottom: 1px;
}

.accordionCustomHeaderItem:before {

    font-family: 'FontAwesome';
    content: "\f054";   
    font-size: 13px;
    padding-right:12px;
    padding-top: 6px;
    float: left;

}

.accordionCustomHeaderItem.active:before {
     content: "\f078";
     font-size: 13px;
     padding-top: 6px;
     float: left;
}

.groupheader-arrowdown {

        color: white;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
font-size: 140%;
padding: 0.5em;
padding-left: 35px;
margin-right: 0.5em;
margin-bottom: 1px;

}

.groupmarker:hover .groupheader{
cursor: pointer;
background-color: #e03628;
}

.dfwp-list {

margin-bottom: 0.5em;
margin-right: 0.75em;
}
.dfwp-list .item:hover  {

   text-decoration:underline;

}
.dfwp-list .link-item a {
margin-left: 2em;
color: black;
}
.show {

display:block !important;
}

Step5:

So Finally, Now you can able to see your web part work as an Accordion menu as shown below

Thanks for reading my article.Stay Tune on www.webdesignersdairy.com  for more updates on SharePoint.

How to make SharePoint Top navigation menu responsive in 2013 & 2016

Step1 :

Welcome to Designer dairy, Here we are going to discuss how to make SharePoint
Top navigation menu as responsive in 2013 & 2016 without installing 

"SharePoint Responsive UI Package"

Step 2:

There are some existing projects built in SharePoint 2013. where the client wish to make it portal responsive.As of now, Here we are not going to discuss about entire portal responsiveness only top navigation menu.

Step 3:

Search for “DeltaTopNavigation” in settle.master and select whole tag > Copy the code and place in between bootstrap navigation tags like below

Step 2-

Place these css in you css file-

/*************************************************************************/

.static,.dynamic {

    padding-left: 10px;

    padding-right: 10px;

}

.ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item

{                margin-right:0px!important;

}

ul.dynamic li:hover {

    background-color: red;

}

.static.menu-item.ms-core-listMenu-item.ms-displayInline.ms-navedit-linkNode:hover {

    background-color: red;

}

.ms-core-listMenu-horizontalBox li.static > a{

display: none !important;

}

.ms-core-listMenu-horizontalBox li.static > ul a{

display: block !important;

}

@media screen and (max-width:767px) {

.ms-core-listMenu-horizontalBox ul, .ms-core-listMenu-horizontalBox li, .ms-core-listMenu-horizontalBox .ms-core-listMenu-item, .ms-core-listMenu-horizontalBox > ul > li > table

{

               

                display:block;

}

.hideonsmall

{

                display:none;

}

.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {

    background-color: transparent!important;

}

.navbar-inverse .navbar-toggle {

    border-color: transparent!important;

}

.navbar-nav {

    margin: 7.5px -15px;

    padding-left: 15px!important;

    line-height: 25px!important;

}

.ms-core-listMenu-horizontalBox {

    color: #666666;

    display: inline-block;

    vertical-align: middle;

    line-height: 30px;

    height: auto;

}.ms-core-listMenu-horizontalBox {

                width:100%;

}.static, .dynamic {

    padding-left: 0px!important;

    padding-right: 0px!important;

}.menu-item-text {

    padding-left: 10px;

}

.navbar-collapse  {

                padding-left: 0px!important;

}

ul.dynamic

{

                left:25%!important;

}

}

Step4:

The final output of the screen will be like below screen.

Thanks for reading my article.Stay Tune on www.webdesignersdairy.com  for more updates on SharePoint.

Creating News Ticker in SharePoint list item Using JSOM

Step1:

Welcome to the designers dairy blog, Here we are going to discuss, how to Create SharePoint 2013 & 2016 list  items into News Ticker using JSOM.

Step2:

Create a list name called Announcement as shown in below image

Step3:

The news lists have two feeds.


Step4:

Below are the code written in javascript function  Tickernews()  to retrieve  data from the list items using CAML Query. And Appending in the page  where u needed.


$(function () {

    ExecuteOrDelayUntilScriptLoaded(Tickernews, "sp.js");

});
  

function Tickernews() {

    var clientContext = new SP.ClientContext();

    var oList = clientContext.get_web().get_lists().getByTitle('Annoucement');

    var camlQuery = new SP.CamlQuery();    

    //camlQuery.set_viewXml("<View><RowLimit>1</RowLimit></View>"); 

   //camlQuery.set_viewXml("<View><Query><Where><BeginsWith><FieldRef Name='FirstName'/><Value Type='Text'>Raja</Value></BeginsWith>"

   //                    + "<Gt><FieldRef Name='ID' /><Value Type='Counter'>2</Value></Gt></Where></Query></View>"); 
   

 /*camlQuery.set_viewXml("<View>"

    +"<Query>"
   +"<Where>"
     +" <Or>"
     + "   <Eq>"
           +" <FieldRef Name='FirstName' />"
           +" <Value Type='Text'>Raja</Value>"
        +" </Eq>"
        +" <Gt>"
         +"   <FieldRef Name='ID' />"
          +"  <Value Type='Counter'>3</Value>"
        +" </Gt>"
      +"</Or>"
   +"</Where>"
+"</Query>"


 +"</View>");  */

   camlQuery.set_viewXml("<View><RowLimit>1</RowLimit></View>");
    
    this.collListItem = oList.getItems(camlQuery);

    clientContext.load(collListItem);

    clientContext.executeQueryAsync(Function.createDelegate(this, this.onTickerSucceeded), Function.createDelegate(this, this.onTickerQueryFailed));

}

function onTickerSucceeded(sender, args) {

    var listItemInfo = '';

    var listItemEnumerator = collListItem.getEnumerator();
    
    console.log(listItemEnumerator);

    while (listItemEnumerator.moveNext()) {

        var oListItem = listItemEnumerator.get_current();
    
 

        listItemInfo += '<div style="float:left; width:25%;"><strong>'+ oListItem.get_item("Title") + '</strong> </div> ' + '<div style="float:left; width:75%;"><marquee>' + oListItem.get_item("ShortDescription")  + '</marquee>'

         '<br />';

    }
    console.log(listItemInfo);

    $("#divListItems").html(listItemInfo);
    
     console.log($(".o365cs-nav-centerAlign"));

}

function onTickerQueryFailed(sender, args) {

    alert('Request failed. ' + args.get_message() +

    '\n' + args.get_stackTrace());

}

Step5:

By Using console log window, we can check the list items are retrieving or not.


    var listItemEnumerator = collListItem.getEnumerator();

If you give the Stored variable   listItemEnumerator in console window.

You fill find

 1.Sp.ArrayList Enumerator  and click - >SpClientObjectData - >  Sharepoint list items will be display  as shown in below screenshot

Title : "Vote Now"

Short_xo220_Description  :  "Vote for favourite Year"

Note : due to space  in list item column xo220 is added

Step6:

Output

Thanks for reading my article.Stay Tune on www.webdesignersdairy.com  for more updates on SharePoint.

Retrieve the List Items in SharePoint 2013 & 2016 Using JavaScript

Step1:

Welcome to the designer dairy blog, Here we are going to discuss, how to  Retrieve the List Items in SharePoint 2013 & 2016 Using JavaScript.

The getItems(query) function enables you to define a Collaborative Application Markup Language (CAML) query that specifies which items to return. You can pass an undefined CamlQuery object to return all items from the list, or use the set_viewXml function to define a CAML query and return items that meet specific criteria.

Step2:

SharePoint provides the JavaScript API reference files that contains the information used to access the data and build the custom applications. From the number of files, SP.JS is the most important file in the JSOM that provides the types and members the same as the Microsoft.SharePoint namespace to work with top-level sites, sub-sites and their lists and libraries.

The SP.JS file has the ClientContext object used for representing the context of SharePoint Objects and operations.

$(function () {

    ExecuteOrDelayUntilScriptLoaded(retrieveListItems, "sp.js");

});

Step3:

//This function loads the list and runs the query asynchronously  


function retrieveListItems() {

//Get the current context 

    var clientContext = new SP.ClientContext();

//Get the Announcements list. Alter this code to match the name of your list  

    var oList = clientContext.get_web().get_lists().getByTitle('Employees');

 //Create a new CAML query  

    var camlQuery = new SP.CamlQuery(); 



    //camlQuery.set_viewXml("<View><RowLimit>1</RowLimit></View>");
   //camlQuery.set_viewXml("<View><Query><Where><BeginsWith><FieldRef Name='FirstName'/><Value Type='Text'>Raja</Value></BeginsWith>"
   //                    + "<Gt><FieldRef Name='ID' /><Value Type='Counter'>2</Value></Gt></Where></Query></View>");
 

//Fetching the data from the list by checking the condition FirstName is equal to (=) Raja and  Id’s are greater than  ( >)  3.

 camlQuery.set_viewXml("<View>"

    +"<Query>"
   +"<Where>"
     +" <Or>"
     + "   <Eq>"
           +" <FieldRef Name='FirstName' />"
           +" <Value Type='Text'>Raja</Value>"
        +" </Eq>"
        +" <Gt>"
         +"   <FieldRef Name='ID' />"
          +"  <Value Type='Counter'>3</Value>"
        +" </Gt>"
      +"</Or>"
   +"</Where>"
+"</Query>"


 +"</View>");

  //Specify the query and load the list object 
 
    this.collListItem = oList.getItems(camlQuery);

    clientContext.load(collListItem);

//Run the query asynchronously, passing the functions to call when a response arrives  

    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));

}

Step3:

//This function fires when the query completes successfully   

function onQuerySucceeded(sender, args) {

    var listItemInfo = '';

 //Get an enumerator for the items in the list  

    var listItemEnumerator = collListItem.getEnumerator();
 
   //Loop through all the items 

    while (listItemEnumerator.moveNext()) {

        var oListItem = listItemEnumerator.get_current();
 

        listItemInfo += '<strong>ID: </strong> ' + oListItem.get_id() +

        ' <strong>Title:</strong> ' + oListItem.get_item('Title') +

        ' <strong>FirstName:</strong> ' + oListItem.get_item('FirstName') +

        ' <strong>LastName:</strong> ' + oListItem.get_item('LastName') +

        '<br />';

    }

 //Displaying the formulated HTML in the divListItems element 

    $("#divListItems").html(listItemInfo);

}

 //This function fires when the query fails 

function onQueryFailed(sender, args) {

    alert('Request failed. ' + args.get_message() +

    '\n' + args.get_stackTrace());

}

Step4:

Output:

Thanks for reading my article.Stay Tune on www.Webdesignersdairy.com  for more updates on SharePoint.

Basic CRUD Operations On List Item in SharePoint 2013

Welcome to the designer blog, Here we are going to discuss basic CRUD Operations on List Item in SharePoint 2013 & 2016

Step1: 

List of REST request properties used in this article: 

1.URL:  This is the REST resource endpoint URL.

2. Method/Type (GET, POST):

It’s an HTTP request method, where GET is for reading operations and POST is for write operations. The 

POST can perform updates or delete operations by giving a DELETE, MERGE verb in the X-HTTP-Method header. 

3. Data/Body:

 This will be used in POST requests where we want to send data in the request body.

4. Headers:

X-RequestDigest:

If you aren’t using OAuth to authorize your requests, creating, updating, and deleting SharePoint 

entities require the server’s request form digest value as the value of the X-RequestDigest 

header.SharePoint-hosted add-ins can get the value from the #__REQUESTDIGEST page control 

available on the SharePoint page.

Accept:

The Accept header specifies the format of response data from the server. The default format is 

application/atom+xml. Here we will be using "accept":"application/json;odata=verbose" which can 

be parsed easily.

Content-type:

The Content-type header specifies the format of the data that the client is sending to the server. The

default format is application/atom+xml. Here we will be using"content-
type":"application/json;odata=verbose".

IF-MATCH:

This will used in POST requests for DELETE, MERGE, or PUT operations for changing lists and

libraries. It provides a way to verify that the object being changed has not been changed since it was

last retrieved. Or, lets you specify to overwrite any changes, as shown in the following Ex: "IF-

MATCH":"*".

X-HTTP-Method:

This method will be used in POST requests for DELETE, MERGE, or PUT operations.Used to specify

that the request performs an Update or Delete operation. Ex: "X-HTTP-Method":"MERGE

Usage of the above properties:

Apart from all these properties there is another important object called “spPageContextInfo”.This is very helpful when writing SP JavaScript code. It’s a simple object which you can find on every SharePoint page.This object is containing many properties which we can directly use in our code. Let’s see few of its properties.

• webServerRelativeUrl
• webAbsoluteUrl
• siteAbsoluteUrl
• serverRequestPath
• layoutsUrl
• webTitle
• webTemplate
• webLanguage
• currentLanguage
• currentCultureName
• userId
• userLoginName
• systemUserKey
• alertsEnabled
• siteServerRelativeUrl Etc.,

Among all the properties for this article I am going to use siteAbsoluteUrl to get my site url.

Now let’s start working on CRUD operations one by one. We are going to use simple HTML and JavaScript in this article for easy understanding.

In this article I have used a custom list called “EmployeeList” which contains few basic columns as below.

Step2:

Create a Employee list in SharePoint as below 

Step3:

Create an HTML mark-up with Add, Edit, Delete and update and named as Crud.txt.

 And attached the file by adding  content editor webpart.

/sites/MyCompany/Style Library/stepbystep/crud.txt

CRUD.TXT - HTML Markup

<html>

<head>

    <title></title>

    <script type="text/javascript" src="../../MyCompany/Style Library/stepbystep/jquery-1.9.1.min.js"></script>

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

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css"/>

    <link href="../../MyCompany/Style Library/stepbystep/css/App.css" rel="stylesheet" />

     

  

    <script type="text/javascript" src="/_layouts/15/MicrosoftAjax.js"></script>

    <script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>

    <script type="text/javascript" src="/_layouts/15/sp.js"></script>

    <script type="text/javascript" src="/_layouts/15/SP.RequestExecutor.js"></script>

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

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

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

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

    <script type="text/javascript" src="../../MyCompany/Style Library/stepbystep/App.js"></script>

</head>

<body>

    <div class="container">

         <div id="row4" class="row nopadding ">

            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-horizontal padLeftRight">

               <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 pleft0 pright0">

                  <div class="announcment paddingwebpart " style="background:white;">

                     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 pleft0 pright0">

                        <h5 id="BtnAlign">

                           <a class="addbtn" target="_blank" style="color:white; text-decoration:none" data-target="#ModalForNewProject" data-toggle="modal">New Employee</a>

                        </h5>

                        <br>

                     </div>

                     <table id="subsiteList" class="table table-striped table-bordered">

                        <thead>

                           <tr>

                              <th>Employee Name</th>

                              <th>Designation</th>

                              <th>Address</th>

                              <th>Email</th>

                              <th>Blood Group</th>

                              <th>Emergency Contact</th>

                              <th>Mobile</th>

                              

                               <th>Edit</th>

                              <th>Delete</th>

                           </tr>

                        </thead>

                        <tbody></tbody>

                     </table>

                  </div>

               </div>

            </div>

         </div>

         <div class="modal fade" id="ModalForNewProject" role="dialog"  title="Create new Project">

            <div class="modal-dialog">

               <fieldset>

                  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 cls-contriute">

                     <h5 class="contributtitle">Add Employee Information</h5>

                  </div>

               </fieldset>

               <div id="ModelBody">

                  <div class="form-horizontal well bs-component cls-divthoug" id="ModalValidation">

                     <fieldset id="bodymodal">

                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">

                           <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought" >Employee Name

                           <span class="red">*</span>

                           </label>

                             <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought" >

                  <input type="text" id="txtempname" />

                           </label>

                                                  </div>

                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">

                           <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">Designation

                           <span class="red">*</span>

                           </label>

                             <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought" >

                  <input type="text" id="txtdesignation" />

                           </label>

                                                   </div>

                          <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">

                           <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">Email

                           <span class="red">*</span>

                           </label>

                              <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">

                          <input type="text" id="txtemail" />

                           </label>

                                                   </div>

                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">

                           <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">Mobile

                           <span class="red">*</span>

                           </label>

                             <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">

                             <input type="text" id="txtmobile" />

                           </label>

                                                  </div>

                          <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">

                           <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">Blood Group

                           <span class="red">*</span>

                           </label>

                                <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">

                        <input type="text" id="txtbloodgrp" />

                        

                           </label>

                                                  </div>

                          <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">

                           <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">Address for communication

                           <span class="red">*</span>

                           </label>

                               <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">

                       <input type="text" id="txtaddress" />

                           </label>

                                                  </div>

                         <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">

                           <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">Emergency contact

                           <span class="red">*</span>

                           </label>

                               <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">

                            <input type="text" id="txtemergency" />

                           </label>

                                                  </div>

                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">

                           <div class="col-lg-offset-7 col-lg-2 cls-divbtn ">

                               

                              <input class="cls-savecancel" id="btnsave" type="button" data-dismiss="modal" onclick="createListItem();" value="Submit" />

                           </div>

                           <div class="col-lg-2 col-lg-offset-1">

                              <input class="cls-savecancel" type="reset" value="Cancel" id="btnCancel"  data-dismiss="modal" />

                           </div>

                        </div>

                     </fieldset>

                  </div>

                                           </div>

         </div>

      </div>

      

      <!-- update modal -->

      

       <div class="modal fade" id="ModalForUpdateEmployee" role="dialog" title="Update New Employee">

            <div class="modal-dialog">

               <fieldset>

                  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 cls-contriute">

                     <h5 class="contributtitle">Update Employee Information</h5>

                  </div>

               </fieldset>

               <div id="ModelBody">

                  <div class="form-horizontal well bs-component cls-divthoug" id="ModalValidation">

                     <fieldset id="bodymodal">

                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">

                           <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought" >Employee Name

                           <span class="red">*</span>

                           </label>

                             <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought" >

                         

                                 <input type="text" id="txtempnames" />

                           </label>

                                                  </div>

                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">

                           <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">Designation

                           <span class="red">*</span>

                           </label>

                                <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought" >

                         

                                 <input type="text" id="txtdesignations" />

                           </label>

                                                 </div>

                          <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">

                           <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">Email

                           <span class="red">*</span>

                           </label>

                                  <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought" >

                         

                                 <input type="text" id="txtemails" />

                           </label>

                                                  </div>

                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">

                           <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">Mobile

                           <span class="red">*</span>

                           </label>

                                <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought" >

                         

                                 <input type="text"  id="txtmobiles"/>

                           </label>

                                                  </div>

                          <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">

                           <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">Blood Group

                           <span class="red">*</span>

                           </label>

                                   <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought" >

                         

                                 <input type="text" id="txtbloodgrps" />

                           </label>

                                                  </div>

                          <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">

                           <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">Address for communication

                           <span class="red">*</span>

                           </label>

                                   <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought" >

                         

                                 <input type="text"  id="txtaddresss"/>

                           </label>

                                                  </div>

                         <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">

                           <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">Emergency contact

                           <span class="red">*</span>

                                   </label>

                                    <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought" >

                         

                                 <input type="text" id="txtemergencys" />

                           </label>

                       

                                                  </div>

                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">

                           <div class="col-lg-offset-7 col-lg-2 cls-divbtn ">

                              <input class="cls-savecancel" id="btnupdate" type="button" data-dismiss="modal" onclick="update(uid);" value="Submit" />

                           </div>

                           <div class="col-lg-2 col-lg-offset-1">

                              <input class="cls-savecancel" type="reset" value="Cancel" id="btnCancel"  data-dismiss="modal" />

                           </div>

                        </div>

                     </fieldset>

                  </div>

         </div>

         </div>

      </div>

      

      

      

      

      <!--end-->

      

</div>

</body>

</html>

Step3:

Writing a JavaScript function for READ, WRITE, DELETE and UPDATE in APP.JS

APP.Js

$(document).ready(function(){

getItemsList();

});

var uid;

Edit Function:

function edit(Id) {

var Id;

  var urls = _spPageContextInfo.webAbsoluteUrl + "/Hr/_api/web/lists/getbytitle('EmployeeList')/items(" + Id + ")";

   

    $.ajax({

        async: true,

     

        url : urls,

        

        method: "GET",

        headers: {

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

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

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

        },

        success: function (data) {

     

            var eName = $('#txtempnames').val(data.d.EmployeeName);        

            var eDesg = $('#txtdesignations').val(data.d.Designation);

            var eEmail = $('#txtemails').val(data.d.Email);

            var eMobile = $('#txtmobiles').val(data.d.Mobile);

            var eBloodGroup = $('#txtbloodgrps').val(data.d.BloodGroup);

            var eComAddress = $('#txtaddresss').val(data.d.CommunicationAddress);

            var eEmergency = $('#txtemergencys').val(data.d.EmergencyContact);

        },

        error: function (error) {

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

        }

    })

   uid = Id;

}

Update Function:

function update(uid) {

    var eName = $('#txtempnames').val();

    var eDesg = $('#txtdesignations').val();

    var eEmail = $('#txtemails').val();

    var eMobile = $('#txtmobiles').val();

    var eBloodGroup = $('#txtbloodgrps').val();

    var eComAddress = $('#txtaddresss').val();

    var eEmergency = $('#txtemergencys').val();

    //var urls = appweburl + "/_api/SP.AppContextSite(@target)/web/lists/GetByTitle('EmployeeList')/items('" + uid + "')?@target='" + hostweburl + "'";    

    

    var urls = _spPageContextInfo.webAbsoluteUrl + "/Hr/_api/web/lists/getbytitle('EmployeeList')/items(" + uid + ")";

    $.ajax({

        type: "POST", 

        url:urls,

   

        method: "POST",

        data: JSON.stringify({

            '__metadata': {

                'type': 'SP.Data.EmployeeListListItem'

            },

            'EmployeeName': eName,

            'Designation': eDesg,

            'Email': eEmail,

            'Mobile': eMobile,

            'BloodGroup': eBloodGroup,

            'CommunicationAddress': eComAddress,

            'EmergencyContact': eEmergency

        }),

        headers: {

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

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

           // "X-RequestDigest": formDigest,

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

            "IF-MATCH": "*",

            "X-HTTP-Method": "MERGE"

        },

        

        success: function(data) {

        console.log(data);

       

            swal("Item Updated successfully", "success");     

         

            if ($.fn.DataTable.isDataTable('#subsiteList')) {

                $('#subsiteList').DataTable().destroy();

           

            }

           $('#subsiteList tbody').empty();

          getItemsList();

        

         },

        error: function (error) {

        alert(error);

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

        }

    })

}

Delete Functions:

function deleteItem(uid) {

   $.ajax({

       

        

        url: _spPageContextInfo.webAbsoluteUrl + "/Hr/_api/web/lists/getbytitle('EmployeeList')/items("+ uid + ")",

        method: "POST",

        headers: {

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

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

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

             "IF-MATCH": "*",

            "X-HTTP-Method": "DELETE"

        },

        

        success: function (data) {

            swal("Deleted!", "Item Deleted successfully", "success");

   

       

       

           if ($.fn.DataTable.isDataTable('#subsiteList')) {

       

                 $('#subsiteList').DataTable().destroy();

       

            }

             $('#subsiteList tbody').empty();

             getItemsList();

             

           },

        error: function (error) {

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

        }

        

    })

}

getItemsList Function:

function getItemsList() {

$.ajax({

async: true,

url: _spPageContextInfo.webAbsoluteUrl + "/Hr/_api/web/lists/getbytitle('EmployeeList')/items",

type: "GET",

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

success: function (data) {

//if (data.d.results) {

//var object = data.d.results;

  data = data.d.results;  

  $.each(data, function(index, value) {  

  debugger;

                var html = "<tr><td>" + value.EmployeeName + "</td><td>" + value.Designation + "</td><td>"

                            + value.Email + "</td><td>" + value.BloodGroup + "</td><td>" + value.CommunicationAddress + "</td><td>" 

                            + value.EmergencyContact + "</td><td>" + value.Mobile +

                            "</td><td><a href='#' data-target='#ModalForUpdateEmployee' data-toggle='modal' onclick='edit(" + value.Id + ")'><img src='../Images/003-edit-document.png'></a></td><td><a href='#' onclick='deleteItem(" + value.Id + ")'><img src='../Images/001-delete.png'></a></td></tr>";

                $('.table tbody').append(html);  //Append the HTML

                

                

            });

var table = $('#subsiteList').DataTable({"bDestroy": true });  //initialize the data

},

error: function (xhr,text_status) {

alert(xhr.status + ": " + xhr.statusText);

}

});

}

CreateListItem Function:

function createListItem() {

var url =  _spPageContextInfo.webAbsoluteUrl + "/Hr/_api/web/lists/getbytitle('EmployeeList')/items";

console.log(url);

    var eName = $('#txtempname').val();

    var eDesg = $('#txtdesignation').val();

    var eEmail = $('#txtemail').val();

    var eMobile = $('#txtmobile').val();

    var eBloodGroup = $('#txtbloodgrp').val();

    var eComAddress = $('#txtaddress').val();

    var eEmergency = $('#txtemergency').val();

$.ajax({

url: _spPageContextInfo.webAbsoluteUrl + "/Hr/_api/web/lists/getbytitle('EmployeeList')/items",

type: "POST",

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

   data : JSON.stringify({

            '__metadata': {

                'type': 'SP.Data.EmployeeListListItem' // it defines the ListEnitityTypeName  

            },

            //Pass the parameters

            'EmployeeName': eName,

            'Designation': eDesg,

            'Email': eEmail,

            'Mobile': eMobile,

            'BloodGroup': eBloodGroup,

            'CommunicationAddress': eComAddress,

            'EmergencyContact': eEmergency

        }),

        

           headers:  

        {  

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

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

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

            "X-HTTP-Method": "POST"  

        },

success: function (data) {

debugger;

console.log(data);

debugger;

 $('#txtempname').val("");

 $('#txtdesignation').val("");

$('#txtemail').val("");

 $('#txtmobile').val("");

 $('#txtbloodgrp').val("");

$('#txtaddress').val("");

 $('#txtemergency').val("");

                  if ($.fn.DataTable.isDataTable('#subsiteList')) {

       

                 $('#subsiteList').DataTable().destroy();

       

            }

   $('#subsiteList tbody').empty();

  getItemsList();

},

error: function (xhr, text_status) {

alert(xhr.status + ": " + xhr.statusText);

}

});

}

Step4:

The final output of the screen will be like below screen.

Enjoy Folks

Taken Reference from below link and developed by my own

https://www.c-sharpcorner.com/article/basic-crud-operations-on-list-item-in-sharepoint-2013/?authorFollow=true-9b7728-article&name=rajitha-alluri2