hubl/src/html/members.html

<script>
  class LDPDisplayCell extends LDPWidget {
    get template() {
      return `<div name="${this.name}">${this.value.city} - ${this.value.country}</div>`;
    }

    render() {
      store.get(this.value).then( (value) => {
        this._value = value;
        this.innerHTML = this.template;
      });
    }
  }
  customElements.define("ldp-display-cell", LDPDisplayCell);
</script>

<div id="members" class="view" style="display: none">
  <ldp-display 
    id="profiles-list" 
    data-src="<?php echo $sdn; ?>/members/" 
    set-name="firstname, name-separator, lastname"
    value-name-separator="&nbsp;"
    value-city-separator=",&nbsp;"
    data-fields="avatar, name, cell"
    widget-avatar="ldp-display-img"
    widget-cell="ldp-display-cell"
    search-fields="firstname, lastname"
    next="member"
  ></ldp-display>
</div>