hubl/src/page-members.pug

script.
  document.addEventListener("WebComponentsReady", function(event) {
    class HDAppUserInfo extends SIBDisplayLookupList {
      get parentElement() {return "div"}
      getTemplate(value, index) {
        var firstname, lastname, email;

        if(typeof value == "object")
          if(Object.keys(value).length > 1) {
            firstname = value.first_name;
            lastname  = value.last_name;
            email     = value.email;
          }
          else {
            store.get(value).then(resource => {
                this.value.push(resource);
                this.render();
            });
            if(Array.isArray(this.value))this.value.splice(this.value.indexOf(value), 1);
            else this.value = [];
            return '';
          }
        return `<div>${firstname} ${lastname}</div>`;
                // + `<div id="${email}">${email}</div>`;
      }
    }
    customElements.define('hdapp-userinfo', HDAppUserInfo);

    class HDAppCell extends SIBDisplayLookupList {
      get parentElement() {return "div"}
      getTemplate(value, index) {
        var city, country;

        if(typeof value == "object")
          if(Object.keys(value).length > 1) {
            city      = value.city;
            country   = value.country;
          }
          else {
            store.get(value).then(resource => {
                this.value.push(resource);
                this.render();
            });
            if(Array.isArray(this.value))this.value.splice(this.value.indexOf(value), 1);
            else this.value = [];
            return '';
          }
        return `<span>${city} - ${country}</span>`;
      }
    }
    customElements.define("hdapp-usercell", HDAppCell);
  });

div
  h1 Members
  sib-display#profiles-list(
    data-src=`${sdn}/members/`,
    data-fields='header, footer'
    set-header='avatar, user, pseudonym, bio',
    set-footer='cell, roles, skills',
    set-pseudonym='before-pseudo, pseudo',
    value-before-pseudo='@',
    widget-avatar='sib-display-img',
    widget-user='hdapp-userinfo',
    widget-cell='hdapp-usercell',
    widget-roles='sib-display-lookuplist',
    widget-skills='sib-display-lookuplist',
    set-searchset='user.first_name, user.last_name',
    search-fields='searchset',
    next='member'
  )