Post
Ask Question

Get Profile Properties Used In Microsoft Office Delve Site Of A Particular User

Nowadays, many organizations are moving towards Office 365 to share and manage their content. It also provides the Microsoft Office 365 Delve website to display personal content, such as graphs, blogs, organization structure, and profiles of the users but sometimes, the client doesn't want to show all this information to the user.

In my current project, the client wants to display only the required information on a page for a particular user. So I have created a People page using the Search Result web part which will show the list of all the users of the organization. After clicking on the username, they will be redirected to the custom page having the required information of the selected user.

Below are the steps,
  1. I have created one web part page with the name "Profile".
  2. I created a text file named profile.txt and added the below code into it.
    1. <script src="/SiteAssets/jquery.min.js"></script>  
    2. <script src="/SiteAssets/jquery-ui.js"></script>  
    3. <link rel="stylesheet" href="/SiteAssets/jquery-ui.css">  
    4. <style>  
    5.     .dvHeading1 {  
    6.         color: #212121;  
    7.         font-size: 28px;  
    8.         font-family: Segoe UI Web Light;  
    9.         padding-top: 20px;  
    10.     }  
    11.  
    12.     #dvProfileMain {  
    13.         background-color: white;  
    14.         padding: 20px;  
    15.         border-radius: 10px;  
    16.         margin: 0 auto;  
    17.     }  
    18.   
    19.     .dvProfile {  
    20.         padding-left: 20px;  
    21.     }  
    22.  
    23.     #dvProfileName {  
    24.         cursor: pointer;  
    25.         color: #0078d7;  
    26.         font-family: Segoe UI Web Light;  
    27.         font-size: 28px;  
    28.         font-weight: 400;  
    29.     }  
    30.  
    31.     #dvProfileData {  
    32.         padding-left: 25px;  
    33.     }  
    34.   
    35.     .dvData {  
    36.         color: #333;  
    37.         font-family: Segoe UI Web Semilight;  
    38.         font-size: 17px;  
    39.         font-weight: 400;  
    40.     }  
    41.   
    42.     td {  
    43.         padding-left: 20px;  
    44.     }  
    45. </style>  
    46. <div id="dvProfileMain">  
    47.     <div id="dvPicture" class="dvProfile">  
    48.         <div id="dvProfilePic">  
    49.             <img id="imgProfile" height="72" width="72">  
    50.         </div>  
    51.         <div id="dvProfileName">  
    52.         </div>  
    53.     </div>  
    54.     <div id="dvProfileData">  
    55.         <div id="dvPI" class="dvProfile">  
    56.             <div class="dvHeading1">Personal information</div>  
    57.             <div id="dvPIData" class="dvData">  
    58.                 <table>  
    59.                     <tr>  
    60.                         <td>Full Name:</td>  
    61.                         <td><span id="dvPrefferedName"></span></td>  
    62.                     </tr>  
    63.                     <tr>  
    64.                         <td>Designation:</td>  
    65.                         <td><span id="dvTitle"></span></td>  
    66.                     </tr>  
    67.                     <tr>  
    68.                         <td>Department:</td>  
    69.                         <td><span id="dvDepartment"></span></td>  
    70.                     </tr>  
    71.                     <tr>  
    72.                         <td>Office:</td>  
    73.                         <td><span id="dvOffice"></span></td>  
    74.                     </tr>  
    75.                     <tr>  
    76.                         <td>Manager:</td>  
    77.                         <td><a id="lnkManager"><span id="dvManager"></span></a></td>  
    78.                     </tr>  
    79.                     <tr>  
    80.                         <td>Email:</td>  
    81.                         <td><span id="dvWorkEmail"></span></td>  
    82.                     </tr>  
    83.                     <tr>  
    84.                         <td>Phone:</td>  
    85.                         <td><span id="dvWorkPhone"></span></td>  
    86.                     </tr>  
    87.                     <tr>  
    88.                         <td>Birthday:</td>  
    89.                         <td><span id="dvBirthday"></span></td>  
    90.                     </tr>  
    91.                 </table>  
    92.             </div>  
    93.         </div>  
    94.         <div id="dvAskMeAbout" class="dvProfile">  
    95.             <div class="dvHeading1">Ask Me About</div>  
    96.             <div id="dvAskMeAboutData" class="dvData"></div>  
    97.         </div>  
    98.         <div id="dvSkills" class="dvProfile">  
    99.             <div class="dvHeading1">Skills and expertise</div>  
    100.             <div id="dvSkillsData" class="dvData"></div>  
    101.         </div>  
    102.         <div id="dvSchools" class="dvProfile">  
    103.             <div class="dvHeading1">Schools and education</div>  
    104.             <div id="dvSchoolsData" class="dvData"></div>  
    105.         </div>  
    106.         <div id="dvInterests" class="dvProfile">  
    107.             <div class="dvHeading1">Interests and hobbies</div>  
    108.             <div id="dvInterestsData" class="dvData"></div>  
    109.         </div>  
    110.     </div>  
    111. </div>  
    112. <script>  
    113.     $(document).ready(function() {  
    114.         var userID = getUrlParameter('userID');  
    115.         if (userID != "" && userID != null && userID != undefined) {  
    116.             var accName = userID;  
    117.         } else {  
    118.             var accName = _spPageContextInfo.userLoginName;  
    119.         }  
    120.         getProfile(accName);  
    121.     });  
    122.   
    123.     function getProfile(accName) {  
    124.         $.ajax({  
    125.             async: false,  
    126.             url: _spPageContextInfo.webAbsoluteUrl + "/_api/SP.UserProfiles.PeopleManager/getPropertiesFor(accountName=@v)?@v=%27i%3A0%23.f|membership|" + accName + "%27&$select=UserProfileProperties",  
    127.             type: "GET",  
    128.             headers: {  
    129.                 "accept": "application/json;odata=verbose",  
    130.                 "content-Type": "application/json;odata=verbose"  
    131.             },  
    132.             success: function(data) {  
    133.                 console.log(data);  
    134.                 var properties = data.d.UserProfileProperties.results;  
    135.                 for (var i = 0; i < properties.length; i++) {  
    136.                     var property = properties[i];  
    137.                     if (property.Key == "PictureURL") {  
    138.                         $('#imgProfile').attr('src', property.Value);  
    139.                     } else if (property.Key == "FirstName") {  
    140.                         $("#dvProfileName").html(property.Value);  
    141.                     } else if (property.Key == "PreferredName") {  
    142.                         $("#dvPrefferedName").html(property.Value);  
    143.                     } else if (property.Key == "Title") {  
    144.                         $("#dvTitle").html(property.Value);  
    145.                     } else if (property.Key == "Department") {  
    146.                         $("#dvDepartment").html(property.Value);  
    147.                     } else if (property.Key == "Office") {  
    148.                         $("#dvOffice").html(property.Value);  
    149.                     } else if (property.Key == "WorkEmail") {  
    150.                         $("#dvWorkEmail").html(property.Value);  
    151.                     } else if (property.Key == "WorkPhone") {  
    152.                         $("#dvWorkPhone").html(property.Value);  
    153.                     } else if (property.Key == "SPS-Birthday") {  
    154.                         var monthname = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");  
    155.                         var birthDate = (property.Value).split(' ')[0];  
    156.                         var birthdayMonth = monthname[(birthDate.split('/')[0]) - 1];  
    157.                         var birthdayDate = parseInt(birthDate.split('/')[1]);  
    158.                         $("#dvBirthday").html(birthdayMonth + " " + birthdayDate);  
    159.                     } else if (property.Key == "SPS-Responsibility") {  
    160.                         $("#dvAskMeAboutData").html(property.Value);  
    161.                     } else if (property.Key == "SPS-Skills") {  
    162.                         var skills = property.Value.split("|").join(", ");  
    163.                         $("#dvSkillsData").html(skills);  
    164.                     } else if (property.Key == "SPS-School") {  
    165.                         $("#dvSchoolsData").html(property.Value);  
    166.                     } else if (property.Key == "SPS-Interests") {  
    167.                         var interests = property.Value.split("|").join(", ");  
    168.                         $("#dvInterestsData").html(interests);  
    169.                     } else if (property.Key == "Manager") {  
    170.                         if (property.Value != "") {  
    171.                             var mgrEmail = property.Value.split("|")[2];  
    172.                             getManager(mgrEmail);  
    173.                         }  
    174.                     }  
    175.                 }  
    176.             },  
    177.             error: function(error) {  
    178.                 console.log(JSON.stringify(error));  
    179.             }  
    180.         });  
    181.     }  
    182.   
    183.     function getManager(mgrEmail) {  
    184.         $.ajax({  
    185.             async: false,  
    186.             url: _spPageContextInfo.webAbsoluteUrl + "/_api/SP.UserProfiles.PeopleManager/getPropertiesFor(accountName=@v)?@v=%27i%3A0%23.f|membership|" + mgrEmail + "%27&$select=DisplayName",  
    187.             type: "GET",  
    188.             headers: {  
    189.                 "accept": "application/json;odata=verbose",  
    190.                 "content-Type": "application/json;odata=verbose"  
    191.             },  
    192.             success: function(data1) {  
    193.                 console.log(data1);  
    194.                 $("#dvManager").html(data1.d.DisplayName);  
    195.                 $("#lnkManager").attr("href", "/Pages/Profile.aspx?userID=" + mgrEmail);  
    196.             },  
    197.             error: function(error) {  
    198.                 console.log(JSON.stringify(error));  
    199.             }  
    200.         });  
    201.     }  
    202.   
    203.     function getUrlParameter(name) {  
    204.         name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');  
    205.         var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');  
    206.         var results = regex.exec(location.search);  
    207.         return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));  
    208.     };  
    209. </script>  
  3. Now, we need to edit the Profile.aspx page and give reference to the .txt file.
  4. Click on the "Apply" and then, the OK button.
  5. Save the page and publish it.
  6. If currently, you don't have the People page, then you can directly open the Profile.aspx page with the account name as a parameter in the URL.
Thanks.