How to get the total number of users from SharePoint group using JSOM

In this JSOM tutorial, we will discuss how to get the total number of users from a SharePoint group using JSOM (JavaScript Object Model).

Get the total number of users from SharePoint group using JSOM

The initial steps would be, update the below reference file in your SharePoint master page or the same as the below code.

• SP.Runtime.js
• SP.js

Next, call the ClientContext to get the current context and then call the siteGroups from the current web.

Here you have to change the SharePoint group name to your site collection group name where users have been added.

groupCollection.getByName('My Custom Group')  

After updating the above line, no need to change anything. Just copy and paste the below code in your snipped or editor tool.

You can also directly enter the code in a script editor web part inside a SharePoint web part page.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="/_layouts/15/SP.Runtime.js" type="text/javascript">
</script> <script src="/_layouts/15/SP.js" type="text/javascript"></script>
<script>
var clientContext = new SP.ClientContext();
var groupCollection = clientContext.get_web().get_siteGroups();
group = groupCollection.getByName('My Custom Group');
var userCollection = group.get_users();
clientContext.load(userCollection);  
//Execute Query
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed)); 

function onQuerySucceeded() {
    $('#container').html(userCollection.get_count());
}

function onQueryFailed(sender, args) {
    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}

</script>

</div>

<div class="od-WebInfo" style="border: 0px none; margin-left: 40px; height: 380px; margin-top: -30px; width: 450px;">
<div class="od-WebInfo-header"><h3 class="od-WebInfo-headerTag" data-bind="text: Resx.Title">Total Site Members</h3></div>
<div class="od-WebInfo-content">
<div class="od-WebInfo-viewsNumber" data-bind="text: viewsLastWeek">
<div id="container">
</div>
</div>
</div></div>
<style>
.od-WebInfo {
    border: 1px solid #f4f4f4;
    height: 100%;
    background: #f4f4f4;
}
.od-WebInfo-viewsNumber {
    line-height: 70px;
    padding-top: 60px;
    font-size: 82px;
    color: #333333;
    font-weight: 100;
}
.od-WebInfo-header {
    padding: 10px 20px;
    height: 60px;
    white-space: nowrap;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: baseline;
    align-items: baseline;
    -ms-flex-pack: justify;
    justify-content: space-between;
    font-family: "Segoe UI Light WestEuropean","Segoe UI Light","Segoe UI",Tahoma,Arial,sans-serif;
    font-size: 21px;
    font-weight: 400;
    background: #0078d4;
    color: #ffffff;
}
.od-WebInfo-content {
    padding: 0 0 0 30px;
    height: calc(100% - 50px);
}
</style>

Once you save your page, you will get the result as below screenshot. Here I have added my code inside a Script Editor WebPart to show the output.

Here you can customize more on it. You can show the user name and other details as well.

How to get SharePoint Site Visitors in last 7 days

We can also use the SharePoint site analytics to display site visitors.

Below is the code we can use to embed the code that displays the SharePoint site visitors in the last 7 days.

<div style="border: none;overflow: hidden;max-width: 460px;">
<iframe id="SiteVisits" scrolling="no"
  src="/sites/DLH/_layouts/15/siteanalytics.aspx?view=19" style="border: 0px none; margin-left: 40px; height: 380px; margin-top: -30px; width: 450px;">
    </iframe>
    </div>

You may like following SharePoint jsom tutorials:

• Read, create, update, delete file using JavaScript object model (jsom) in SharePoint
• Delete all items from List using JavaScript Object Model (jsom) in SharePoint Online
• Share blog posts on Twitter and LinkedIn using Power Automate or MS Flow
• Create, Update, Delete and Display List items using JavaScript Object Model (JSOM) in SharePoint
• SharePoint CSOM vs JSOM vs SSOM vs REST
• Uncaught TypeError: Cannot read property get_current of undefined error SharePoint Online jsom

In this tutorial, we learned how to get the total number of users from the SharePoint group using JSOM and also how to get SharePoint Site Visitors in the last 7 days.