A tela de detalhar, basicamente possui um cabeçalho, onde são exibidos o identificador do regitro da tabela, possui operações para voltar para a listagem e editar. No conteudo da pagina são exibidos os detalhes do registro.
<totvs-page type="detail">
<totvs-page-navbar>
<totvs-page-breadcrumb>
<breadcrumb link="#/">Home</breadcrumb>
<breadcrumb link="#/">Sample</breadcrumb>
<breadcrumb link="#/html-sample/message">{{'l-message' | i18n}}</breadcrumb>
<breadcrumb>Editar {{controller.model['cod-mensagem']}}</breadcrumb>
</totvs-page-breadcrumb>
<totvs-page-header>
<totvs-page-header-title title="{{controller.model['descricao']}}"></totvs-page-header-title>
<totvs-page-header-operation>
<totvs-page-header-operation-action on-back-link="#/html-sample/message"
on-edit-link="#/html-sample/message/edit/{{ controller.model['cod-mensagem'] }}"
on-remove="controller.onRemove">
</totvs-page-header-operation-action>
</totvs-page-header-operation>
</totvs-page-header>
</totvs-page-navbar>
<totvs-page-content>
<totvs-page-detail>
<totvs-page-detail-info class="col-lg-2 col-md-2 col-sm-2 col-xs-12"
title="{{ 'l-id' | i18n }}"
value="{{controller.model['cod-mensagem']}}">
</totvs-page-detail-info>
<totvs-page-detail-info class="col-lg-8 col-md-8 col-sm-8 col-xs-12"
title="{{ 'l-description' | i18n }}"
value="{{controller.model['descricao']}}">
</totvs-page-detail-info>
<totvs-page-detail-info class="col-lg-12 col-md-12 col-sm-12 col-xs-12"
title="{{ 'l-text' | i18n }}"
value="{{controller.model['texto-mensag']}}">
</totvs-page-detail-info>
</totvs-page-detail>
</totvs-page-content>
</totvs-page>
Linha 1 - Como na listagem temos a tag <ttovs-page> porem o type="detail"
Linha 10 - No header na tag <totvs-page-header-title> o atributo title recebe o identificador do registro.
Linhas 12-14 Na tag <totvs-page-header-operation-action> são definidos os atributos:
- on-back-link - a URL do state de lista para o botão voltar
- on-edit-link - a URL do state de edição do regitro
- on-remove - o metodo do controller que será chamado no botão excluir
Linhas 20-33 Dentro da tag <totvs-page-detail> são colocadas varias tags <totvs-page-detail-info> para cada campo que será exibido nos detalhes do registro, cada <totvs-page-detail-info> possui o atributo title que é a label do campo e o atributo value que recebe o respectico valor deste campo do registro.
O resultado desta tela é o seguinte:
