Solved

SharePoint 2010 - Retrieving List Data with AngularJS

Posted on 2014-07-20
4
3,177 Views
Last Modified: 2014-07-26
I have been searching for an example on how to work with SharePoint 2010 list data, and most references point to SharePoint 2013. I did however find one example on SharePoint.StackExchange.com that shows how a particular users was taking this approach.

I could use some help with setting up the file structure, and how to place this within SharePoint. I believe everything should go into the Style Library, and then add the html to a page, and references to the scripts. Is this the best approach?

Cheers

SharePointListService.js

(function () {
//// SharePointListService.js
"use strict";
var module = angular.module('sharePointList', []);
module.provider('SharePointList', function () {
    var clientCtx;
    var web;
    var configuration = {};
    this.$get = ['$q',"$log", function ($q,$log) {
        var contextLoaded = $q.defer();
        SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () {
            clientCtx = SP.ClientContext.get_current();
            web = clientCtx.get_web();
            contextLoaded.resolve();
        });
        function createServiceForConfiguration(config) {
            var service = {};
            service.self = service;
            service.clientCtx = clientCtx;
            service.web = web;
            service.getListItems = function (listName, queryString, fields) {
                var deferred = $q.defer();
                contextLoaded.promise.then(function () {
                    var list = web.get_lists().getByTitle(listName);
                    var query = new SP.CamlQuery();
                    query.set_viewXml(queryString);
                    var listItems = list.getItems(query);
                    var fieldList = fields.join(",");
                    clientCtx.load(listItems,"Include("+fieldList+")" );
                    clientCtx.executeQueryAsync(function () {
                        var resultItems = [];
                        var listItemEnumerator = listItems.getEnumerator();
                        while (listItemEnumerator.moveNext()) {
                            var listItem = listItemEnumerator.get_current();
                            var resultItem = {};
                            for (i = 0; i < fields.length; i++) {
                                resultItem[fields[i]] = listItem.get_item(fields[i]);
                            }
                            resultItems.push(resultItem);
                        }
                        deferred.resolve(resultItems);
                    }, function (sender, args) {
                        var messageFormat="Loading of list {0} with  failed with error. {1} \n{2}";
                        var message=messageFormat.format(listName,args.get_message() ,args.get_stackTrace());
                        $log.error(message);
                    })
                });
                return deferred.promise;
            };
            return service;
        }
        return createServiceForConfiguration(configuration);
    }];
}
);})();

Open in new window


app.js

(function () {
"use strict";
var app = angular.module("app1", [
    // angular stuff
    "ui.router",
    "sharePointList",
    "ngGrid",
    'ngSanitize'
]);
app.config(function (SharePointListProvider, $stateProvider, $urlRouterProvider) {
    // For any unmatched url, redirect to /portfolios
    $urlRouterProvider.otherwise("/distributionGroups");
    $stateProvider
     .state('distributionGroups', {
         url: '/distributionGroups',
         templateUrl: 'distributiongroupstemplate.html',
         controller: "SharePointListCtrl"
     });
});
app.controller("SharePointListCtrl", ["$scope", "$state", "SharePointList", "$templateCache", function ($scope, $state, SharePointList, $templateCache) {
    $scope.gridOptions = {
        data: 'distributionGroups',
        enableCellSelection: true,
        enableRowSelection: false,
        enableCellEdit: true,
        columnDefs: [
            { field: 'Title', displayName: 'Title', enableCellEdit: false, width: "160px", resizeable: true },
            { field: 'EMail', displayName: 'E-Mail', width: "160px" }
        ]
    };
    var queryString = "<View><Query><OrderBy><FieldRef Name='Title' Ascending='False'/></OrderBy></Query></View>";
    SharePointList.getListItems("DistributionGroups", queryString,["Title","EMail"]).then(function (distributionGroups) {
        $scope.distributionGroups = distributionGroups;
    });
}]);})();
window.onload = function () {
    var $rootelement = angular.element(window.document);
    var modules = [
        "ng",
        "app1",
        function ($provide) { $provide.value("$rootElement", $rootelement); }
    ];
    var $injector = angular.injector(modules);
    var $compile = $injector.get("$compile");
    var compositeLinkFn = $compile($rootelement);
    var $rootScope = $injector.get("$rootScope");
    compositeLinkFn($rootScope);
    $rootScope.$apply();
}; 

