SharePoint

Get Sharepoint Items And Customization Search Including Lookup And Person/Group Fileds Using RestAPI And AngularJS

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];     
  14.       
  15.         
  16.                         $scope.contacts = dataResults;  
  17.        $scope.productItems = function(item)  
  18.       {  
  19.          
  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.        }  
  32.         
  33.                     }).error(function (data, status, headers, config) {  
  34.                     });  
  35.                      
  36.                 })  
Step 5

Create .html File, 
  1. <html>  
  2.   
  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>  
  7.   
  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>  
  32.   
  33. </html>   
Step 6

Final result is given below.

 
Step 7

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