Post
Ask Question

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.


Similar Articles