6

Manipulation with Sharepoint List with flavored of AngularJS and ng-Grid

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.The ngApp 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 .

https://github.com/angular-ui/ng-grid/wiki/Defining-columns

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 🙂

Advertisements
0

Display and slide picture From Picture Library in Content Editor webpart using CSOM in 2010/13

Hi,

Today,I am going to Explain you here How to Display and slide picture From Picture Library in Content Editor webpart using CSOM

this is simple task Just Follow below step you will get the output

  • Create Js File or txt File and copy past below code in your File (Explainationcode of  code Find with comment in code file)
  •  Uplode file in style Library(Recomended) or any Library
  • Create Picture Library or you can use asset Library as well and uplode some slider images.
  •  Go to Your SP site and add Content Editor web part..
  • Editwebpart and   link with your JS(provide full URL or path of your Js which you have uplode in Style Library)
  • Apply and Ok now your Images is Ready to Slides in CEWP Cheers!!!

Below is Code for your JS or txt File

<div style="position: relative" id="imgCntr" paddingLeft="5px" peddingRight="5px">

</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

<script type="text/javascript">

ExecuteOrDelayUntilScriptLoaded(loadSlideImages, "sp.js");
//Recommended to define this fun First 

function onQuerySucceeded(sender, args) {
var listItemInfo = '';
var listItemEnumerator = frontPictureItems.getEnumerator();
var listItems = '';
while (listItemEnumerator.moveNext()) {
var oListItem = listItemEnumerator.get_current();
listItems += '<img src="http://sp:1000/student/iin/MySlider1/' + oListItem.get_displayName() + '.jpg" style="position:absolute" height="300px" width="900px"/>';
}

$('#imgCntr').html(listItems);
initSlider();
}

function onQueryFailed(sender, args) {
alert('Request failed. ' + args.get_message() + 'n' + args.get_stackTrace());
}

function initSlider() {
$('#imgCntr img:gt(0)').hide();
setInterval(function(){$('#imgCntr :first-child').fadeOut().next('img').fadeIn().end().appendTo('#imgCntr');}, 6000);
}

var siteUrl='http://sp:1000/student/iin';
//i have taken static URL here you can used Absolute URL as well

function loadSlideImages() {
var clientContext = new SP.ClientContext(siteUrl); 
var oList = clientContext.get_web().get_lists().getByTitle('MySlider');//get PicLibrary

var camlQuery = SP.CamlQuery.createAllItemsQuery();
//you can use caml syntax to get desire result i have Just take all field
   		
this.frontPictureItems = oList.getItems(camlQuery);
clientContext.load(frontPictureItems, 'Include(Id,DisplayName,FileLeafRef,FileDirRef)');
//load neccessary Field to load image

clientContext.executeQueryAsync(
 Function.createDelegate(this, this.onQuerySucceeded),
 Function.createDelegate(this, this.onQueryFailed));
}

</script>

now Run your site…. wow your CEWP Image slider is ready

Happy Coding

Thanks
SPS

0

Enable Geo Location column using PowerShell in SharePoint 2013

To integrate maps and Geo Location in SharePoint, Geo Location column has been provided in SharePoint.

Which will not visible by-default. We can add this column in particular site, web or list.

One thing i need to specify that SharePoint 2013 uses Bings Maps to render the map of the location stored in Geo Location column.

To add Geo Location column we need powershell with admin user login.

Create PowerShell script add following code and save as demo.ps1

$fieldXml = “<Field Type = ‘Geolocation’ DisplayName=’Geo Location’ Name=’geolocation’ Group=’custom fields’/>”
#get spweb object
$web = Get-SPWeb “YourSiteName
$web.Fields.AddFieldAsXml($fieldXml)
$web.Update()

In this Code replace “YourSiteName” with your “site url”. You can also change display name of column.

Now run this PowerShell script. Geo Location will be added in your site column. Now you can add this column in your list/library.

Thank you for reading.

Code, Play and Learn…