SharePoint

Create New Record To SharePoint List Using Angular With Rest API

In this article, I will explain how to create SharePoint list items using Angular.js.This will help to create a new record for long SharePoint lists which contain 100+ fields so we no longer specify field names in this code.

Here we go,

  • Create a custom SharePoint list (In this article, I named the list as SampleEmpList)
  • Create columns in the list
  • Create an HTML form based on the SharePoint columns type and link the script file which will help to create new records to SharePoint list.

Go to Add an app >> Custom List.

SharePoint

Name your list.

SharePoint

Create columns as shown below.

SharePoint

How it works -

I am taking one column to explain the procedure:

Step 1 - HTML code
SharePoint

Where DataBind is an object, Title is an internal name of list field.

So, we are passing the input value of the Title through the DataBind object.

Step2

Passing the object DataBind on the AddItem function as shown in the figure.

Onclick

SharePoint

Step3

AddItem function

Now, pass the DataBind object in this function as shown in below wIch returns data like

Title: Ram,

  • Then, after filling all columns, the data will pass through the object.
  • Convert the object data into JSON format as below.

var data = JSON.stringify(FormData);

  • Then, call the HTTP call and set the data as below.

Code

  1. $scope.AddItem = function(FormData) {  
  2.         var data = JSON.stringify(FormData); // converting into JSON  
  3.         data = data.replace(/[{}]/g, ''); //Removing {} s from data globally  
  4.         var datavalue = "{__metadata:{'type':'SP.Data." + listName + "ListItem'}," + data + "}";  
  5.         $http({  
  6.             url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('" + listName + "')/items",  
  7.             method: "POST",  
  8.             headers: {  
  9.                 "Accept": "application/json;odata=verbose",  
  10.                 "Content-Type": "application/json;odata=verbose", //header for create record  
  11.                 "X-RequestDigest": $("#__REQUESTDIGEST").val(),  
  12.                 "X-HTTP-Method": "POST"  
  13.             },  
  14.             data: datavalue  
  15.         }).then(function(response) {  
  16.             alert("success");  
  17.         }, function(response) {  
  18.             alert("failed");  
  19.         }); 
Finally, it will create a new record without mentioning the filed names separately.

SharePoint

HTML Code

  1. <html>  
  2.   
  3. <head> </head>  
  4.   
  5. <body ng-app="myApp" ng-controller="MainCtrl">  
  6.     <table class="table-condensed table-hover tbldata" style="width:100%">  
  7.         <thead>CreateForm</thead>  
  8.         <tbody>  
  9.             <tr>  
  10.                 <td style="width:10%">Name</td>  
  11.                 <td style="width:50%"><input class="form-control" ng-model="DataBind.Title" type="text" /></td>  
  12.             </tr>  
  13.             <tr>  
  14.                 <td>Salary</td>  
  15.                 <td style="width:50%"><input class="form-control" ng-model="DataBind.EmpSalary" type="number" /></td>  
  16.             </tr>  
  17.             <tr>  
  18.                 <td>Designation</td>  
  19.                 <td><input class="form-control" ng-model="DataBind.Designation" type="text" /></td>  
  20.             </tr>  
  21.             <tr>  
  22.                 <td>Department</td>  
  23.                 <td><select class="form-control" ng-model="DataBind.Department"><option value="">--Select an option--</option><option ng-repeat="Dept in Depts" value="{{Dept}}">{{Dept}}</option></select></td>  
  24.             </tr>  
  25.             <tr>  
  26.                 <td>Address</td>  
  27.                 <td><textarea class="form-control" ng-model="DataBind.EmpAddress" type="text"></textarea></td>  
  28.             </tr>  
  29.             <tr>  
  30.                 <td>Gender</td>  
  31.                 <td><label><input type="radio" ng-model="DataBind.Gender" value="Male"/>Male</label><label><input type="radio" ng-model="DataBind.Gender" value="Female"/>Female</label></td>  
  32.             </tr>  
  33.             <tr>  
  34.                 <td>Employee Id</td>  
  35.                 <td><input class="form-control" ng-model="DataBind.EmpId" type="number" /></td>  
  36.             </tr>  
  37.             <tr>  
  38.                 <td>DOB</td>  
  39.                 <td><input class="form-control" ng-model="DataBind.DOB" type="date" /></td>  
  40.             </tr>  
  41.             <tr>  
  42.                 <td></td>  
  43.                 <td><input type="button" ng-click="AddItem(DataBind)" value="Submit" /><input type="reset" value="Cancel" /></td>  
  44.             </tr>  
  45.         </tbody>  
  46.     </table>  
  47. </body>  
  48.   
  49. </html>

Script Code

  1. var app = angular.module('myApp', []);  
  2. var listName = "Samplelist";  
  3. app.controller('MainCtrl', function($scope, $http) {  
  4.     $scope.Depts = ["Dept1", "Dept2", "Dept3"];  
  5.     $scope.AddItem = function(FormData) {  
  6.         var data = JSON.stringify(FormData);  
  7.         data = data.replace(/[{}]/g, '');  
  8.         var datavalue = "{__metadata:{'type':'SP.Data." + listName + "ListItem'}," + data + "}";  
  9.         $http({  
  10.             url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('" + listName + "')/items",  
  11.             method: "POST",  
  12.             headers: {  
  13.                 "Accept": "application/json;odata=verbose",  
  14.                 "Content-Type": "application/json;odata=verbose",  
  15.                 "X-RequestDigest": $("#__REQUESTDIGEST").val(),  
  16.                 "X-HTTP-Method": "POST"  
  17.             },  
  18.             data: datavalue  
  19.         }).then(function(response) {  
  20.             alert("success");  
  21.         }, function(response) {  
  22.             alert("failed");  
  23.         });  
  24.     }  
  25. });  

On submit, it will add a record to the list.

SharePoint

SharePoint

Hence, we have created a new record to SharePoint list without mentioning column names using AngularJS.

Conclusion 

If someone wants to work on big lists without mentioning all filed names, it will definitely be useful and will save your valuable time.

Here is the full code.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3.   
  4. <head>  
  5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  6.     <title>CRUD OperationByAJS</title>  
  7.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />  
  8.     <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>  
  9.     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>  
  10.     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>  
  11. </head>  
  12.   
  13. <body ng-app="myApp" ng-controller="MainCtrl">  
  14.     <table class="table-condensed table-hover tbldata" style="width:100%">  
  15.         <thead>CreateForm</thead>  
  16.         <tbody>  
  17.             <tr>  
  18.                 <td style="width:10%">Name</td>  
  19.                 <td style="width:50%"><input class="form-control" ng-model="DataBind.Title" type="text" /></td>  
  20.             </tr>  
  21.             <tr>  
  22.                 <td>Salary</td>  
  23.                 <td style="width:50%"><input class="form-control" ng-model="DataBind.EmpSalary" type="number" /></td>  
  24.             </tr>  
  25.             <tr>  
  26.                 <td>Designation</td>  
  27.                 <td><input class="form-control" ng-model="DataBind.Designation" type="text" /></td>  
  28.             </tr>  
  29.             <tr>  
  30.                 <td>Department</td>  
  31.                 <td><select class="form-control" ng-model="DataBind.Department"><option value="">--Select an option--</option><option ng-repeat="Dept in Depts" value="{{Dept}}">{{Dept}}</option></select></td>  
  32.             </tr>  
  33.             <tr>  
  34.                 <td>Address</td>  
  35.                 <td><textarea class="form-control" ng-model="DataBind.EmpAddress" type="text"></textarea></td>  
  36.             </tr>  
  37.             <tr>  
  38.                 <td>Gender</td>  
  39.                 <td><label><input type="radio" ng-model="DataBind.Gender" value="Male"/>Male</label><label><input type="radio" ng-model="DataBind.Gender" value="Female"/>Female</label></td>  
  40.             </tr>  
  41.             <tr>  
  42.                 <td>Employee Id</td>  
  43.                 <td><input class="form-control" ng-model="DataBind.EmpId" type="number" /></td>  
  44.             </tr>  
  45.             <tr>  
  46.                 <td>DOB</td>  
  47.                 <td><input class="form-control" ng-model="DataBind.DOB" type="date" /></td>  
  48.             </tr>  
  49.             <tr>  
  50.                 <td></td>  
  51.                 <td><input type="button" ng-click="AddItem(DataBind)" value="Submit" /><input type="reset" value="Cancel" /></td>  
  52.             </tr>  
  53.         </tbody>  
  54.     </table>  
  55. </body>  
  56. <script>  
  57.     var app = angular.module('myApp', []);  
  58.     var listName = "SampleEmplist";  
  59.     app.controller('MainCtrl', function($scope, $http) {  
  60.         $scope.Depts = ["Dept1", "Dept2", "Dept3"];  
  61.         $scope.AddItem = function(FormData) {  
  62.             var data = JSON.stringify(FormData);  
  63.             data = data.replace(/[{}]/g, '');  
  64.             var datavalue = "{__metadata:{'type':'SP.Data." + listName + "ListItem'}," + data + "}";  
  65.             $http({  
  66.                 url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('" + listName + "')/items",  
  67.                 method: "POST",  
  68.                 headers: {  
  69.                     "Accept": "application/json;odata=verbose",  
  70.                     "Content-Type": "application/json;odata=verbose",  
  71.                     "X-RequestDigest": $("#__REQUESTDIGEST").val(),  
  72.                     "X-HTTP-Method": "POST"  
  73.                 },  
  74.                 data: datavalue  
  75.             }).then(function(response) {  
  76.                 alert("success");  
  77.             }, function(response) {  
  78.                 alert("failed");  
  79.             });  
  80.         }  
  81.     });  
  82. </script>  
  83.   
  84. </html>  

It mainly helps when we work with big lists that have more than 100 columns.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs