Create a custom User profile web part using SharePoint REST API and bootstrap

In this SharePoint bootstrap tutorial, we will discuss how to create a custom user profile web part using the SharePoint REST API and bootstrap.

The code will work in SharePoint Online and SharePoint 2013/2016.

Here I have created a simple web part which can retrieve the current user properties and show in a SharePoint page using REST API.

Create a custom User profile web part using SharePoint REST API and bootstrap

Below is the example of the custom user profile Web part in SharePoint with Rest API and bootstrap.

Step 1: Login to your SharePoint site -> Create a web part page. Then open the web part page and Add a Script editor Web part into the page.

Step 2: The below is the tested code which you can copy and paste it inside the script editor Web part.

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<style type="text/css">
    body{
    background: -webkit-linear-gradient(left, #3931af, #00c6ff);
}
.emp-profile{
    padding: 3%;
    margin-top: 3%;
    margin-bottom: 3%;
    border-radius: 0.5rem;
    background: #fff;
}
.profile-img{
    text-align: center;
}
.profile-img img{
    width: 70%;
    height: 100%;
}
.profile-img .file {
    position: relative;
    overflow: hidden;
    margin-top: -20%;
    width: 70%;
    border: none;
    border-radius: 0;
    font-size: 15px;
    background: #212529b8;
}
.profile-img .file input {
    position: absolute;
    opacity: 0;
    right: 0;
    top: 0;
}
.profile-head h5{
    color: #333;
}
.profile-head h6{
    color: #0062cc;
}
.profile-edit-btn{
    border: none;
    border-radius: 1.5rem;
    width: 70%;
    padding: 2%;
    font-weight: 600;
    color: #6c757d;
    cursor: pointer;
}
.proile-rating{
    font-size: 12px;
    color: #818182;
    margin-top: 5%;
}
.proile-rating span{
    color: #495057;
    font-size: 15px;
    font-weight: 600;
}
.profile-head .nav-tabs{
    margin-bottom:5%;
}
.profile-head .nav-tabs .nav-link{
    font-weight:600;
    border: none;
}
.profile-head .nav-tabs .nav-link.active{
    border: none;
    border-bottom:2px solid #0062cc;
}
.profile-work{
    padding: 14%;
    margin-top: -15%;
}
.profile-work p{
    font-size: 12px;
    color: #818182;
    font-weight: 600;
    margin-top: 10%;
}
.profile-work a{
    text-decoration: none;
    color: #495057;
    font-weight: 600;
    font-size: 14px;
}
.profile-work ul{
    list-style: none;
}
.profile-tab label{
    font-weight: 600;
}
.profile-tab p{
    font-weight: 600;
    color: #0062cc;
}
</style>
<script type='text/javascript'>  
    var workEmail = "";  
    var EmployeeID = "";  
    var Division = "";  
    var userDisplayName = "";  
    var AccountName = "";  
    var firstName="";
    var lastname="";
    var skillset="";
    var webURL="";
    var pictureLink="";
    var department="";
    var phone="";
    $.ajax({  

        url: _spPageContextInfo.webAbsoluteUrl + "/_api/SP.UserProfiles.PeopleManager/GetMyProperties",  
        headers: { Accept: "application/json;odata=verbose" },  
        success: function (data) {  
            try {  
                //Get properties from user profile Json response  
                userDisplayName = data.d.DisplayName;  
                AccountName = data.d.AccountName;  
                var properties = data.d.UserProfileProperties.results;  
                for (var i = 0; i < properties.length; i++) {  
                  var property = properties[i]; 
                    if (property.Key == "WorkEmail") {  
                        workEmail = property.Value;  
                    }  

                    if (property.Key == "EmployeeID") {  
                        EmployeeID = property.Value;  
                    }  
                    if (property.Key == "Division") {  
                        Division = property.Value;  
                    }  
                  if (property.Key == "SPS-Skills") {  
                        skillset= property.Value;  
                    }  
                 if (property.Key == "WebSite") {  
                        webURL= property.Value;  
                    }  
                     if (property.Key == "FirstName") {  
                        firstName= property.Value;  
                    }  
                  if (property.Key == "FirstName") {  
                        lastname= property.Value;  
                    }  
                     if (property.Key == "Department") {  
                        department= property.Value;  
                    }  
                    if (property.Key == "WorkPhone") {  
                        phone= property.Value;  
                    }  
					if (property.Key == "PictureURL") {  
                        pictureLink= property.Value;  
                    }  			

                }  
				
				var picture='';
				var namedetails='';
				var skill='';
				var contatcDetails='';
				picture +="<img src= '"+ pictureLink +"' alt=''/>";  
				namedetails +="<div class='profile-head'>";
                namedetails +="<h5>"+userDisplayName +" </h5>";
                namedetails +="<h6>"+department +" </h6>";	
                namedetails +=' <p class="proile-rating">RANKINGS : <span>8/10</span></p> <ul class="nav nav-tabs" id="myTab" role="tablist"><li class="nav-item"><a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">About</a></li><li class="nav-item"><a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Timeline</a></li></ul>';				
                namedetails +="</div>"; 
				
				skill +="<div class='profile-work'>";
				skill +='<p>WORK LINK</p><a href="">' +webURL+'</a><br/>';
				skill +='<p>SKILLS</p><a href="">' +skillset+'</a><br/>';
				skill +='</div>';
				
				contatcDetails +='<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">';
				contatcDetails +='<div class="row"><div class="col-md-6"><label>User Id</label></div><div class="col-md-6"><p>'+AccountName+'</p></div></div>';
				contatcDetails +='<div class="row"><div class="col-md-6"><label>Name</label></div><div class="col-md-6"><p>'+userDisplayName+'</p></div></div>';
				contatcDetails +=' <div class="row"><div class="col-md-6"><label>Email</label></div><div class="col-md-6"><p>'+workEmail+'</p></div></div>';
				contatcDetails +='<div class="row"><div class="col-md-6"><label>Phone</label></div><div class="col-md-6"><p>'+phone+'</p></div></div>';
				contatcDetails +='<div class="row"><div class="col-md-6"><label>Profession</label></div><div class="col-md-6"><p>'+department+'</p></div></div>';
				
				contatcDetails +='</div>';
				
				 $("#profImage").append(picture);
				 $("#UserNamedetails").append(namedetails);
				 $("#profileDetails").append(skill);
				 $("#myTabContent").append(contatcDetails);
				 
            } catch (err2) {  
                //alert(JSON.stringify(err2));  
            }  
        },  
        error: function (jQxhr, errorCode, errorThrown) {  
            alert(errorThrown);  
        }  
    });  

</script>  

<div class="container emp-profile">
            <form method="post">
                <div class="row">
                    <div class="col-md-4">
                        <div class="profile-img" id="profImage">
                            
                            <div class="file btn btn-lg btn-primary">
                                Change Photo
                                <input type="file" name="file"/>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6" id="UserNamedetails">
                    </div>
                    <div class="col-md-2">
                        <input type="submit" class="profile-edit-btn" name="btnAddMore" value="Edit Profile"/>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4" class="profileDetails" id="profileDetails"> 
					
                    </div>
                    <div class="col-md-8">
                        <div class="tab-content profile-tab" id="myTabContent">
                           
                           </div>  							
                     </div>
                        </div>
                    </div>
            </form>           
        </div></DIV>

Step 3: The below is the out put of my code.

Note: The below are the other properties you can retrieve using REST API.

List of User Properties (Use the GetPropertiesFor function for these):

AccountName
DirectReports
DisplayName
Email
ExtendedManagers
ExtendedReports
IsFollowed
LatestPost
Peers
PersonalUrl
PictureUrl”
Title
UserProfileProperties
UserUrl

List of User Profile Properties (Use the GetUserProfilePropertyFor function for these)

AboutMe
SPS-LastKeywordAdded
AccountName
SPS-Locale
ADGuid
SPS-Location
Assistant
SPS-MasterAccountName
CellPhone
SPS-MemberOf
Department
SPS-MUILanguages
EduExternalSyncState
SPS-MySiteUpgrade
EduOAuthTokenProviders
SPS-O15FirstRunExperience
EduPersonalSiteState
SPS-ObjectExists
EduUserRole
SPS-OWAUrl
Fax
SPS-PastProjects
FirstName
SPS-Peers
HomePhone
SPS-PersonalSiteCapabilities
LastName
SPS-PersonalSiteInstantiationState
Manager
SPS-PhoneticDisplayName
Office
SPS-PhoneticFirstName
PersonalSpace
SPS-PhoneticLastName
PictureURL
SPS-PrivacyActivity
PreferredName
SPS-PrivacyPeople
PublicSiteRedirect
SPS-ProxyAddresses
QuickLinks
SPS-RegionalSettings-FollowWeb
SID
SPS-RegionalSettings-Initialized
SISUserId
SPS-ResourceAccountName
SPS-AdjustHijriDays
SPS-ResourceSID
SPS-AltCalendarType
SPS-Responsibility
SPS-Birthday
SPS-SavedAccountName
SPS-CalendarType
SPS-SavedSID
SPS-ClaimID
SPS-School
SPS-ClaimProviderID
SPS-ShowWeeks
SPS-ClaimProviderType
SPS-SipAddress
SPS-ContentLanguages
SPS-Skills
SPS-DataSource
SPS-SourceObjectDN
SPS-Department
SPS-StatusNotes
SPS-DisplayOrder
SPS-Time24
SPS-DistinguishedName
SPS-TimeZone
SPS-DontSuggestList
SPS-UserPrincipalName
SPS-Dotted-line
SPS-WorkDayEndHour
SPS-EmailOptin
SPS-WorkDayStartHour
SPS-FeedIdentifier
SPS-WorkDays
SPS-FirstDayOfWeek
Title
SPS-FirstWeekOfYear
UserName
SPS-HashTags
UserProfile_GUID
SPS-HireDate
WebSite
SPS-Interests
WorkEmail
SPS-JobTitle
WorkPhone
SPS-LastColleagueAdded

user profile properties REST API for current user

1. Get all properties of current user

http://siteurl/_api/SP.UserProfiles.PeopleManager/GetMyProperties

2. Get single property of current user

http://siteurl/_api/SP.UserProfiles.PeopleManager/GetMyProperties/PictureUrl

OR

http://siteurl/_api/SP.UserProfiles.PeopleManager/GetMyProperties?$select=PictureUrl

3. Get multiple properties for the current user

http://siteurl/_api/SP.UserProfiles.PeopleManager/GetMyProperties?$select=PictureUrl,AccountName

You may like following SharePoint Rest API tutorials:

• Display custom alert message in SharePoint using REST API
• Create a Custom People Directory using REST API in SharePoint
• Retrieve and Display TASK status using REST API in SharePoint
• Create a Custom Calendar in SharePoint using Rest API and jQuery
• Display SharePoint list data in jQuery data table using Rest API
• Create Highcharts in SharePoint using Rest API
• Create SharePoint Quote of the day web part using Rest API and Bootstrap
• Display Task List data in a table using SharePoint REST API and filter by status column
• SharePoint 2013 Add Top Navigation Link to a Site Using REST API

These are the above steps you can follow to retrieve user profile properties by programmatically in SharePoint 2013/2016/2019 and SharePoint online.