Introdução e Recapitulação
Na postagem anterior do blog , aprendemos como mover nosso aplicativo atual para um aplicativo Mestre-Detalhe, exibindo o Parceiro de Negócios como uma lista (mestre) e suas informações detalhadas com Pedidos de Venda na página de detalhes (detalhes).
O que será coberto neste exercício
Com a Parte 4 desta série de postagens de blog, aprenderemos como criar uma segunda página de pesquisa com informações sobre os detalhes do Pedido de Venda e exibir uma tabela de itens do Pedido de Venda.
A parte mais importante deste exercício é entender como excluir (parte das operações CRUD) um item de pedido de venda de um pedido de venda.
- ODataModel : já o usamos para exibir informações do servidor sobre nosso parceiro de negócios, Venda de pedidos. Agora vamos usá-lo para exibir o item do pedido de venda e excluí-lo do conjunto. Para esse fim, vamos usar o método remove
Esta é a nossa principal tarefa neste exercício, mas não é a única coisa que fizemos no código. Aqui está uma lista das coisas que você precisa fazer para chegar ao resultado final:
- Adicione uma nova rota e destino no manifest.json para navegar até a página BusinessPartnerSeleOrderItem
- Ouça o evento de clique em Pedido de venda e navegue até os detalhes SaleOrder (onde exibiremos detalhes do pedido de venda e itens do pedido de venda)
- Adicione uma FilterBar para filtrar a tabela do item do pedido de venda
- Adicione um ViewSettingsDialog para classificar / agrupar itens do pedido de venda
- Expanda a propriedade de navegação ToProduct de uma entidade SaleOrderItem para exibir informações do produto nas linhas da tabela
NB: Encontrei muitos problemas no SaleOrderItemsSet quando precisei filtrar, classificar e agrupar itens. Você sempre precisa saber quais campos estão ativados (lado do servidor implementado) a serem filtrados, classificados ou agrupados.
A comunicação entre equipes é um elemento-chave no desenvolvimento de software
Nesse caso, DeliveryDate não pode ser classificado, a categoria e o nome do produto não podem ser classificados e filtrados e assim por diante. Portanto, lembre-se sempre de se comunicar adequadamente com sua equipe de back-end para obter a implementação do lado do servidor necessária ao seu aplicativo front-end.
Vamos codificar: Excluir operação
Então, o que você precisa fazer para excluir um registro?
UI / UX
Somos desenvolvedores de front-end (ou full-stack) e a UI / UX é uma parte importante do nosso trabalho. Precisamos criar uma interface e uma experiência do usuário que permitam que nossos usuários realizem o trabalho em menos tempo possível, com menos etapas possíveis e não odeiem o aplicativo que estão usando no final do dia. O resultado do nosso trabalho é um usuário feliz que faz seu trabalho com menos tempo e erro e uma empresa que ganha mais dinheiro.
Para alcançar essa UI / UX, você pode aproveitar algumas propriedades do ListBase, que são estendidas por nossa Tabela. Para adicionar o botão excluir (o X grande), basta definir a propriedade do modo Tabela como Excluir e, em seguida, manipular o evento de exclusão acionado quando o usuário clicar no botão.
Implementação de JavaScript
onDeleteItem: function(oEvent) { var controller = this; var oModel = this.getView().getModel(); var sPath = oEvent.getParameter("listItem").getBindingContextPath(); var oResourceBundle = this.getView().getModel("i18n").getResourceBundle(); var bCompact = !!this.getView().$().closest(".sapUiSizeCompact").length; controller.byId("tableSalesOrderItem").setBusy(true); oModel.remove(sPath, { success: function(oData, response) { MessageBox.success( oResourceBundle.getText("deleteSaleItemSuccess"), { styleClass: bCompact ? "sapUiSizeCompact" : "" }); controller.byId("tableSalesOrderItem").setBusy(false); }, error: function(oError) { MessageBox.error( oResourceBundle.getText("deleteSaleItemError"), { styleClass: bCompact ? "sapUiSizeCompact" : "" }); controller.byId("tableSalesOrderItem").setBusy(false); } }); }
Então, o que fizemos aqui?
- Obtemos o caminho (que identifica o URL REST do nosso item) no Contexto de Ligação da listItem clicado
- Obtemos a referência ODataModel da estrutura (estamos usando o modelo padrão, portanto, não precisamos especificar um nome de modelo para o método getModel)
- Colocamos nossa mesa em ocupado. Isso exibirá um indicador de ocupado, sugerindo ao usuário que estamos fazendo alguma comunicação com o servidor.
- Chamamos o método .remove que possui 2 parâmetros. O primeiro é o caminho do item que gostaríamos de excluir e o segundo é um Objeto de diferentes parâmetros. Você pode verificar todos eles na documentação oficial . Apenas precisamos do retorno de chamada para o evento de sucesso e erro para fornecer um feedback correto ao usuário e remover o estado ocupado.
Então, o que acontece após o método .remove na UI / UX?
Bem, é bem simples. O registro é excluído, o ODataModel é atualizado automaticamente pela estrutura e, graças ao mecanismo de ligação do SAPUI5, a Tabela também é atualizada automaticamente.
O que isso significa? Que a estrutura tenha o cuidado de também atualizar a Tabela com os novos dados (um item foi removido) e não precisamos nos preocupar com isso;)
Conclusão e o que vem a seguir na Parte 5?
Se você quiser conferir o resultado final, pode ir diretamente para o ramo step_4 do nosso projeto GitHub .
Na próxima parte, trataremos da operação de atualização de um item de pedido de venda, concluindo nossas operações de CRUD.
Infelizmente, não consigo implementar a operação Create porque parece haver algum tipo de problema de validação no servidor com os dados que estou tentando enviar e o erro é muito enigmático: D
Feedback necessário
O que você acha dessa série? Deseja mais foco em algum aspecto específico do SAPUI5?
Escreva na seção de comentários! Feliz codificação para todos!