Display logged in user's name and profile picture using rest api jQuery

-
How to display logged in user's name and profile picture using rest api jQuery


Code:-
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){ 
getDetails();
});

function getDetails(){
var userDisplayName = "";
$.ajax({
    url: _spPageContextInfo.webAbsoluteUrl + "/_api/SP.UserProfiles.PeopleManager/GetMyProperties",
    type: "GET",
    headers: {
        "accept": "application/json;odata=verbose",
    },
    success: MyPictureSucceeded,
    error: MyPictureFailed
});
}
function MyPictureSucceeded(data) {
userDisplayName = data.d.DisplayName;
$('#userDisplayName').text(userDisplayName);
    if(data.d.PictureUrl != null) {
        $('#escMyPic').attr('src', data.d.PictureUrl);
    }
}
function MyPictureFailed() {
        alert('Error: Unexpected error loading profile picture.');
}
</script>
User Name :-<strong><span id="userDisplayName"></span></strong><br/>
<img id="escMyPic" src="" alt="" />

Comments

Post a Comment

Popular posts from this blog

Customizing SharePoint list and implementing Quick search using jQuery

-
Image
How to Customize SharePoint list and implementing Quick search using jQuery 1. Create a SharePoint list and create a view for it. 2. Now choose the created view and go to modify view, under Style choose Shaded as shown below.  3. Edit the list and add script editor web part to it and paste the below code. Code:- <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.0.min.js"></script> <style> .ms-addnew {   display: none; } input[type=button] {     background-color: #4CAF50;     border: none;     color: white;     padding: 16px 32px;     text-decoration: none;     margin: 4px 2px;     cursor: pointer; } </style> <script type="text/javascript"> $(document).ready(function(){   $("input.search").change(function() { debugger;      var txt = $("input....
Read more

Enable and Disable Client side People Picker using jQuery

-
Image
How to enable and disable Client side People Picker using jQuery By using below methods you can easily enable or disable Client side People Picker:- function disablePP() { $(".sp-peoplepicker-delImage").find("span").css("display","none"); $("input.sp-peoplepicker-editorInput[title='Enter names or email addresses...']").prop('disabled', true); $("div.sp-peoplepicker-topLevel[title='Enter names or email addresses...']").addClass("sp-peoplepicker-topLevelDisabled"); } function enablePP() { $("div.sp-peoplepicker-topLevel[title='Enter names or email addresses...']").removeClass("sp-peoplepicker-topLevelDisabled"); $("input.sp-peoplepicker-editorInput[title='Enter names or email addresses...']").prop('disabled', false); $(".sp-peoplepicker-delImage").find("span").removeAttr('style'); } ...
Read more

How to generate PDF using jsPDF and html2canvas library

-
Image
Generate PDF using jsPDF and html2canvas library In this post we will implement how we can generate PDF file of a web page using jsPDF and html2canvas library. These libraries allow us to generate PDF of web pages having html including icons, images, text, css etc. Below is the complete implementation for the same. Follow below steps to perform this -  1. Include jsPDF and html2canvas libraries in your html page - <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script> <script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script> <div class="canvas_div_pdf"> <!--Add HTML content you want to convert to PDF--> </div> 2. Call the below function in your JS -     function getPDF(){         var HTML_Width = $(".canvas_div_pdf").width();         var HTML_Height = $(".canvas_di...
Read more