Table of Contents


​

Introduction



One of my friends asked me how admin group from organization can create, delete or modify the communities. His requirement was something like he wants 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 wants 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 at one place.

Approaches

You can do this by following some of the ways:

1.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 the headache here is you need to put custom layer of access; so that users can see intended discussions only. Still this is an option, although I don’t recommend it.

2.With One web application, Site collection and multiple communities (sub sites) :

In this option you need to create a web application and a site collection; site collection should have Community template available to create Community sub sites. 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 sub sites. And you can create as many sub sites 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 option of unique permissions, you can give, take permission of users, managing individual community is also easy. 

3.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 same as option 2 above, only difference is here communities are site collections.

So after understanding SharePoint 2013 community sites I 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 I 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 option to see all existing communities and admins can create them. Below screenshot depicts how it looks.



Example Approach 2

Steps for creating 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 successfuly.");
        $("#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>


4. Upload this file to Site Asset library.
5. Open the home page of site collection in edit mode.
6. Add content editor web part.
7. Provide the URL of ‘community.html’ to the content editor web part.
8. Save and apply settings.



 

Consolidated Top Contributors of Communities

 

Everyone including administrator wants to see the top contributors of community. In some organization 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 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 are 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 I have write 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 this script works? 

This script is written for the scenario where approach 2 is used(refer above example). So it first finds out all community sites. And then it collects all top 5 contributors from all community, while doing this it checks whether 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 management console for all communities. This is very basic and initial level of script. I am planning to add following features in it: configure permissions for users from this console, list out top communities, top contributors,  health of communities, etc. 

See Also