CONTEÚDO
- Visão Geral clique no conteúdo para acesso rápido à informação desejada ↓
- Exemplo do JSON de metadata completo
- Tela - Listagem de Embarques
- Tela - Novo/Editar Embarques
- Tela - Resumo/Detalhe do Embarque
01. Visão Geral
Este documento tem como objetivo descrever o que poderá ser customizado na tela HTML do programa Processo de Embarques item de menu Embarque (html-mft.xxxxxxxxx).
02. Exemplo do JSON de metadata completo
As imagens a seguir mostram, como exemplo, os metadatas que compõem o programa de Embarques.
a. Listagem dos embarques:
Chamada para a API: dts/datasul-rest/resources/prg/eqp/v1/shipping/metadata/?type=list
b. Novo/Editar Embarque:
Chamada para a API: dts/datasul-rest/resources/prg/eqp/v1/shipping/metadata/?type=new ou dts/datasul-rest/resources/prg/eqp/v1/shipping/metadata/2022031588889757?type=edit
c. Detalhes do embarque:
Chamada para a API: dts/datasul-rest/resources/prg/eqp/v1/shipping/metadata/2022031588889757?type=detail
Armazenamento
Os metadados são armazenados no cache do navegador, sendo apenas atualizados quando existir alguma alteração em sua versão (version). Isso significa que, após a primeira carga da aplicação, os metadados podem ser recuperados do cache, resultando em tempos de carregamento mais rápidos.
Limpeza do Cache do Navegador: Em algumas situações, pode ser necessário limpar o cache do navegador para garantir que as últimas atualizações dos metadados sejam aplicadas. Os métodos para limpar o cache variam entre os diferentes navegadores, mas geralmente envolvem acessar as configurações do navegador e encontrar a seção de "Limpar dados de navegação" ou "Limpar cache". Ao limpar o cache, o navegador será forçado a buscar novamente todos os recursos da aplicação, incluindo os metadados atualizados. Isso é particularmente útil durante o desenvolvimento, quando você está realizando alterações frequentes na aplicação e deseja garantir que as últimas atualizações sejam refletidas.
03. Tela - Listagem de Embarques
A tela de listar não foi desenvolvida utilizando o componente dinâmico completo, como o po-page-dynamic-table por exemplo, e sim usando po-page-list com uma po-table, por conta disso alguns elementos da tela não podem ser customizados e algumas propriedades do metadata são utilizados de forma um pouco diferente, a seguir a descrição de cada customização possível.
Propriedade | Description |
---|---|
title | Título da página. |
pageCustomActions | Utilizado para remover os botões padrões ou para inserir novos botões, o botão inserido aqui deve conter label. |
tableCustomActions | Utilizado para remover os botões padrões ou para inserir novos. Para que uma ação padrão não seja criada basta que o metadata não contenha o seu label, caso necessário criar uma ação diferente ela deve possuir tanto label quanto url. Para mais informações sobre o que pode ser enviado consultar a documentação do po-table, a interface PoTableAction é implementada. |
breadcrumb | Gera uma estrutura de navegação que apresenta a localização da URL atual, exibindo as antecessoras conforme é realizado a navegação na aplicação, pode ser alterado tanto o link quanto o label desse componente, assim como remove-lo ou adicionar mais, na tela de listagem possui apenas um item, que é a "lista de embarques" que é o item atual e por conta disso não é possível clicar nele, mais itens são adicionados ao entrar na tela de criar novo embarque ou de resumo. |
fields | Utilizado para dizer quais campos devem aparecer na tabela, pode ser incluídos novos campos, ou retirado os que padrões. Para mais informações sobre o que pode ser enviado consultar a documentação do po-table, a interface PoTableColumn é implementada. |
advancedFilters | Utilizado para montar o busca avançada, pode ser removido filtros ou incluídos novos (mas pare que esses valores sejam considerados a API dos dados precisa ser customizada também). Para mais informações sobre o que pode ser enviado consultar a documentação do po-dynamic-form, a interface PoDynamicFormField é implementada. |
columnsResume | Utilizado para dizer quais campos devem aparecer na tabela de resumos, pode ser incluídos novos campos, ou retirado os que padrões. Para mais informações sobre o que pode ser enviado consultar a documentação do po-table, a interface PoTableColumn é implementada. |
columnsItens | Utilizado para dizer quais campos devem aparecer na tabela de itens, pode ser incluídos novos campos, ou retirado os que padrões. Para mais informações sobre o que pode ser enviado consultar a documentação do po-table, a interface PoTableColumn é implementada. |
04. Tela - Novo/Editar Embarques
A tela de novo/editar não foi desenvolvida utilizando o componente dinâmico completo, como o po-page-dynamic-table por exemplo, e sim utilizando o po-page-default, po-lookup, po-dynamic-form, po-tabs e po-table, por conta disso alguns elementos da tela não podem ser customizados e algumas propriedades do metadata são utilizados de forma um pouco diferente, a seguir a descrição de cada customização possível.
a) Step Cabeçalho
Campo | Descrição |
---|---|
title | Titulo da página, por padrão sera "Novo Embarque" quando estiver criando embarque e "Editando Embarque" com o numero do embarque quando estiver editando. |
breadcrumb | Gera uma estrutura de navegação que apresenta a localização da URL atual, exibindo as antecessoras conforme é realizado a navegação na aplicação, é possível remover ou adicionar mais itens na lista. Na tela de novo ou edição por padrão vai aparecer dois itens, a pagina atual que não pode ser clicado e a tela de "Lista de Embarques" que ao clicar leva para a rota enviada no link, conforme exemplo abaixo. |
header | Campos principais do cabeçalho do embarque, na aba de informações principais, pode ser incluído novos campos ou removido os padrões. Para mais informações sobre o que pode ser enviado consultar a documentação do po-dynamic-form, a interface PoDynamicFormField é implementada. |
headerOptional | Campos opcionais do cabeçalho do embarque, na aba de informações complementares, pode ser incluído novos campos ou removido os padrões. Para mais informações sobre o que pode ser enviado consultar a documentação do po-dynamic-form, a interface PoDynamicFormField é implementada. |
validateFields | Indica quais campos do cabeçalho tem validação ao sair do campo, ao sair é feito uma chamada POST para a API de dados (dts/datasul-rest/resources/prg/eqp/v1/shipping/validate) passando os valores preenchidos no form e o retorno é uma interface no formato PoDynamicFormValidation, onde podemos alterar, por exemplo, se algum outro campo pode ou não ser preenchido. Para mais informações sobre o que pode ser feito utilizando o validate olhar a documentação do po-dynamic-form. |
b) Step Pedidos
Campo | Descrição |
---|---|
orders | Coluna da tabela principal do step de "Pedidos", pode ser incluído mais colunas ou excluído as padrões. Para mais informações sobre o que pode ser enviado consultar a documentação do po-table, a interface PoTableColumn é implementada. OBS: Nessa tabela as ações são feitas utilizando cellTemplate e montadas as ações de alocar total e parcial dependendo se na linha pode ou não alocar parcialmente e/ou totalmente, ou seja, caso queira alterar para que essa ação não apareça deve ir na API de dados e não retornar ableToAllocate ou ableToAllocatePartially no objeto da linha em questão. |
ordersSearch | Campos do busca avançada e do botão de alocar pedido, aba de cliente/pedido, pode incluir campos novos ou remover os padrões. Para mais informações sobre o que pode ser enviado consultar a documentação do po-dynamic-form, a interface PoDynamicFormField é implementada. |
ordersFilter | Campos do busca avançada, aba de filtros, pode incluir campos novos ou remover os padrões. Para mais informações sobre o que pode ser enviado consultar a documentação do po-dynamic-form, a interface PoDynamicFormField é implementada. |
modalPartialAllocateView | Campos que serão exibidos no cabeçalho da modal de alocação parcial para item normal, pode ser incluídos novos campos ou removido os padrões. Para mais informações sobre o que pode ser enviado consultar a documentação do po-dynamic-view, a interface PoDynamicViewField é implementada. |
modalPartialAllocateTable | Colunas da tabela de alocação parcial para item normal, pode ser incluído mais colunas ou excluído as padrões. Para mais informações sobre o que pode ser enviado consultar a documentação do po-table, a interface PoTableColumn é implementada. |
modalCompoundView | Campos que serão exibidos no cabeçalho da modal de alocação parcial para item composto, pode ser incluídos novos campos ou removido os padrões. Para mais informações sobre o que pode ser enviado consultar a documentação do po-dynamic-view, a interface PoDynamicViewField é implementada. |
modalCompoundTable | Colunas da tabela de alocação parcial para item composto, pode ser incluído mais colunas ou excluído as padrões. Para mais informações sobre o que pode ser enviado consultar a documentação do po-table, a interface PoTableColumn é implementada. |
modalCompoundTablePhysical | Colunas da tabela de alocação parcial para item composto onde a alocação é física, pode ser incluído mais colunas ou excluído as padrões. Para mais informações sobre o que pode ser enviado consultar a documentação do po-table, a interface PoTableColumn é implementada. |
modalCompoundTableDeposits | Colunas da tabela de depósitos do filho para alocação parcial do item composto, pode ser incluído mais colunas ou excluído as padrões. Para mais informações sobre o que pode ser enviado consultar a documentação do po-table, a interface PoTableColumn é implementada. |
modalTotalAllocationProcessTable | Colunas da tabela de resultado a alocação total, pode ser incluído mais colunas ou excluído as padrões. Para mais informações sobre o que pode ser enviado consultar a documentação do po-table, a interface PoTableColumn é implementada. |
c) Step Alocações
Campo | Descrição |
---|---|
allocation | Coluna da tabela principal do step de "Alocações", pode ser incluído mais colunas ou excluído as padrões. Para mais informações sobre o que pode ser enviado consultar a documentação do po-table, a interface PoTableColumn é implementada. OBS: Nessa tabela as ações são feitas utilizando cellTemplate e exibidas as ações de desalocar total, desalocar parcial e adicionar narrativa somente caso no dado da linha em questão essa ação esteja disponível, ou seja, caso queira que uma dessas ações não apareça em tela é necessário que na API de dados não retorne changeAllocatedQuantity ou deallocateItemOrDelivery ou addNarrative no objeto da linha em questão. |
columnsItensDeposit | Coluna da tabela de deposito dos itens alocados ao embarque, pode ser incluído mais colunas ou excluído as padrões. Para mais informações sobre o que pode ser enviado consultar a documentação do po-table, a interface PoTableColumn é implementada. |
modalPartialDeallocateView | Campos que serão exibidos no cabeçalho da modal de desalocação parcial para item normal, pode ser incluídos novos campos ou removido os padrões. Para mais informações sobre o que pode ser enviado consultar a documentação do po-dynamic-view, a interface PoDynamicViewField é implementada. |
modalPartialDeallocateTable | Colunas da tabela de desalocação parcial para item normal, pode ser incluído mais colunas ou excluído as padrões. Para mais informações sobre o que pode ser enviado consultar a documentação do po-table, a interface PoTableColumn é implementada. |
modalDeallocateCompoundView | Campos que serão exibidos no cabeçalho da modal de desalocação parcial para item composto, pode ser incluídos novos campos ou removido os padrões. Para mais informações sobre o que pode ser enviado consultar a documentação do po-dynamic-view, a interface PoDynamicViewField é implementada. |
modalDeallocateCompoundTable | Colunas da tabela de desalocação parcial para item composto, pode ser incluído mais colunas ou excluído as padrões. Para mais informações sobre o que pode ser enviado consultar a documentação do po-table, a interface PoTableColumn é implementada. |
modalDeallocateCompoundTableDeposits | Colunas da tabela depósitos dos itens para desalocação parcial para item composto, pode ser incluído mais colunas ou excluído as padrões. Para mais informações sobre o que pode ser enviado consultar a documentação do po-table, a interface PoTableColumn é implementada. |
modalPartialDeallocateView | Colunas da tabela de resultado da desalocação total, pode ser incluído mais colunas ou excluído as padrões. Para mais informações sobre o que pode ser enviado consultar a documentação do po-table, a interface PoTableColumn é implementada. |
c) Embarque Finalizado
Campo | Descrição |
---|---|
finalizedShipping | Campos que serão exibidos ao finalizar o embarque, pode ser incluído novos campos ou removido os padrões. Para mais informações sobre o que pode ser enviado consultar a documentação do po-dynamic-view, a interface PoDynamicViewField é implementada. |
05. Tela - Resumo/Detalhe do Embarque
Campo | Descrição |
---|---|
title | Título da página, aqui é apresentando o titulo recebido do metadata mais o numero do embarque que esta sendo apresentado. |
breadcrumb | Gera uma estrutura de navegação que apresenta a localização da URL atual, exibindo as antecessoras conforme é realizado a navegação na aplicação, é possível remover ou adicionar mais itens na lista. Na tela de resumo/detalhe por padrão vai aparecer dois itens, a pagina atual "Resumo Embarque" que não pode ser clicado e a tela de "Lista de Embarques" que ao clicar leva para a rota enviada no link, conforme exemplo abaixo. |
header | Campos que serão exibidos na segunda aba do resumo/detalhe do embarque, é feito uma concatenação com o "headerOptional" para exibir em um po-dynamic-view, pode ser incluído novos campos ou removido os padrões. Para mais informações sobre o que pode ser enviado consultar a documentação do po-dynamic-view, a interface PoDynamicViewField é implementada. |
headerOptional | Campos que serão exibidos na segunda aba do resumo/detalhe do embarque, é feito uma concatenação com o "header" para exibir em um po-dynamic-view, pode ser incluído novos campos ou removido os padrões. Para mais informações sobre o que pode ser enviado consultar a documentação do po-dynamic-view, a interface PoDynamicViewField é implementada. |
columnsResume | Coluna da tabela principal da aba de "Resumo", pode ser incluído mais colunas ou excluído as padrões. Para mais informações sobre o que pode ser enviado consultar a documentação do po-table, a interface PoTableColumn é implementada. |
columnsItens | Expansão da tabela principal, onde mostra os itens vinculados ao resumo, pode ser incluído mais colunas ou excluído as padrões. Para mais informações sobre o que pode ser enviado consultar a documentação do po-table, a interface PoTableColumn é implementada. Obs: nessa tabela o gerenciador de colunas é escondido, então mesmo que enviado a propriedade "allowColumnsManager" como true ela é desconsiderada. |
viewItens | Campos apresentados na expansão da tabela de itens, pode ser incluído novos campos ou removido os padrões. Para mais informações sobre o que pode ser enviado consultar a documentação do po-dynamic-view, a interface PoDynamicViewField é implementada. |
columnsPackaging | Expansão da tabela principal, onde mostra as embalagens vinculados ao resumo, pode ser incluído mais colunas ou excluído as padrões. Para mais informações sobre o que pode ser enviado consultar a documentação do po-table, a interface PoTableColumn é implementada. Obs: nessa tabela o gerenciador de colunas é escondido, então mesmo que enviado a propriedade "allowColumnsManager" como true ela é desconsiderada. |
modalColumnsDeposit | Tabela da modal de listagem de depósitos do item, onde mostra o item e quais depósitos estão vinculados a ele, pode ser incluído mais colunas ou excluído as padrões. Para mais informações sobre o que pode ser enviado consultar a documentação do po-table, a interface PoTableColumn é implementada. |
modalDepositView | Campos que serão exibidos no cabeçalho da modal de informações do depósito do item, pode ser incluídos novos campos ou removido os padrões. Para mais informações sobre o que pode ser enviado consultar a documentação do po-dynamic-view, a interface PoDynamicViewField é implementada. |