poster

Escenario

Uno de los fuertes de SharePoint en ambientes de intranet son los perfiles de usuario que permiten no sólo mostrar información importante de un usuario, sino también obtener datos adicionales como por ejemplo el estado en Lync. Es por ello que cuando realizamos desarrollos para SharePoint, a menudo nos encontramos con que podemos o debemos añadir información del usuario conectado en alguna zona de la página.

Para exponer el caso, el escenario consiste en poner la foto del perfil del usuario al lado de su nombre en la ribbon.

Solución 1

Una de las soluciones que he encontrado es usar una URL directa a la imagen del usuario y que nos valdría para obtener la de cualquier otro usuario

http://SERVIDOR/_layouts/15/userphoto.aspx?size=M&accountname=ACCOUNTNAME

Esta URL nos permite, entre otras cosas obtener la imagen en función del tamaño (S, M, L)

 

table

userpicture-size-l userpicture-size-muserpicture-size-s

 

Además, si no pasamos el parámetro “AccountName”, obtendremos la imagen por defecto.

 userpicture-default

Solución 2

Otra posible solución es realizar una llamada a la Api REST para obtener del usuario actual y asignar la URL a una imagen del DOM tal y como muestro en el siguiente código.

function setUserPicture() {

    var urlDefaultPicture = "/_layouts/15/userphoto.aspx?size=M";

 

    $.ajax({

        url: '/_api/SP.UserProfiles.PeopleManager/GetMyProperties/PictureUrl',

        headers: { "Accept": "application/json; odata=verbose" },

        dataType: 'json'

    }).done(function (data) {

        if (data.d.PictureUrl)

            $('img.user-picture').attr('src', data.d.PictureUrl);

        else

            $('img.user-picture').attr('src', urlDefaultPicture);

        console.log('done');

    }).fail(function (jqXHR, textStatus, errorThrown) {

        console.log('fail');

    });

    

}

 

Como se puede ver en el código, he hecho un mix con la primera solución, de forma que si la solicitud a la Api REST no nos devuelve el valor deseado, mostraremos la imagen por defecto; en otro caso, asignaremos la ruta de la foto del perfil del usuario a un elemento del DOM que en mi código identifico como un <img> que tiene una clase “user-picture”.

 

Hay otras posibles soluciones como por ejemplo hacer uso de SP.Web.get_currentUser() como se explica en una parte de este artículo de la MSDN y a partir de ahí elaborarnos un código mediante llamadas a la Api REST que nos devuelvan la imagen, pero el camino me parece un poco más largo además de que hay quer realizar la instancia del Contexto y el objeto SPWeb.

 

Hasta aquí este nuevo artículo que espero que os sea útil.

Enjoy coding! 🙂