How to: Display the user name and avatar - akumina/AkuminaTraining GitHub Wiki

Applies to

Akumina 3.4.0.0 and later

Introduction

This article explains how to display the currently logged in user's display name and avatar, using the UserContext object.

Username and Avatar

Pre conditions

You will need a container to display the user name and the user image. Generally these will be div elements, but the img element may be used for the user image as well. Both elements must possess unique class attributes

For example:

<div class="userNameDisplay"></div>
<div class="userImageDisplay"></div>

or

<div class="userNameDisplay"></div>
<img class="userImageDisplay" src=""/>

How to Deploy

  1. Download digitalworkplace.custom.js from the “/Style Library/DigitalWorkplace/JS” folder within SharePoint
  2. Paste the Code within digitalworkplace.custom.js
  3. Upload the updated digitalworkplace.custom.js to the “/Style Library/DigitalWorkplace/JS” folder within SharePoint
  4. Navigate to a page on your Akumina site
  5. Flush your cache by clicking on the Akumina icon in the left rail, clicking the refresh icon, then clicking “Refresh All Cache”
  6. Refresh the page.

Code

var AdditionalSteps = AdditionalSteps || {
}

if ((typeof AdditionalSteps.MoreSteps) === 'undefined') {

    AdditionalSteps.MoreSteps = {

        Init: function () {
            console.log('AdditionalSteps.MoreSteps.Init');  
            var steps = [];
            steps.push({ stepName: "Initialize Generic Controls", additionalSteps: [{ name: "Show Welcome Message", callback: ShowWelcomeMessage}] });
            return steps;
		}       
    }
}

function ShowWelcomeMessage() {
    SetUserName(".userNameDisplay");
    SetUserProfileImage(".userImageDisplay", true);

    //the framework will not go to the next step until you fire this event
    Akumina.Digispace.AppPart.Eventing.Publish('/loader/onexecuted/');
}

function SetUserName(element) {
    var msg = "Welcome " + Akumina.Digispace.UserContext.DisplayName;
    $(element).text(msg);
}

function SetUserProfileImage(element, userName, backgroundImage) {
    var img = "/_layouts/15/userphoto.aspx?size=S&username=" + Akumina.Digispace.UserContext.UserLoginName.split('@')[0];
                
    if(backgroundImage) {
        $(element).css({'border-radius':'1em', 'background': 'url(' + img + ') center center/cover'});
    }
    else {
        $(element).attr('src', img);
    }
}

Note that the classes passed to SetUserName and SetUserProfileImage must match the classes in your html.

Result

Username and Avatar

The current user's display name and avatar are displayed on the page.

References

To learn how to customize the Page Life Cycle using the Akumina Framework see the following articles:

⚠️ **GitHub.com Fallback** ⚠️