Get SharePoint List Item And Apply Search Filter Using AngularJS

Tejesh Barma
7y
4.7k
0
0

Blog

Step 1

Create a custom list in SharePoint. In my case, it is "Product Sales".

Step 2

Create custom JS for getting SharePoint list items using Angular JS (Ex - angularGet.js)

var spApp = angular.module("spApp", []).controller("viewItemController", function($scope, $http) {
var url = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('Product%20Sales')/items";
$http({
method: "GET",
url: url,
headers: {
"accept": "application/json;odata=verbose"
}
}).success(function(data, status, headers, config) {
var dataResults = data.d.results;
$scope.contacts = dataResults;
}).error(function(data, status, headers, config) {});
})

Step 3

Upload JavaScript file into any library, such as - SiteAssets .

Step 4

Create HTML file and create custom design with the below sample process.

<html>
<head>
<script type="text/javascript" src="/SiteAssets/jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="/SiteAssets/angular.min.js"></script>
<script type="text/javascript" src="/SiteAssets/angularGet.js"></script>
</head>
<body>
<h3>View Contacts</h3>
<hr/>
<div ng-app="spApp">
<div ng-controller="viewItemController"> Search Items:<input type="text" placeholder="searchItems" ng-model="searchText" />
<table>
<tr>
<th>Product</th>
<th>Total Sales</th>
<th>Sales Target</th>
</tr>
<tr ng-repeat="contact in contacts|filter:searchText">
<td>{{contact.Product}}</td>
<td>{{contact.Total_x0020_Sales}}</td>
<td>{{contact.Sales_x0020_Target}}</td>
</tr> <br /> </table>
</div>
<hr /> </body>
</html>

Step 5

After completion of this file and uploading it to any library (in my case SiteAssets), create one custom page in SharePoint from site pages and insert content editor web part. Edit the properties link in your .html file and click OK.

Then, we can get the below structure.