Ng-admin: how can i make a custom template listView of entity?

Question

I try to make custom template listView, for example:

import listTemplate from '../templates/listTemplate.html';

var users = admin.getEntity('users');
  users
    .listView()
    .template(listTemplate)
    .actions([])
    .title('All users')
    .perPage(10)
    .fields([
      nga.field('email'),
      nga.field('name')
    ])
    .filters([
       nga.field('filter', 'template')
         .label('')
         .pinned(true)
         .defaultValue('')
         .template('<div class="input-group"><input type="text" ng-model="value" placeholder="Search..." class="form-control"></input><span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span></div>')
    ])
    .listActions(['edit', 'show']);

and listTemplate.html template, i copied from source code of ng-admin:

<div class="row list-view" ng-class="::'ng-admin-entity-' + listController.entity.name()">
    <div class="col-lg-12">
        <ma-datagrid name="{{ ::listController.view.name() }}"
                  entries="listController.dataStore.getEntries(listController.entity.uniqueId)"
                  selection="selection"
                  fields="::listController.fields"
                  list-actions="::listController.listActions"
                  entity="::listController.entity"
                  datastore="listController.dataStore">
        </ma-datagrid>
    </div>
</div>

<div class="row" ng-if="::!listController.infinitePagination">
    <div class="col-lg-12">
        <ma-datagrid-pagination
            page="{{ listController.page }}"
            per-page="{{ ::listController.view.perPage() }}"
            total-items="{{ listController.totalItems }}"
            set-page="::listController.setPageCallback">
        </ma-datagrid-pagination>
    </div>
</div>

<ma-datagrid-infinite-pagination ng-if="::listController.infinitePagination"
            per-page="{{ ::listController.view.perPage() }}"
            total-items="{{ ::listController.totalItems }}"
            next-page="::listController.nextPageCallback">
</ma-datagrid-infinite-pagination>

But it just show empty list when i open on browser, because custom listView template can not get listController instance. Can any one help me ?

Answer 1

You should copy the listLayout.html template instead:

<div class="row list-header">
    <div class="col-lg-12">
        <div class="page-header">

            <ma-view-actions override="::llCtrl.actions" selection="selection" batch-buttons="::llCtrl.batchActions" entity="::llCtrl.entity" datastore="::llCtrl.dataStore" search="::llCtrl.search" filters="::llCtrl.filters" enabled-filters="llCtrl.enabledFilters" enable-filter="llCtrl.enableFilter">
                <ma-filter-button filters="filters()" enabled-filters="enabledFilters" enable-filter="enableFilter()"></ma-filter-button>
                <ma-view-batch-actions buttons="::batchButtons()" selection="selection" entity="::entity"></ma-view-batch-actions>
                <ma-export-to-csv-button entity="::entity" search="::search" datastore="::datastore"></ma-export-to-csv-button>
                <ma-create-button ng-if="::entity.creationView().enabled" entity="::entity"></ma-create-button>
            </ma-view-actions>

            <h1 compile="::llCtrl.view.title()">
                {{ ::llCtrl.view.entity.name() | humanize | pluralize }} list
            </h1>
            <p class="lead" ng-if="::llCtrl.view.description()" compile="::llCtrl.view.description()">{{ ::llCtrl.view.description() }}</p>
        </div>

        <ma-filter-form ng-if="llCtrl.hasFilters" filters="llCtrl.enabledFilters" values="llCtrl.search" datastore="::llCtrl.dataStore" remove-filter="::llCtrl.removeFilter"></ma-filter-form>

    </div>
</div>

<div ui-view="grid"></div>