Create a custom User profile web part using SharePoint REST API and bootstrap
Check out Best Alternative to InfoPath -> Try Now
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.
SharePoint 2016 Tutorial Contents
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.
Download SharePoint Online Tutorial PDF FREE!
Get update on Webinars, video tutorials, training courses etc.
Excellent work sir. Can you please come up with sample CRUD with SPFX?
Sure. It is in progress.
[…] Create a custom User profile web part using SharePoint REST API and bootstrap […]