Aim

Using Rest API With AngularJS, get SharePoint List Items and customization of search with Text, Lookup, and Person/Group type Fields.

Step 1

In my example, I have created two Lists. They are,

  • Product Sales
  • Phone

Step 2

In Phone Custom list, I created Title,Priority, and Demo single line text data type columns. And in second List i.e Produc Sales, I have created Product,Total_x0020_Sales,Sales_x0020_Target,SalesPerson,LPhone and SalesName.

  • Here,"LPhone" is Lookup Field link with our Phone Custom list field of Title.
  • "SalesName" is person/Group filed type and Show Field is FirstName.

Step 3

Create .js file file,

  1. var spApp = angular
  2. .module("spApp", [])
  3. .controller("viewItemController", function ($scope, $http) {
  4. var url = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('Product%20Sales')/items?$select=Product,Total_x0020_Sales,Sales_x0020_Target,SalesPerson,SalesName/FirstName,LPhone/Title&$expand=LPhone,SalesName";
  5. $http(
  6. {
  7. method: "GET",
  8. url: url,
  9. headers: { "accept": "application/json;odata=verbose" }
  10. }
  11. ).success(function (data, status, headers, config) {
  12. var dataResults=data.d.results;
  13. var item = data.d.results[1];
  16. $scope.contacts = dataResults;
  17. $scope.productItems = function(item)
  18. {
  20. if($scope.searchText==undefined)
  21. {
  22. return true;
  23. }
  24. else{
  25. if((item.SalesPerson.toLowerCase().indexOf($scope.searchText.toLowerCase())!=-1)||(item.Product.toLowerCase().indexOf($scope.searchText.toLowerCase())!=-1))
  26. {
  27. return true;
  28. }
  29. }
  30. return false;
  31. }
  33. }).error(function (data, status, headers, config) {
  34. });
  36. })
Step 5

Create .html File,
  1. <html>
  3. <head>
  4. <script type="text/javascript" src="/SiteAssets/angular.min.js"></script>
  5. <script type="text/javascript" src="/SiteAssets/angularGet.js"></script>
  6. </head>
  8. <body>
  9. <h3>View Contacts</h3>
  10. <hr/>
  11. <div ng-app="spApp">
  12. <div ng-controller="viewItemController"> <input type="text" placeholder="Product&SalesPerson" ng-model="searchText" /> <br/><br/>
  13. <table>
  14. <tr>
  15. <th>Product</th>
  16. <th>Total Sales</th>
  17. <th>Sales Target</th>
  18. <th>Sales Peron</th>
  19. <th>LookUPFieldData</th>
  20. <th>Person/GroupField</th>
  21. </tr>
  22. <tr ng-repeat="contact in contacts|filter:productItems">
  23. <td>{{contact.Product}}</td>
  24. <td>{{contact.Total_x0020_Sales}}</td>
  25. <td>{{contact.Sales_x0020_Target}}</td>
  26. <td>{{contact.SalesPerson}}</td>
  27. <td>{{contact.LPhone.Title}}</td>
  28. <td>{{contact.SalesName.FirstName}}</td>
  29. </tr> <br /> </table>
  30. </div>
  31. <hr /> </body>
  33. </html>
Step 6

Final result is given below.

Step 7

We are filtering Product or Sales Person Items here from data search result.