Manage Displayed Content Based on Groups and JavaScript

featured-img

OVERVIEW

In this post, I’m going to show you how to use JavaScript to create a way to programmatically control content on your page. You may be thinking “Why would I do this when I can easily just use the audience feature to set content?” That’s fine and dandy if it is simple web parts that you are using – but what about dynamically created content that’s being rendered via jQuery or JavaScript? That’s where this post comes in to help. I’ll show you how I was able to implement this and how you will be able to as well. Also, I have not tested this with AD Security Groups being added to Permissions groups in SharePoint. As far as I know, this only works with users being placed in the SharePoint group.
 

THE SETUP

To begin, I want to give you some background on my setup. In my SharePoint intranet, all of my custom scripts are stored into a single .js file. This file is where my code lives that will be executing this logic. This can cause some issues because I typically use this same file across multiple site collections so that they all have access to these functions, but some site collections don’t use this and I’m just too lazy to recreate the file with custom coding.

Most of the functions we’ll be dealing with are located within the SP.js file. It is important that this file is loaded before our scripts fire. Therefore, we need to include some code at the very top of our main JavaScript file. That code is:

1
2
'use strict';
ExecuteOrDelayUntilScriptLoaded(IsCurrentUserWithContributePerms, 'SP.js');

METHOD #1 – ISCURRENTUSERMEMBEROFGROUP

This method’s whole purpose is to find out who the user is and what groups they’re in. This method requires two parameters. The first parameter is the name of the group you’re targeting passed as a string and the second parameter is what to do when the method is complete. As we will see in the next part of the code, we will actually pass a method as the second parameter.

Here is the code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
function IsCurrentUserMemberOfGroup(groupName, OnComplete) {

var context = new SP.ClientContext.get_current();
var currentWeb = context.get_web();

var currentUser = context.get_web().get_currentUser();
context.load(currentUser);

var allGroups = currentWeb.get_siteGroups();
context.load(allGroups);

var group = allGroups.getByName(groupName);
context.load(group);

var groupUsers = group.get_users();
context.load(groupUsers);

context.executeQueryAsync(
function(sender, args) {
var userInGroup = IsUserInGroup(currentUser,group);
OnComplete(userInGroup);
},
function OnFailure(sender, args) {
OnComplete(false);
}
);

function IsUserInGroup(user,group)
{
//console.log('user: ' + user);
var groupUsers = group.get_users();
var userInGroup = false;
var groupUserEnumerator = groupUsers.getEnumerator();
while (groupUserEnumerator.moveNext()) {
var groupUser = groupUserEnumerator.get_current();
//console.log('groupUser: ' + groupUser);
if (groupUser.get_id() == user.get_id()) {
userInGroup = true;
break;
}
}
return userInGroup;
}
}

The second method (IsUserInGroup) is the method that we’ll be passing as the second parameter.

METHOD #2 – ISCURRENTUSERWITHCONTRIBUTEPERMS

This is the method that was previously referenced above as the method we need to pause until the SP.js file is loaded. Once that file is loaded, the browser can execute this method.

Here is the code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function IsCurrentUserWithContributePerms() {

IsCurrentUserMemberOfGroup("testGroup1", function (isCurrentUserInGroup) {
if(isCurrentUserInGroup)
{
$('#welcomeArea').append("
<ul>
    <li class="
welcomeList"><a href="#">Asset Management</a></li>
</ul>
"
);
}
});

IsCurrentUserMemberOfGroup("testGroup2", function (isCurrentUserInGroup) {
if(isCurrentUserInGroup)
{
$('#welcomeArea').append("
<ul>
    <li class="
welcomeList"><a href="#">Communication Management</a></li>
</ul>
"
);
}
});
}

As you can see in this method when a person is found to be in a specific group the link to the content is then appended to a list on the page. If that person is not found to be in that specific group, then it will be hidden. Below are two images that demonstrate what the user would see when they are and are not a member of specific groups.

example-image1

Wrap-Up

Thank you, once again, for taking the time out to read this. I really appreciate it. If you find my content informational and helpful, I would suggest signing up for my mailing list so that we can keep in touch.

Need help with SharePoint? Feel free to contact me.

Have a bigger project? Check out my company, UDig, LLC.