Open in new window


html

<div>
         <a data-ui-sref="distributionGroups">Distribution Groups</a>
   </div>
   <div data-ui-view>default content</div>  
 </div>
<script type="text/ng-template" id="distributiongroupstemplate.html" >
    <div id="distributiongroups">
        <div class="gridStyle" data-ng-grid="gridOptions">
        </div>
    </div>
    </script>

Open in new window

0
Comment
Question by:brendanlefavre
  • 2
  • 2
4 Comments
 
LVL 50

Expert Comment

by:teylyn
ID: 40208189
Hello,

yes, the Style Library is a good idea for storing script files. Out of the box, the Style Library supports versioning and can be read by all users. You can even check in minor versions of files and see the changes on your machine, while the regular user still sees only the experience with the last published version. So, yes, by all means use the Style Library.

I often create sub folders for Scripts and libraries like jQuery (or Angular), to keep my scripts separate from the downloaded libraries.

If you want the script to work on one page only, then the quickest is to add a Content Editor Web Part and set its "content link" to your script file in the Style Library.

The script file contents could look something like this:

<link rel="stylesheet" type="text/css" href="/sites/path/Style Library/CSS/customCSS.css">
<script type="text/javascript" src="/sites/path/Style Library/jQuery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/sites/path/Style Library/jQuery/jquery.SPServices-2014.01.min.js"></script>
... load your AngularJS in a similar way

<script type="text/javascript">
 ... your javascript 
</script>
<div>
         <a data-ui-sref="distributionGroups">Distribution Groups</a>
   </div>
   <div data-ui-view>default content</div>  
 </div>
<script type="text/ng-template" id="distributiongroupstemplate.html" >
    <div id="distributiongroups">
        <div class="gridStyle" data-ng-grid="gridOptions">
        </div>
    </div>
    </script>

Open in new window


If you need AngularJS on more than one page, then you can load the JS files in the Master Page instead. If you need details for that, please pipe up.

cheers, teylyn
0
 

Author Comment

by:brendanlefavre
ID: 40221880
I'm getting an error when I reload the page, and inspect the results via the Google Chrome Developer Tools

Error:
Console Error
File Structure:
File Structure
The following is added to the home page in a CEWP via the script link to a txt file.

<script type="text/javascript" src="http://portal/sites/angularjs/Style Library/dg/angular.min.js"></script>
<script type="text/javascript" src="http://portal/sites/angularjs/Style Library/dg/jQuery/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://portal/sites/angularjs/Style Library/dg/jquery.SPServices-2014.01.js"></script>
<script type="text/javascript" src="http://portal/sites/angularjs/Style Library/dg/SharePointListService.js"></script>
<script type="text/javascript" src="http://portal/sites/angularjs/Style Library/dg/app.js"></script>


<div>
    <a data-ui-sref="distributionGroups">Distribution Groups</a>
   </div>
<div data-ui-view>default content</div>  

<script type="text/ng-template" id="distributiongroupstemplate.html" >
    <div id="distributiongroups">
        <div class="gridStyle" data-ng-grid="gridOptions"></div>
    </div>
</script>

Open in new window

0
 
LVL 50

Accepted Solution

by:
teylyn earned 500 total points
ID: 40222068
Chrome and SharePoint 2010 don't play well together. Before attempting to get anything to work in Chrome, make sure that it works with IE first.

As far as I understand the question, it is about where to best place the Angular library. If the files are loading, and it seems that they are, the file location issue has been resolved and this question has been answered.

You are now following up with a question to troubleshoot your code. That is a different aspect and should go into a new question.
0
 

Author Closing Comment

by:brendanlefavre
ID: 40222090
original question answered
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Pimping Sharepoint 2007 without Server-Side Code Part 1 One of my biggest frustrations with Sharepoint 2007 in the corporate world is that while good-intentioned managers lock down the more interesting capabilities of Sharepoint programming in…
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now