Can't create custom Dashlets Site Members with user details

[dga]

Hello all,

I try to create a custom dashlets based on Site Members dashlets.
Original dashlet Site Members list all user in that site.

All i want is to add some user details like jobtitle, email, telephone…

in my *.get.html.ftl i have:

[…]
<#list memberships as m>
               <div class="detail-list-item">
                  <div class="avatar">
                     <#assign avatarNodeRef>${m.authority.avatarNode!"avatar"}</#assign>
                     <img src="${url.context}/proxy/alfresco/slingshot/profile/avatar/${avatarNodeRef?string?replace('://','/')}" alt="Avatar" />
               </div>       
                     <a href="${url.context}/page/user/${m.authority.userName?url}/profile" class="theme-color-1">${m.authority.firstName?html} 
                     <#if m.authority.lastName??>${m.authority.lastName?html} </#if></a><br />
           ${jobtitle?html} <br />
       
                  <div class="clear"></div>
               </div>
</#list>
[…]
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

and in *.get.js

[…]

function getJobtitle(userName){
   var detaliiUtilizator = remote.call("/api/people/" + userName);
   
      var objDetalii = eval('(' + detaliiUtilizator + ')');      
      if(objDetalii){
         jobtitle = objDetalii.jobtitle;
      }      
         
      return jobtitle;
}

/**
 * Site Colleagues component GET method
 */
function main()
{
// Call the repo for the site memberships
   var maxItems = getMaxItems(),
      size = maxItems + 1,
      json = remote.call("/api/sites/" + page.url.templateArgs.site + "/memberships?size=" + size + "&authorityType=USER");
  
 var memberships = [],
      totalResults = 0;
   
   if (json.status == 200)
   {
      // Create javascript objects from the repo response
      var obj = eval('(' + json + ')');
      if (obj)
      {
         totalResults = obj.length;
         memberships = obj.slice(0, maxItems);

         var member, userStatus, userName, jobtitlem;
         for (var i = 0, j = memberships.length; i < j; i++)
         {
         
            member = memberships[i];
            userStatus = member.authority.userStatus;
            jobtitle = getJobtitle(member.authority.userName);
         }
         memberships.sort(sortByName);
      }
   } 
   
   // Prepare the model
   model.memberships = memberships;
  
   model.jobtitle = jobtitle;
   model.totalResults = totalResults;
   model.maxResults = maxItems;
  
   model.userMembership = AlfrescoUtil.getSiteMembership(page.url.templateArgs.site);
[…]
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

the result list is:

Administrator
Manager

User Test
Manager

expected result

Administrator
Manager

User Test
Consummer

I don't know how to make in template or js to get correct result.
Thank you all for help.

[dga]

I use jquery to generate the table with all necessary elements.

<script>
   $(window).load(function(){
   
   var table = $('<ul></ul>').addClass('detail');
   $.getJSON("${url.context}/proxy/alfresco/api/sites/${page.url.templateArgs.site}/memberships?size="+size+"&authorityType=USER",
   function(data) {
      $.each(data, function(i,item){
         var a = item.authority;
          var avatar = '${url.context}/proxy/alfresco/slingshot/profile/avatar/' + a.avatarNode.replace('://','/');
         var urlDetalii = "${url.context}/proxy/alfresco/api/people/" + a.userName;
         var row = $('<li></li>').addClass('detail-list-item').attr("style","height:86px;");         
         var img = $("<img>").addClass('avatar').attr("src",avatar).appendTo(row);
         var alink = $("<a>").addClass("theme-color-1").attr("href","${url.context}/page/user/" + a.userName + "/profile").text(a.firstName + ' ' + a.lastName).after("<br />").appendTo(row);      
         var jobtitle = $('<span>').addClass('jobtitle').text(a.jobtitle).after("<br />").appendTo(row);
         var detalii = $.getJSON(urlDetalii,function(data) {
            var email = $('<span>').addClass('email').text(data.email).after("<br />").appendTo(row);
            var mobile = $('<span>').addClass('mobile').text(data.mobile).after("<br />").appendTo(row);
         });         
         table.append(row);         
      });
   });
   $('#utilizatori').append(table);
   });
   </script>
   
   <div id="utilizatori"> </div>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Maybe there is another solution, but for my dashlet is more then ok