Histórico da Página
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.
Bloco de código | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
<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: