criação o cabeçalhoCONTEÚDO
- Visão Geral clique no conteúdo para acesso rápido à informação desejada ↓
- API x Pontos UPC Relacionados
- JSON de metadata
- Especificidades de Customização
- Observações Gerais
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-meq.shippingProcess), aqui será descrito quais componentes e elementos podem ser customizados.
Importante
Esse documento somente cita itens de customização que diferem da customização padrão de uma tela HTML utilizando PO-UI, ou seja, somente as especificidades de customização do programa HTML em questão. As customizações nativas dos componentes dinâmicos do PO-UI podem ser verificadas aqui e não serão abordadas nesse documento.
02. API x Pontos UPC Relacionados
Segue a lista de APIs e Pontos de UPC responsáveis pelo processamento da interface dinâmica e dos dados do programa.
Para maiores detalhes de como cadastrar uma UPC para essa API podem ser visualizados aqui.
API REST: eqp/api/v1/shipping.p, eqp/api/v1/shippingOrder.p, eqp/api/v1/shippingAllocation.p
URL base para embarques: https://<servidor>:<porta>/api/eqp/v1/shipping
- URL base para aba de pedidos: https://<servidor>:<porta>/api/eqp/v1/shippingOrder
- URL base para aba de alocações: https://<servidor>:<porta>/api/eqp/v1/shippingAllocation
Manipulação de Objetos da Interface (Metadata) | |||||
---|---|---|---|---|---|
Método (API) | Endpoint (API) | Endpoint (UPC) | Evento (UPC) | Entrada (UPC) | Observação |
GET | URL_Base/metadata/?type=list | getMetaData | list | Metadados | Estrutura metadados da listagem. |
GET | URL_Base/metadata/?type=new | getMetaData | new | Metadados | Estrutura metadados da tela de inclusão. |
GET | URL_Base/metadata/<código do embarque>?type=edit | getMetaData | edit | Metadados | Estrutura metadados da tela de edição. |
GET | URL_Base/metadata/<código do embarque>?type=copy | getMetaData | new | Metadados | Estrutura metadados da tela de cópia |
GET | URL_Base/metadata/<código do embarque>?type=detail | getMetaData | detail | Metadados | Estrutura metadados da tela de detalhes. |
Manipulação de Dados - Embarques | |||||
---|---|---|---|---|---|
Método (API) | Endpoint (API) | Endpoint (UPC) | Evento (UPC) | Entrada (UPC) | Observação |
GET | URL_Base/<código do embarque> | findById | findById | Dados do registro | Executado depois de buscar um registro específico. |
GET | URL_Base?pageSize=20&page=1 | findAll | findAll | Dados dos registros | Executado depois de buscar os registros. |
POST | URL_Base | create | beforeCreate | Payload* | Executado antes de criar o cabeçalho do embarque. |
POST | URL_Base | create | afterCreate | Payload* | Executado depois da criação do cabeçalho do embarque. |
PUT | URL_Base/<código do embarque> | update | beforeUpdate | Payload* | Executado antes da alteração do cabeçalho do embarque. |
PUT | URL_Base/<código do embarque> | update | afterUpdate | Payload* | Executado depois da alteração do cabeçalho do embarque. |
DELETE | URL_Base/<código do embarque> | delete | beforeDelete | Vazio | Executado antes da eliminação de um registro. |
DELETE | URL_Base/<código do embarque> | delete | afterDelete | Vazio | Executado depois da eliminação de um registro. |
POST | URL_Base/terminate/<código do embarque> | terminate | beforeTerminate | Payload* | Executado antes de finalizar o embarque. |
POST | URL_Base/terminate/<código do embarque> | terminate | afterTerminate | Payload* | Executado depois de finalizar o embarque. |
POST | URL_Base/validate | validateForm | validateForm | Form* | Executa ao sair de algum campo que possui validação, por exemplo o externo (cabeçalho do embarque, aba de informações complementares). |
POST | URL_Base/wms/<código do embarque> | embarqueWMS | beforeEmbarqueWMS | Dados do registro | Executado antes de integrar o embarque para o WMS. |
POST | URL_Base/wms/<código do embarque> | embarqueWMS | afterEmbarqueWMS | Dados do registro | Executado depois de integrar o embarque para o WMS. |
Manipulação de Dados - Aba pedidos | |||||
Método (API) | Endpoint (API) | Endpoint (UPC) | Evento (UPC) | Entrada (UPC) | Observação |
GET | URL_Pedidos/orders/<código do embarque> | findById | findById | Dados do registro | Executado depois de buscar um registro específico. |
GET | URL_Pedidos/orderDeposits/<chave completa da linha> | ordersDeposit | ordersDeposit | Dados do registro | Executado depois de buscar um registro específico. |
POST | URL_Pedidos/totalAllocation/<código do embarque> | totalAllocation | beforeTotalAllocation | Dados do registro | Executado antes de alocar totalmente o resumo |
POST | URL_Pedidos/totalAllocation/<código do embarque> | totalAllocation | afterTotalAllocation | Dados do registro | Executado depois de alocar totalmente o resumo |
POST | URL_Pedidos/allocatePartial/<código do embarque> | partialAllocation | beforePartialAllocation | Dados do registro | Executado antes de alocar parcialmente o resumo |
POST | URL_Pedidos/allocatePartial/<código do embarque> | partialAllocation | afterPartialAllocation | Dados do registro | Executado depois de alocar parcialmente o resumo |
POST | URL_Pedidos/allocateCompound/<código do embarque> | allocateCompound | beforeAllocateCompound | Dados do registro | Executado depois de alocar o resumo composto |
POST | URL_Pedidos/allocateCompound/<código do embarque> | allocateCompound | afterAllocateCompound | Dados do registro | Executado depois de alocar o resumo composto |
POST | URL_Pedidos/allocateOrder/<código do embarque> | allocateOrder | beforeAllocateOrder | Dados do registro | Executado antes de alocar o pedido completo |
POST | URL_Pedidos/allocateOrder/<código do embarque> | allocateOrder | afterAllocateOrder | Dados do registro | Executado antes de alocar o pedido completo |
Manipulação de Dados - Aba alocações | |||||
Método (API) | Endpoint (API) | Endpoint (UPC) | Evento (UPC) | Entrada (UPC) | Observação |
GET | URL_Alocações | findById | findById | Dados do registro | Executado depois de buscar um registro específico. |
GET | URL_Alocações/allocationsCompound/<chave linha> | allocationsCompound | allocationsCompound | Dados do registro | Executado depois de buscar um registro específico. |
POST | URL_Alocações/deallocateCompound | deallocateCompound | beforeDeallocateCompound | Dados do registro | Executado antes de desalocar totalmente o composto |
POST | URL_Alocações/deallocateCompound | deallocateCompound | afterDeallocateCompound | Dados do registro | Executado depois de desalocar totalmente o composto |
POST | URL_Alocações/deallocateOrder | deallocateOrder | beforeDeallocateOrder | Dados do registro | Executado antes de desalocar totalmente o pedido |
POST | URL_Alocações/deallocateOrder | deallocateOrder | afterDeallocateOrder | Dados do registro | Executado depois de desalocar totalmente o pedido |
POST | URL_Alocações/totalDeallocate | totalDeallocation | beforeTotalDeallocation | Dados do registro | Executado antes de desalocar totalmente o resumo |
POST | URL_Alocações/totalDeallocate | totalDeallocation | afterTotalDeallocation | Dados do registro | Executado depois de desalocar totalmente o resumo |
POST | URL_Alocações/partialDeallocate | partialDeallocation | beforePartialDeallocation | Dados do registro | Executado antes de desalocar parcialmente o resumo |
POST | URL_Alocações/partialDeallocate | partialDeallocation | afterPartialDeallocation | Dados do registro | Executado depois de desalocar parcialmente o resumo |
POST | URL_Alocações/saveNarrative | saveNarrative | beforeSaveNarrative | Dados do registro | Executado antes de salvar o resumo da linha |
POST | URL_Alocações/saveNarrative | saveNarrative | afterSaveNarrative | Dados do registro | Executado depois de salvar o resumo da linha |
03. JSON de metadata
É possível retornar o metadata das telas para fazer a análise da estrutura do JSON, executando as requests abaixo (depois de logado no produto Datasul):
Tipo | Método (API) | Endpoint (API) | Observações |
---|---|---|---|
Listagem | GET | URL_Base/metadata/?type=list | |
Inclusão | GET | URL_Base/metadata/?type=new | |
Edição | GET | URL_Base/metadata/<código do embarque>?type=edit | Utiliza o código do estabelecimento como path param. |
Cópia | GET | URL_Base/metadata/<código do embarque>?type=copy | Utiliza o código do estabelecimento como path param. |
Detalhes | GET | URL_Base/metadata/<código do embarque>?type=detail | Utiliza o código do estabelecimento como path param. |
04. Especificidades de Customização
a) 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 deste componente, assim como removê-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 para 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. |
b) 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.
i) Step Cabeçalho
Campo | Descrição |
---|---|
title | Título da página, por padrão será "Novo Embarque" quando estiver criando embarque e "Editando Embarque" com o número do embarque quando estiver editando. |
breadcrumb | Gera uma estrutura de navegação que apresenta a localização da URL atual, exibindo as antecessoras conforme é realizada 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 página atual que não pode ser clicada 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. |
ii) Step Pedidos
Campo | Descrição |
---|---|
orders | Coluna da tabela principal do step de "Pedidos", pode ser incluído mais colunas ou excluído as colunas 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 de 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, podem 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, podem 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, podem 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, podem 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 colunas 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. |
III) 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 depósito dos itens alocados ao embarque, podem 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, podem 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 colunas 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, podem 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, podem ser incluído mais colunas ou excluído as colunas 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, podem ser incluído mais colunas ou excluído as colunas 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, podem ser incluído mais colunas ou excluído as colunas padrões. Para mais informações sobre o que pode ser enviado consultar a documentação do po-table, a interface PoTableColumn é implementada. |
iv) 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. |
C) Tela - Resumo/Detalhe do Embarque
Campo | Descrição |
---|---|
title | Título da página, aqui é apresentado o título recebido do metadata mais o número do embarque que está sendo apresentado. |
breadcrumb | Gera uma estrutura de navegação que apresenta a localização da URL atual, exibindo as antecessoras conforme é realizada 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 página 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 colunas 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 colunas padrões. Para mais informações sobre o que pode ser enviado consultar a documentação do po-table, a interface PoTableColumn é implementada. Obs: nesta 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 vínculados ao resumo, pode ser incluído mais colunas ou excluído as colunas padrões. Para mais informações sobre o que pode ser enviado consultar a documentação do po-table, a interface PoTableColumn é implementada. Obs: nesta 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 do item, podem 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. |
05. Observações Gerais
- Todos os objetos que não foram citados, a princípio, não podem ser customizados.
- Caso deseje customizar algum componente além dos descritos nesse documento e no documento padrão de customização do PO-UI, favor abrir um ticket solicitando e justificando a necessidade de customização.
- Clique aqui para baixar um fonte exemplo de UPC para esse programa.