Published
on
March 28, 2019
| 2,002 views
| 34 followers
members are following updates on this item.
|
Displaying group specific content in a widget
Did you know that you can build your widget to display content that’s responsive to a user’s group membership? By programmatically determining if a user is part of a specific group, we can render content in the widget tailored to that group.
First things first
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!
Let’s start coding
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:
- Group names can change, the ID does not
- The IS at the outer level of the response object, so we don’t need to drill very deep in to the response to check it.
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:
- name: you can match on the name of the group
- ldapSynced: this group is managed by ILST (Igloo’s LDAP Sync Tool)
- spaceTitle: this group is specific to this part of the community (or space)
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.
Extending to meet your requirements
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.
Viewed 2,001 times