A tela de listagem, basicamente possui um cabeçalho, onde são exibidos o nome da entidade, a quantidade de registros, possui operações para inclusão de registros, pesquisa simples, pesquisa avançada e mostra os filtros aplicados e outras informações necessárias.
Linha 1 - O elemento <totvs-page> com o o atributo type="list" que define como alguns componentes da pagina seão apresentados.
Ainda nesta tag o atributo totvs-custom-element="customPage" define que a pagina é customizavel no evento EPC customPage
Linhas 9-10 - O elemento <totvs-page-header-title> define o titulo da pagina, o atributo no total fazemos o binding com o atributo totalRecords do controller, isso mostra o total de registros retornados na pesquisa.
Linha 14 - A tag <action> define uma operação para a tela, nesse caso é um link para a URL do state de inclusão de registro na tabela.
Linhas 16-20 - a tag <totvs-page-header-operation-filter> é um componente de pequisa com os seguintes parametros:
- placehoder - descrição que será colocada no campo do termo de pesquisa quando vazio.
- ng-submin - metodo do controller que será chamado quando o usuario teclar ENTER ou clicar no botão pesquisar.
- ng-model - atributo do controller que será atualizado com o conteudo do campo
- advanced-search - função do controller que será chamado quando o usuario clicar no botão de pesquisa avançada.
Linhas 23-24 - a tag <totvs-page-disclaimer> é o componente para mostrar na tela os filtros que foram aplicados, os filtros estão no atributo controller.disclaimers, o atributo ng-click define o metodo do controller que deverá ser chamado para remover o disclaimer quando for clicado pelo usuario.
Linha 28 - dentro da tag <totvs-list-item> é definido como cada linha da lista deverá ser mostrada, o ng-repeat="message in controller.listResult" irá repetir a tag para cada item do array listResult, cada tag com um novo $scope contendo o atributo message.
Linha 29 - o atributo totvs-custom-element="customListItem" define que cada item da lista poderá ser customizado pela EPC no evento customListItem.
Linha 31-32 - a tag <totvs-list-item-title> define um titulo para um item da lista, a atributo title define o que sera mostrado e o atributo link indica o endereço do link gerado, nesse caso a URL do state de detalhar.
Linha 34-37 - a tag <totvs-list-item-action> define as ações para cada item da lista, o atributo limit-primary-action="1" define que será uma ação focal e as outras serão no dropdown "Ações" se houver mais de 2 actions.
Linha 35 - define uma ação para operação de editar, com um link para a URL do state de editar.
Linha 36 - define uma ação para operação de remover, o ng-click define o metodo do controller que será chamado no evento de click deste botão.
Linha 39 - a tag <totvs-list-item-content-detail> define o conteudo que será apresentando quando o usuario expadir os detalhes do item da lista.
Linha 45-46 - a tag <totvs-list-pagination> é o componente de paginação, o ng-if define se o componente estará presente na tela ou não, baseado no length de listResult comparando com o totalRecords, o ng-click define o metodo do controller que será chamado para buscar mais dados da tabela.
O resultado desta tela é o seguinte: