Sunday, 20 December 2015

SharePoint: How do I get all the groups for the current user in Javascript and AngularJS?

SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () {

$scope.UserGroups = [];

var clientContext = new SP.ClientContext.get_current();
this.collGroup = clientContext.get_web().get_siteGroups();
currentUser = clientContext.get_web().get_currentUser();
clientContext.load(collGroup);
clientContext.load(collGroup, 'Include(Users)');
clientContext.load(currentUser);

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

function onQuerySucceeded() {
var groupEnumerator = collGroup.getEnumerator();
while (groupEnumerator.moveNext()) {
var oGroup = groupEnumerator.get_current();
var collUser = oGroup.get_users();
var userEnumerator = collUser.getEnumerator();
while (userEnumerator.moveNext()) {
var oUser = userEnumerator.get_current();
if (oUser.get_loginName() == currentUser.get_loginName())
{
$scope.UserGroups.push({
"ID": oGroup.get_id(),
"Name": oGroup.get_title()
});
}
}
}
}

function onQueryFailed(sender, args) {

alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
});

Sunday, 6 December 2015

AngularJS: Why does my module not render in my webpage?

I have been coding a simple Single Page Application solution using Angular JS running a in content editor web part in SharePoint 2010.

I had the following code in my .aspx page:

<div class="table-cell mainbody">
<div>
<div id="first" ng-controller="Controller1" ng-include="src='/StyleLibrary/pages/first.Module.html'" ></div>
<div id="second" ng-controller="Controller2" ng-include="src='/StyleLibrary/pages/second.Module.html'" ></div>
</div>
</div>


However, when I ran $("#second") in my console window, I received an empty object.

Hmmmmmm.

It appears that that each module injection needs to be surrounded by its own DIV, so I change the code to the following to make it work:

<div class="table-cell mainbody"> 
<div>
<div id="first" ng-controller="Controller1" ng-include="src='/StyleLibrary/pages/first.Module.html'" ></div>
</div>
<div>
<div id="second" ng-controller="Controller2" ng-include="src='/StyleLibrary/pages/second.Module.html'" ></div>
</div>
</div>