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.
SharePoint Online FREE Training
JOIN a FREE SharePoint Video Course (3 Part Video Series)
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 […]