SharePoint 2013: SharePoint Community Site as Real Time Social Communities or Groups
Introduction
One of my friends asked me how admin group from the organization can create, delete or modify the communities. This requirement was the following: he wanted to create a social application on top of SharePoint 2013 where admins can create as many communities or groups for various departments, people; at the same time he also wanted to provide community management feature to them so that admin can delete, purge or modify the community. By default these features are available there, only thing is: you need to exploit them to best as per your requirement. Also by default SharePoint has provided web forms to create, delete or manage the Communities though they are here and there and you want everything in one place.
Approaches
You can do this by following some of the ways:
With one community site
If the usage of your social application is very limited or less then create one community site and create multiple discussions threads and categorized them with proper category. Here category will act as a boundary and you will have felt like there are different groups or social communities. But a headache here is you need to put a custom layer of access; so that users can see intended discussions only. Still, this is an option, although I don’t recommend it.
With one web application, site collection and multiple communities (subsites)
In this option you need to create a web application and a site collection; site collection should have Community template available to create Community subsites. So my idea here is the root web will act as the landing site from where users can see multiple communities. Don’t forget that Communities itself are nothing but subsites. And you can create as many subsites in SharePoint site provided that your FARM supports (performance wise). You will manage all communities from the root site. In this approach communities or social groups are well separated; you have the option of unique permissions, you can give, take permission from users, managing individual community is also easy.
With one web application, multiple communities (site collections)
In this approach, you need to create a web application and you will create many communities as site collection. The idea is the same as option two above, the only difference is here communities are site collections.
So after understanding SharePoint 2013 community sites, we have concluded this; SharePoint experts may have different views and ideas as compare to above one.
So now we will see how you can use option No. 2 and create a social application for your organisation. In this example, we have created one web application and a site collection (root web). And it will have all communities and a page where admins can manage all communities; this script is very basic which provides an option to see all existing communities and admins can create them. Below screenshot depicts how it looks.
Example Approach 2
Steps for creating a social site using option 2:
1. Create web application from the central administration.
2. Create root site collection.
3. Create a community.html file by using below code snippet.
<script src="/SiteAssets/js/jquery.js"></script>
<script src="/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
var siteTitle;
var siteTemplate; //template for Community.
var siteURL;
var sitePermission ;
var siteDescription;
var allwebs, allwebsToShow;
function CreateSite() {
siteTitle = $("#siteTitle").val();
siteTemplate = "COMMUNITY#0"; //template for Community.
siteURL = siteTitle.replace(" ","");
sitePermission = true;
siteDescription = $("#siteDesc").val();
var clientContext = new SP.ClientContext.get_current();
this.Web = clientContext.get_web(); //.get_current();
var webInfo = new SP.WebCreationInformation();
webInfo.set_webTemplate(siteTemplate);
webInfo.set_description(siteDescription);
webInfo.set_title(siteTitle);
webInfo.set_url(siteURL);
webInfo.set_language("1033");
webInfo.set_useSamePermissionsAsParentSite(sitePermission);
allwebs = this.Web.get_webs();
//allwebs.add(webInfo);
clientContext.load(this.Web);
clientContext.load(allwebs);
clientContext.executeQueryAsync(Function.createDelegate(this, this.onSuccess),
Function.createDelegate(this, this.onFail));
}
function onSuccess(sender, args) {
alert("Community Created successfully.");
$("#siteTitle").val("");
$("#siteDesc").val("");
}
function onFail(sender, args) {
alert('Failed:' + args.get_message());
}
$(document).ready(function () {
ExecuteOrDelayUntilScriptLoaded(GetAllCommunities, "sp.js");
});
function GetAllCommunities() {
debugger;
var clientContext = new SP.ClientContext.get_current();
this.Web = clientContext.get_web();
allwebsToShow = this.Web.get_webs();
clientContext.load(this.Web);
clientContext.load(allwebsToShow);
clientContext.executeQueryAsync(Function.createDelegate(this, this.onSuccessAllWebs),
Function.createDelegate(this, this.onFailAllWebs));
}
function onSuccessAllWebs(sender, args) {
var htmlStart = "<table id='communityTable' style='margin-left:10px;'><thead><tr><th>Name</th><th>Description</th><th>Delete</th></tr></thead>"
var htmlEnd = "</table>"
var htmlstr = "";
for (var i = 0 ; i < allwebsToShow.get_count() ; i++) {
if (allwebsToShow.get_item(i).get_webTemplate() == "COMMUNITY") {
htmlstr = htmlstr + "<tr style='border-top:1pt solid black;'><td><a href='" + allwebsToShow.get_item(i).get_url() + "'>" + allwebsToShow.get_item
(i).get_title() + "</a></td><td>" + allwebsToShow.get_item(i).get_description() + "</td><td> "+ "<a href='javascript:alert('Delete')'>Delete</a>" + "</td></tr>"
}
}
$("#allCommunities").html(htmlStart + htmlstr + htmlEnd);
$('#communityTable').dataTable();
}
function onFailAllWebs(sender, args) {
alert('Failed:' + args.get_message());
}
</script>
<style type="text/css">
#btnCreate {
height: 38px;
width: 293px;
font-size: medium;
background-color: #808080;
text-align: center;
}
#siteTitle {
height: 31px;
width: 378px;
font-size: large;
}
.auto-style1 {
padding: 0px;
width: 498px;
}
.auto-style2 {
padding-top: 0px;
width: 498px;
}
.auto-style3 {
height: 44px;
padding-top:30px;
width: 498px;
}
#siteDesc {
font-size: small;
width: 375px;
height: 89px;
}
.auto-style6 {
width: 405px;
}
.auto-style7 {
height: 12px;
}
</style>
<div style="border:solid 1px #070303;width: 586px;">
<table style="width: 574px">
<tr>
<td>
<table style="border:1px solid #070303;padding-left:25px;margin-left:15px; width: 551px;">
<tr>
<th class="auto-style6">
<h3>All Communities</h3>
</th>
</tr>
<tr>
<td class="auto-style6">
<div id="allCommunities" style="width:100%">
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="auto-style7">
</td>
</tr>
<tr>
<td>
<table style="border:1px solid #070303;padding-left:25px;margin-left:15px; width: 549px;">
<tr>
<th class="auto-style6">
<h3>New Community.
</h3>
</th>
</tr>
<tr>
<td class="auto-style6">
<table style="padding-left:25px;margin-left:15px; width: 517px;">
<tr>
<td class="auto-style1" style="padding-top:15px;">
<h3>Enter Name of Community </h3>
</td>
</tr>
<tr>
<td class="auto-style2">
<input type="text" id="siteTitle" />
</td>
</tr>
<tr>
<td class="auto-style1">
<h3>Description of Community </h3>
</td>
</tr>
<tr>
<td class="auto-style2">
<textarea id="siteDesc"></textarea>
</td>
</tr>
<tr>
<td class="auto-style3" style="padding-left:30px;">
<input type="button" id="btnCreate" value="Create Community" onclick="CreateSite();" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
- Upload this file to Site Asset library.
- Open the home page of the site collection in edit mode.
- Add content editor web part.
- Provide the URL of ‘community.html’ to the content editor web part.
- Save and apply settings.
Consolidated Top Contributors of Communities
Everyone including administrator wants to see the top contributors to community. In some organizations it is used as a parameter to recognize and reward a person. So how will you get top contributors? Yes, SharePoint 2013 already provides this OOB using member’s lists view. You can see top contributors for the community and this is specific to that community only and it is calculated on the basis of Reputation Score/points earned by members.
Now, what if you want to see consolidated top Contributors amongst all communities? As in your social application, there is a number of communities and members have joined more than one community. And now you want to find out top contributor amongst all communities, now how you can achieve it?
So here we have written a script which gives you consolidated top contributors and displays on the screen with their Reputation score, Name, number of replies and number of post.
<style type="text/css">
.auto-style1 {
width: 169px;
}
</style>
<script src="/jquery-1.7.1.min.js"></script>
<script src="/jquery.dataTables.min.js"></script>
<script type="text/javascript">
var allSitesToShow;
var ArrayOfMembers = new Array();
var ArrayOfListItemCollection = new Array();
var context;
$(document).ready(function () {
ExecuteOrDelayUntilScriptLoaded(GetAllCommunitySites, "sp.js");
});
function GetAllCommunitySites() {
debugger;
context = new SP.ClientContext.get_current();
this.Web = context.get_web();
allSitesToShow = this.Web.get_webs();
context.load(this.Web);
context.load(allSitesToShow);
context.executeQueryAsync(Function.createDelegate(this, this.onSuccessAllCommunitySites),
Function.createDelegate(this, this.onFailAllWebs));
}
function onSuccessAllCommunitySites(sender, args) {
debugger;
var camlQuery = new SP.CamlQuery();
//var query = '<View/>';
var query = "<View><Query><OrderBy><FieldRef Name='ReputationScore' Ascending='False'></FieldRef></OrderBy></Query><RowLimit>5</RowLimit></View>";
camlQuery.set_viewXml(query);
context = new SP.ClientContext.get_current();
for (var i = 0 ; i < allwebsToShow.get_count() ; i++) {
if (allwebsToShow.get_item(i).get_webTemplate() == "COMMUNITY") {
//var context = new SP.ClientContext.get_current();
var list = allwebsToShow.get_item(i).get_lists().getByTitle("Community Members");
var listItems_1 = list.getItems(camlQuery);
ArrayOfListItemCollection.push(listItems_1);
context.load(listItems_1);
}
}
context.executeQueryAsync(Function.createDelegate(this, this.onSuccessListItems), Function.createDelegate(this, this.onFailAllWebs));
}
function onSuccessListItems(sender, args) {
debugger;
var flag = false;
for (var i = 0 ; i < ArrayOfListItemCollection.length ; i++) {
for (var j = 0 ; j < ArrayOfListItemCollection[i].get_count() ; j++) {
var Data ={
MemberName: ArrayOfListItemCollection[i].get_item(j).get_fieldValues().Title,
ReputationScore: ArrayOfListItemCollection[i].get_item(j).get_fieldValues().ReputationScore,
NumberOfDiscussions: ArrayOfListItemCollection[i].get_item(j).get_fieldValues().NumberOfDiscussions,
NumberOfReplies: ArrayOfListItemCollection[i].get_item(j).get_fieldValues().NumberOfReplies,
NumberOfBestResponses: ArrayOfListItemCollection[i].get_item(j).get_fieldValues().NumberOfBestResponses,
LookupId: ArrayOfListItemCollection[i].get_item(j).get_fieldValues().Member.get_lookupId()
}
for (var k = 0 ; k < ArrayOfMembers.length ; k++) {
if (ArrayOfMembers[k].MemberName == Data.MemberName) {
flag = true;
break;
}
}
if (flag == true) {
ArrayOfMembers[k].ReputationScore = ArrayOfMembers[k].ReputationScore + Data.ReputationScore;
ArrayOfMembers[k].NumberOfDiscussions = ArrayOfMembers[k].NumberOfDiscussions + Data.NumberOfDiscussions;
ArrayOfMembers[k].NumberOfReplies = ArrayOfMembers[k].NumberOfReplies + Data.NumberOfReplies;
}
else {
ArrayOfMembers.push(Data);
}
flag = false;
}
//alert(ArrayOfMembers);
}
ArrayOfMembers = ArrayOfMembers.sort(function (a, b) { return b.ReputationScore - a.ReputationScore });
var htmlStart = "<table style='width:300px;'>"
var htmlEnd = "</table>"
var htmlstr = "";
for (var i = 0 ; i < ArrayOfMembers.length ; i++) { //ArrayOfMembers.length
if (i == 5)
break;
htmlstr = htmlstr + "<tr style='border-top:1pt solid black;'><td style='width:140px;vAlign:Top;'><a href='/_layouts/15/userdisp.aspx?ID=" + ArrayOfMembers[i].LookupId + "'>" + ArrayOfMembers[i].MemberName + "</a></td><td style='width:140px;'><table><tr><td> Reputation Score: " + ArrayOfMembers[i].ReputationScore + "</td></tr><tr><td> Discussions posted: " + ArrayOfMembers[i].NumberOfDiscussions + "</td></tr><tr><td> Number Of Replies: " + ArrayOfMembers[i].NumberOfReplies + "</td></tr></table></td></tr>";
}
$("#contribDiv").html(htmlStart + htmlstr + htmlEnd);
}
function onFailAllWebs(sender, args) {
alert('Failed:' + args.get_message());
}
</script>
<div>
<div id="contribDiv" style="border:solid 1px #070303;">
</div>
</div>
**How does this script work? **
This script is written for the scenario where approach 2 is used (please refer to the above example). So it first finds out all community sites. And then it collects all top five contributors from all community while doing this it checks whether the member has joined more than one community and sums the Reputation score of all community. In last step it sorts the member collection on the basis of reputation score and displays on the screen.
Conclusion
Now you are ready to use this page as a management console for all communities. This is very basic and initial level of a script. We are planning to add following features in it: configure permissions for users from this console, list of top communities, top contributors, the health of communities, etc.