SharePoint (and Project Server) Shenanigans

Quite often when working with data within a SharePoint environment, we wish to link the data to images hosted within a third party system.

This is often seen in the form of staff pictures that are hosted on a third party HR platform rather than within Active Directory, so the User Profile service images are of no use to us.

Unfortunately there is no real way of detecting if the image on the third party system actually exists, which means that rather than seeing the nice friendly missing profile image, you get a horrible missing image box.

This can be overcome with some simple JavaScript:

(function(){

    var defaultImage = "/_layouts/15/images/PersonPlaceholder.200x150x32.png";

    var profileImage = document.createElement("img");

    // Define an error handler, this will fire if there is an
    // error loading the URL for the staff image and redirect
    // it to the missing user profile image in the hive.

    profileImage.onError = function() {

        this.src = defaultImage;

    }

    // Point the image element to our staff images then attach
    // it to the DOM.

    profileImage.src = "http://hr/staffimages/" + employeeId + ".png";

    // Note that the employeeId variable referenced above is to be
    // provided externally and is beyond the scope of this post.

    var container = document.getElementById("profileImageContainer");

    if (container) {
        container.appendChild(profileImage);
    }
})();

With this code in place any missing images will automatically serve the default image instead.

This method will work anywhere you need to serve images and have no way of detecting if the image to be served exists or not.

SharePoint and Project Server Consultant MCITP – SharePoint Administrator 2010 MCTS – Microsoft Project 2010 – Managing Projects, Project Server 2010, Configuration, SharePoint 2010, Configuration Prince 2 – Practitioner This article has been cross posted from spchris.com (original article)