SharePoint employee of the month web part using client-side object model and bootstrap

This SharePoint tutorial, I will explain, SharePoint employee of the month web part. I will show how to create employee of the month web part using client object model and bootstrap in SharePoint 2013/2016/Online.

Most of the organization they used employee of month web part in their SharePoint intranet application.

Here we will see how to create an employee of the month web part using jsom and bootstrap in SharePoint Online/2013/2016.

SharePoint employee of the month web part

Step-1: To create SharePoint employee of the month web part, I have create a List in SharePoint and add the column as below screenshot.

sharepoint employee of the month web part
sharepoint employee of the month web part

Step-2: Create a SharePoint web part page and add a script editor Web part in the web part page.

Step-3: Add the below code inside script editor Web part.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
    .widget-user-desc, .widget-user-username {
        text-align: center;
        color: rgba(60, 141, 188, 1) !important;
    }
        .widget-user-desc:hover, .widget-user-username:hover {
            text-align: center;
            color: rgba(60, 141, 188, 1) !important;
        }
    .fa-certificate {
        color: rgba(60, 141, 188, 1) !important;
    }

    .widget-user-image > img {
        width: 57px !important;
        height: auto;
        float: left;
    }
    .box {
         margin-bottom: 0px!important; 
         padding:0px!important; 
    }

</style>
<script>
 
    $(function () {

        ExecuteOrDelayUntilScriptLoaded(retrieveListItems, "sp.js");

    });
 
    function retrieveListItems() {

        var clientContext = new SP.ClientContext("https://pikasha132.sharepoint.com/sites/EmployeeDirectory");

        var oList = clientContext.get_web().get_lists().getByTitle('EmployeeOfMonth');

        var camlQuery = new SP.CamlQuery();
        camlQuery.set_viewXml('<View><Query><Where><And><IsNotNull><FieldRef Name="Title" /></IsNotNull><Eq><FieldRef Name="Year" /><Value Type="Text">2019</Value></Eq></And></Where><OrderBy><FieldRef Name="Created" Ascending="False" /></OrderBy></Query><RowLimit>3</RowLimit><</View>');

        this.collListItem = oList.getItems(camlQuery);

        clientContext.load(collListItem);

        clientContext.executeQueryAsync(

            Function.createDelegate(this, this.onQuerySucceeded),

            Function.createDelegate(this, this.onQueryFailed)

        );

    }
 
    function onQuerySucceeded(sender, args) {

        var html = '';

        var listItemEnumerator = collListItem.getEnumerator();

        while (listItemEnumerator.moveNext()) {
           
            var oListItem = listItemEnumerator.get_current();
            var img = $(oListItem.get_item('Photo'));
            html += '<li class="list-group-item"><div class="box box-widget widget-user-2"><div class="widget-user-header "><div class="widget-user-image"><img class="img-circle" alt="User Avatar" src="'+ img[0].$1_1 +'"></div><i class="fa fa-certificate"></i><h5 class="widget-user-desc">'+oListItem.get_item('Year')+' ['+oListItem.get_item('Month')+']</h5><h3 class="widget-user-username">'+oListItem.get_item('Title')+'</h3></div></div></li>';           
        }

        $(".EmployeeOfMonth").append(html);
    }
 
    function onQueryFailed(sender, args) {

        alert('Request failed. ' + args.get_message() +

            '\n' + args.get_stackTrace());
    }
 
</script>

<div class="row">
    <div class="col-xs-3">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">Employee Of Month</h3>
            </div>
            <div class="panel-body">
                <ul class="list-group EmployeeOfMonth">
                   
            </div>
        </div>
    </div>
</div>

Step-5: Click on OK button and the expected output should be like below screenshot. Your SharePoint employee of the month web part looks like below:

sharepoint employee of the month webpart
sharepoint employee of the month webpart

You may like following SharePoint customization tutorials:

Hope this SharePoint tutorial helps to create an employee of the month web part in SharePoint 2013/2016/Online using jsom and bootstrap.

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

Get update on Webinars, video tutorials, training courses etc.

>