Hello Developers !!!
i am sharing with such things which i have implemented. i have played with SharePoint2013 , angularJS and ng-grid and that was seriously amazing.
Now i am going to explain scenario which i have implemented.
What u do If your client require to display SharePoint list data with CEWP(Content Editor web part) and it must be user friendly with highest look and feel ?
I guess , you guys understand the requirement carefully!!! Now i going to one step ahead . . . .
After listening the requirement , i just thinking which JS has to implement to fulfill Requirement, i have many option like NODE.JS , Angular.JS, JQuery etc . . So i think and tell my self.
Let’s Dipen , ready to Play with Angular.JS
now i have create one custom list in Sharepoint2013. i m not explaining you this thing , because i think it’s out of the track part . but i provide you link to refer for creating list.
http://www.c-sharpcorner.com/UploadFile/644e54/sharepoint-2013-document-library-list-settings/
Now, how many things you have to want to implement this things.
1) Index.HTML //To display the content in CEWP
2)Angular.Js
3)ng-grid.Js and ng-grid.css
4)If you wan to add bootsrap than call bootstrap.css
5) main.js // your Scripting Logic and events are handled int his js file
now , i mention below index.HTMl File which i have created.
Index.HTML
<!DOCTYPE html>
<html ng-app=”myApp”>
<head lang=”en”>
<title>CustomList</title>
<link data-require=”bootstrap-css@3.2.0″ data-semver=”3.2.0″ rel=”stylesheet” href=”bootstrap.min.css”/>
<link rel=”stylesheet” type=”ng-grid.css”/>
<link rel=”stylesheet” type=”text/css” href=”style.css”/>
<script src=”jquery-1.8.2.js” type=”text/javascript”></script> // not necessary to add
<script src=”angular.js” type=”text/javascript”></script>
<script type=”ng-grid-1.3.2.js”></script>
<script type=”main.js”></script>
</head>
<body ng-controller=”MyCtrl”>
<div class=”gridStyle” ng-grid=”gridOptions”></div>
</body>
</html>
Step 1 : Here , i have declare one <div> and class=”gridStyle” grid style is a inbuilt class of the Angular ng-grid.
-
ng-app : Root Element of the HTML.The first
ngApp
found in the document will be used to define the root element to auto-bootstrap as an application.ThengApp
directive designates the root element of the application and is typically placed near the root element of the page – e.g. on the<body>
or<html>
tags. - ng-Controller: Actually AngularJs is working on basic concept of Modal , View and Controller . ng-Controller is a inbuild property in angular. Now,You have question Right ? Why it is necessary to write? Exactly, it is most important . if you are not include than you can not use your Scripting logic with HTMl element.
The
ngController
directive specifies a Controller class.The class contains business logic behind the application to decorate the scope with functions and values.The type of the ng-Controller is “Expression“.ng-controller="as propertyName"
. - ng-grid=”gridOption” is a inbuilt property in Angular. “gridoption” is custome option list which is created by coder in custom js File . ii know you guys are little bit panic or confuse , but trust me , Honestly saying You can understand better , how to work this at end of the post .
Main.JS
var app = angular.module(‘myApp’, [‘ngGrid’]); // myApp is our Root Element of the HTML. Ican say it’s Container to contain the element and data binding.
app.controller(‘MyCtrl’, function($scope,$http) { // Myctrl is controller
$http({
method: ‘GET’,
url: _spPageContextInfo.webAbsoluteUrl + “/_api/web/lists/getByTitle(‘Task’)/items?$select=Title,CustomDate,Modified”, //rest Api to get the a Data from the Sharepoint list .
headers: { “Accept”: “application/json;odata=verbose” }
}).success(function (data, status, headers, config) {
$scope.totalServerItems = data.d.results;
}).error(function (data, status, headers, config) {
alert(“Error Occured” + “Status Code = ” + Status);
});
$scope.gridOptions = {
data: ‘totalServerItems ‘,
columnDefs: [
{field: ‘Title’, displayName: ‘Title’},
{field: ‘CustomDate’, displayName: ‘Date’,cellFilter: ‘date:\’dd-MMM-yyyy\”}]
};
$scope,$http ? What is it ? . . Wait wait wait … i m going explain it in detail . . . 🙂
Scope As Data-modal :
Scope is the glue between application controller and the view.Both controllers and directives have reference to the scope, but not to each other. This arrangement isolates the controller from the directive as well as from the DOM.
$http A Service
The
$http
service is a core Angular service that facilitates communication with the remote HTTP servers via the browser’s XMLHttpRequest object .Simple language it use to get data from external sources.
columnDefs:[{}]
Column Definition to display the column to gird.There’s bunch of options available in angular . you can utilize it depending on your requirement.I have used Field which is display no of column to grid .
Field has two property : 1)field : which is column name which you want to display data or ic an sat binding of data. 2) displayName which renders the column header or Title on page .
You can find other option From bellow link .
now you can Call this index.HTMl file to Content Editor Web part . and Refresh the page . . . You can see list of data in CEWP and That will be amazing. . .
I tried my best to describe the concept.I hope, you guys enjoyed this blog . If have an any query , kindly leave your comment.
Happy Coding 🙂
Reblogged this on Dinesh Ram Kali..
LikeLike
Hi,
I have a question for you, how do you retrieve list items with lookup columns using AngularJS? No change in the above case, just an additional lookup column where I need display name to be showed.
Thanks,
LikeLiked by 1 person
I’ll get back to u with the proper solution.
LikeLike
is it possible to have the solution of this sample
LikeLike
Sorry , I am not reliable to share a solution file for this.
LikeLike
Helllo , have been able to find a solution about Angelo’s request. Since currently I am looking for a solution for such kind of requirement.
LikeLike