4 Replies Latest reply on Dec 14, 2012 10:17 AM by noelwhite

    Need help getting avatar from corev3 javascript APIs


      Mark Weitzel et. all

      I am writing a little whiz-bang javascript app to generate some excitement around apps in our community.  My intent is to create a cool way for users to navigate visually through the follower/following information structure.  I had the basics working using the corev2 APIs, and the avatars were being displayed.  The thumbnailUrl returned was the full path to the avatar picture on the server.  When I switched to using the corev3 APIs, the thumbnailUrl no longer has the full path to the pic.  It instead returns the REST call like, "/people/2014/avatar".  Of course, when this is put in an <image xlink:href=...> tag, it does not know what I am telling it to get.  How can I get the URL path to the avatar picture to display that the V2 version of thumbnailUrl returned?


      Here is a snippet of the code populating the visualization:


              var request = osapi.jive.corev3.people.get({"id": "@me","fields": "displayName,thumbnailUrl"});
              request.execute( function(response) {
                if (!response.error) {
                  var viewer = response;

                  Graph.addNode(viewer.displayName, viewer.thumbnailUrl);

                  viewer.getFollowing({"count": 500, "fields": "displayName,thumbnailUrl"}).execute( function(followingList) {
                    if (!followingList.error){
                      followingList.list.forEach( function(following) {
                        Graph.addNode(following.displayName, following.thumbnailUrl);
                        Graph.addLink(viewer.displayName, following.displayName);

                  viewer.getFollowers({"count": 500, "fields": "displayName,thumbnailUrl"}).execute( function(followersList) {
                    if (!followersList.error){
                      followersList.list.forEach( function(follower) {
                        Graph.addNode(follower.displayName, follower.thumbnailUrl);
                        Graph.addLink(viewer.displayName, follower.displayName);

        • Re: Need help getting avatar from corev3 javascript APIs

          Noel White,

          OK. Right now, the JS API returns things that are relative. You can get the root part of the URL from the data.resources.html attribute. From there, you can calculate the proper URI to the resource. I've opened up a feature request to add the ability to get an absolute URI from the API.


          That aside... Is there a reason relative URLs are not working? I thought xlinks could be relative.


          For Jive's reference: https://jira.jivesoftware.com/browse/JIVE-23544

            • Re: Need help getting avatar from corev3 javascript APIs

              It is pulling in what appears to be a default icon for everyone.  Here is a screeny:


              I misspoke in my original post.  It should work in an xlink, but for some reason it is returning the default every time (or something like that).  Inspecting one of the resulting elements shows the following:

              <image width="24" height="24" xlink:href="/people/2011/avatar"></image>

              All of the elements look similar with just the person id varying.


              Let me know what else I can provide to help with this.  I will try your suggestion when I get some time later today.

                • Re: Need help getting avatar from corev3 javascript APIs

                  That's weird. Would it be easy for you to make a small app that does just this? I'd like to try running it on sandbox.jiveon.com and see if we get the same results.

                  Also, if you had a fully qualified URL, does this work?

                    • Re: Need help getting avatar from corev3 javascript APIs

                      OK, taking your suggestion, I wrote the following:


                              osapi.people.getViewer().execute( function(viewer) {

                                Graph.addNode('V2 API thumbnailUrl', viewer.thumbnailUrl);


                              osapi.jive.corev3.people.get({"id": "@me","fields": "displayName,thumbnailUrl"}).execute( function(viewer) {

                                Graph.addNode('V3 html->ref', viewer.resources.html.ref + '/avatar/44.png');



                      Which does indeed give the output I am looking for (as long as the hard-coded 44.png does not change):


                      Let me know if (or when) there is an alternative to hard-coding this.

                      1 person found this helpful