Before proceed, I recommend you to go through Learn Angular js for better understanding.
Create 2 custom lists
Product Sales
Phone
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.
angularGet.js (Upload it in Site Asset library of SharePoint along with angular js file)
var spApp = angular
.module("spApp", [])
.controller("viewItemController", function ($scope, $http) {
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";
$http(
{
method: "GET",
url: url,
headers: { "accept": "application/json;odata=verbose" }
}
).success(function (data, status, headers, config) {
var dataResults=data.d.results;
var item = data.d.results[1];
$scope.contacts = dataResults;
$scope.productItems = function(item)
{
if($scope.searchText==undefined)
{
return true;
}
else{
if((item.SalesPerson.toLowerCase().indexOf($scope.searchText.toLowerCase())!=-1)||(item.Product.toLowerCase().indexOf($scope.searchText.toLowerCase())!=-1))
{
return true;
}
}
return false;
}
}).error(function (data, status, headers, config) {
});
})
Create.HTML file: (Upload in site asset library or write in content editor webpart)
<html>
<head>
<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"> <input type="text" placeholder="Product&SalesPerson" ng-model="searchText" /> <br/><br/>
<table>
<tr>
<th>Product</th>
<th>Total Sales</th>
<th>Sales Target</th>
<th>Sales Peron</th>
<th>LookUPFieldData</th>
<th>Person/GroupField</th>
</tr>
<tr ng-repeat="contact in contacts|filter:productItems">
<td>{{contact.Product}}</td>
<td>{{contact.Total_x0020_Sales}}</td>
<td>{{contact.Sales_x0020_Target}}</td>
<td>{{contact.SalesPerson}}</td>
<td>{{contact.LPhone.Title}}</td>
<td>{{contact.SalesName.FirstName}}</td>
</tr> <br /> </table>
</div>
<hr /> </body>
</html>
Now finally add this in share point page add see the result. or open that html page if uploaded in site asset library and check.
Create 2 custom lists
Product Sales
Phone
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.
angularGet.js (Upload it in Site Asset library of SharePoint along with angular js file)
var spApp = angular
.module("spApp", [])
.controller("viewItemController", function ($scope, $http) {
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";
$http(
{
method: "GET",
url: url,
headers: { "accept": "application/json;odata=verbose" }
}
).success(function (data, status, headers, config) {
var dataResults=data.d.results;
var item = data.d.results[1];
$scope.contacts = dataResults;
$scope.productItems = function(item)
{
if($scope.searchText==undefined)
{
return true;
}
else{
if((item.SalesPerson.toLowerCase().indexOf($scope.searchText.toLowerCase())!=-1)||(item.Product.toLowerCase().indexOf($scope.searchText.toLowerCase())!=-1))
{
return true;
}
}
return false;
}
}).error(function (data, status, headers, config) {
});
})
Create.HTML file: (Upload in site asset library or write in content editor webpart)
<html>
<head>
<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"> <input type="text" placeholder="Product&SalesPerson" ng-model="searchText" /> <br/><br/>
<table>
<tr>
<th>Product</th>
<th>Total Sales</th>
<th>Sales Target</th>
<th>Sales Peron</th>
<th>LookUPFieldData</th>
<th>Person/GroupField</th>
</tr>
<tr ng-repeat="contact in contacts|filter:productItems">
<td>{{contact.Product}}</td>
<td>{{contact.Total_x0020_Sales}}</td>
<td>{{contact.Sales_x0020_Target}}</td>
<td>{{contact.SalesPerson}}</td>
<td>{{contact.LPhone.Title}}</td>
<td>{{contact.SalesName.FirstName}}</td>
</tr> <br /> </table>
</div>
<hr /> </body>
</html>
Now finally add this in share point page add see the result. or open that html page if uploaded in site asset library and check.
I recommend you to visit my below posts.....
Learn Angular JS
List search using Angular JS
AngularJS in a SharePoint 2013 page to add list item using CSOM
Learn Angular JS
List search using Angular JS
AngularJS in a SharePoint 2013 page to add list item using CSOM
No comments:
Post a Comment