Introducción y resumen
En la publicación de blog anterior , aprendimos cómo mover nuestra aplicación actual a una aplicación Master-Detail que muestra Business Partner como una lista (master) y su información detallada con las órdenes de venta dentro de la página de detalles (detail).
¿Qué se cubrirá en este ejercicio?
Con la Parte 4 de esta serie de publicaciones de blog, aprenderemos cómo crear una segunda página de desglose con información sobre los detalles del Pedido de venta y mostrar una tabla de artículos del Pedido de venta.
La parte más importante de este ejercicio es comprender cómo Eliminar (parte de las operaciones CRUD) un Artículo de Orden de Venta de una Orden de Venta.
- ODataModel : ya lo hemos usado para mostrar información del lado del servidor sobre nuestro socio comercial, venta de pedidos. Ahora lo usaremos para mostrar el Artículo de pedido de venta y eliminarlos del conjunto. Para este propósito, vamos a usar el método remove
Esta es nuestra tarea principal en este ejercicio, pero no es lo único que hemos hecho en el código. Aquí hay una lista de las cosas que tiene que hacer para llegar al resultado final:
- Agregue una nueva ruta y destino en el manifest.json para navegar a la página BusinessPartnerSeleOrderItem
- Escuche el evento de clic de pedido de venta y navegue hasta el detalle del pedido de venta (donde mostraremos los detalles del pedido de venta y los artículos del pedido de venta)
- Agregue una barra de filtro para filtrar la tabla del artículo de pedido de venta
- Agregar un ViewSettingsDialog para ordenar / agrupar artículos de pedido de venta
- Expanda la propiedad de navegación ToProduct de una entidad SaleOrderItem para mostrar la información del Producto en las filas de la tabla
NB: He encontrado muchos problemas en SaleOrderItemsSet cuando necesitaba filtrar, ordenar y agrupar elementos. Siempre necesita saber qué campos están habilitados (lado del servidor implementado) para filtrar, ordenar o agrupar.
La comunicación entre equipos es un elemento clave en el desarrollo de software
En este caso, DeliveryDate no se puede ordenar, la categoría y el nombre del producto no se pueden ordenar y filtrar, etc. Así que recuerde siempre comunicarse adecuadamente con su equipo de back-end para obtener la implementación del lado del servidor que necesita su aplicación front-end.
Codifiquemos: Eliminar operación
Entonces, ¿qué necesita hacer para eliminar un registro?
UI / UX
Somos un desarrollador front-end (o full-stack) y UI / UX es una parte importante de nuestro trabajo. Necesitamos crear una interfaz y una experiencia de usuario que permita a nuestros usuarios hacer el trabajo en el menor tiempo posible, con menos pasos posibles y no odien la aplicación que están usando al final del día. El resultado de nuestro trabajo es un usuario feliz que hace su trabajo con menos tiempo y error y una empresa que gana más dinero.
Para lograr esta UI / UX, puede aprovechar algunas propiedades de ListBase, que se extiende en nuestra tabla. Para agregar el botón Eliminar (la X grande) solo necesita establecer la propiedad del modo Tabla en Eliminar y luego controlar el evento de eliminación activado cuando el usuario hace clic en el botón.
Implementación 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); } }); }
Entonces, ¿qué hemos hecho aquí?
- Obtenemos la ruta (que identifica la URL REST de nuestro elemento) del contexto de enlace de la lista.
- Obtenemos la referencia ODataModel del marco (estamos usando el modelo predeterminado, por lo que no necesitamos especificar un nombre de modelo para el método getModel)
- Ponemos nuestra mesa en ocupado. Esto mostrará un indicador de ocupado sugiriendo al usuario que estamos haciendo alguna comunicación con el servidor.
- Llamamos al método .remove que tiene 2 parámetros. El primero es la ruta del elemento que nos gustaría eliminar y el segundo es un Objeto de diferentes parámetros. Puede consultarlos todos en la documentación oficial . Solo necesitamos la devolución de llamada al evento de éxito y error para dar una respuesta correcta al usuario y eliminar el estado ocupado.
Entonces, ¿qué sucede después del método .remove en la UI / UX?
Bueno, es bastante simple. El registro se elimina, el marco de trabajo ODataModel se actualiza automáticamente y, gracias al mecanismo de enlace de SAPUI5, la tabla también se actualiza automáticamente.
Que significa Que el marco se encargue de actualizar también la tabla con los nuevos datos (se ha eliminado un elemento) y no tenemos que preocuparnos por ello;)
Conclusión y ¿qué sigue en la Parte 5?
Si desea ver el resultado final, puede ir directamente a la rama step_4 de nuestro Proyecto GitHub .
En la siguiente parte, manejaremos la operación de Actualización de un Artículo de Orden de Venta completando nuestras operaciones CRUD.
Desafortunadamente, no puedo implementar la operación Crear porque parece ser algún tipo de problema de validación del lado del servidor con los datos que estoy tratando de enviar y el error es muy críptico: D
Comentarios necesarios
¿Qué opinas de esta serie? ¿Desea centrarse más en algún aspecto específico de SAPUI5?
¡Escríbelo en la sección de comentarios! ¡Feliz codificación para todos!