Sharepoint 2010 , Sharepoint 2013 , Sharepoint 2016 , Office 365: Hosted App using Angular Js to fetch data Sharepoint 2013 , Sharepoint 2016 , Office 365

<%@ Page language="C#" Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<WebPartPages:AllowFraming ID="AllowFraming" runat="server" />

<html>
<head>
<title></title>

<script type="text/javascript" src="../Scripts/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/_layouts/15/MicrosoftAjax.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.js"></script>
<script type="text/javascript" src="../Scripts/angular.min.js"></script>
<script type="text/javascript" src="../Scripts/AngularDataLoad.js"></script>
</head>
<body>
<div class="DetailsItem" ng-app="ListItemApp">
<div ng-controller="ListItem">
<div ng-repeat="obj in LstData">{{obj.dept}} {{obj.TRS}} {{obj.PTD}}</div>
</div>
</div>
</body>
</html>

'use strict';

var hostweburl;
var appweburl;
var ListName;

getListDetails();
function getListDetails() {
hostweburl = decodeURIComponent(getQueryStringParameter('SPHostUrl'));
appweburl = decodeURIComponent(getQueryStringParameter('SPAppWebUrl'));
ListName = decodeURIComponent(getQueryStringParameter('ListName'));
AngularData();
}

//Get query string parameters
function getQueryStringParameter(paramToRetrieve) {
var params = document.URL.split("?")[1].split("&");
var strParams = "";
for (var i = 0; i < params.length; i = i + 1) {
var singleParam = params[i].split("=");
if (singleParam[0] == paramToRetrieve) return singleParam[1];
}
}

function AngularData() {
var DataItem = angular.module('ListItemApp', []);
DataItem.controller('ListItem', function ($scope, $http) {
$http({
method: 'GET',
url: appweburl + "/_api/SP.AppContextSite(@target)/web/lists/getbyTitle('" + ListName + "')/Items?@target='" + hostweburl + "'",
headers: { "Accept": "application/json;odata=verbose" }
}).success(function (data, status, headers, config) {
$scope.LstData = data.d.results;

}).error(function (data, status, headers, config) {

});

});

}

Sharepoint 2010 , Sharepoint 2013 , Sharepoint 2016 , Office 365

Wednesday, August 19, 2015

Hosted App using Angular Js to fetch data Sharepoint 2013 , Sharepoint 2016 , Office 365

No comments:

Post a Comment