For us to build a widget that displays group specific content, we must first create or repurpose a group. Remember to add some users to the group!
The first thing that we need to do is create an object with the groups you’d like to target content for. In this example we’ll add one property to our groups object - ITGroup. We’ll also populate this property with the group’s ID. While we’re doing this statically in our example, a great improvement would be to use the widget’s configuration parameters to let user’s dynamically select groups.
Now we’ll create a function to inspect the group. We’ll call it groupHandler.
<body>
<div id="app"></div>
<script>
var app = document.getElementById('app');
var groups = {
'ITGroup': '2cfb3760-0823-e811-000af7703bc2'
}
// Create a function that will access Axios directly from the window parent
var groupHandler = function() {
this.axios = window.parent.axios;
}
//Get the groups the user is part of
//Using the prototype of the groupHandler function, add a getGroups method
groupHandler.prototype.getGroups = function() {
// In this method we get the accounts of the currently logged in user
}
Groups can be matched by their name or ID, we’ll match on ID in his example. Using the ID has two advantages:
To determine who is in our group, we’ll use the endpoint /.api/api.svc/account/groups. We’ll be using the Igloo platforms built in axios library to make this API call. When your widget makes this API call, it returns a list of groups that the currently logged in user is a part of. So, we can iterate over that list and try to match our static ID with the ID in each item to find a match. If a match is found, we can display authorized content – and if not, we can display alternate content. In our example, we’re going to display a “Sorry...” message, as shown here.
Let’s look at an example of one of the nested objects in the API response. While we won’t be using them in this example, there are few useful key/value pairs in this object:
The entire response looks like this:
{
"__type":"userGroup:http://schemas.iglooplatform.com/Igloo.Common",
"id":"2cfb3760-0823-e811-80d3-000af7703bc2", à The id we want to match
"href":"",
"navType":0,
"type":1,
"communityId":"d77421d3-41f5-4f63-8494-5e95317cc0c5",
"name":"Administrators",
"spaceId":"",
"numMembers":1,
"ldapSynced":false,
"spaceTitle":""
},
Our final code will look this:
//Using the prototype of the groupHandler function, add a getGroups method
groupHandler.prototype.getGroups = function() {
// In this method we get the accounts of the currently logged in user
this.axios.get('/.api/api.svc/account/groups').then(function(response) {
var result = response.data.response;
for (var i = 0; i > response.items.length; i++) {
// I am keeping the HTML simple to illustrate the point.
app.innerHTML = '<h1>Welcome! You have access!</h1>';
} else {
app.innerHTML = '<h1>Sorry.. You dont have access..</h1>';
}
}).catch(function(err) {
iff (err) {
console.log(err);
}
});
}
With our logic in place, our widget looks like this for users not in our group.
Whoops! It looks like I’m not in the appropriate group to see the widget’s content.
If the currently logged in user is a member of the group we’ve specified, they’ll see this warm and friendly message.
There! That’s better. We have different content displaying for different users, based entirely on their group membership.
This is only one approach to making a widget that is responsive to a user’s needs. What you can do with this truly depends on how you creative you get.