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

In this SharePoint tutorial, I will explain, SharePoint employee of the month web part. I will show how to create the 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 created a list in SharePoint and add the column as below screenshot.

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:

You may like following SharePoint customization tutorials:

• Create custom announcement web part using Rest API in SharePoint Online/2013/2016
• Create SharePoint Quote of the day web part using Rest API and Bootstrap
• Add Google ReCaptcha in SharePoint Online or SharePoint 2013/2016/2019 (Step by Step tutorial)
• SharePoint CSS and JavaScript Examples
• Change default list view style using CSS in SharePoint Online/2016/2013
• Left Navigation or Quick Launch Customization or Branding using CSS in SharePoint Online/2013/2016
• SharePoint Online Image Slider or Carousel Example
• Enable or Disable Notebook Link in SharePoint Online classic and modern sites
• Different ways to hide/disable quick edit in a list in SharePoint 2013/2016/Online
• How to enable tree view in SharePoint Online/2013/2016

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