🚺 🤪 ⏱️ 用于假人的SAPUI5第4部分：完整的分步练习 ⏫ 👨🏾‍🌾 🙏

介绍与回顾

在上一篇博文中，我们学习了如何将当前应用程序移动到一个Master-Detail应用程序，该应用程序将业务合作伙伴显示为列表（主），并在详细信息页面（详细信息）内显示带有销售订单的详细信息。

本练习将涵盖什么

在本系列博客文章的第4部分中，我们将学习如何创建第二个向下钻取页面，其中包含有关销售订单详细信息的信息并显示销售订单项目表。

本练习最重要的部分是了解如何删除销售订单中的销售订单项目（CRUD操作的一部分）。

ODataModel ：我们已经使用它来显示有关我们的业务合作伙伴Order Sale的服务器端信息。现在，我们将使用它来显示“销售订单项目”并将其从集合中删除。为此，我们将使用remove方法

这是本练习中的主要任务，但这并不是我们在代码中所做的唯一事情。这是获得最终结果所需要做的事情的列表：

在manifest.json中添加新路线和目标，以导航到BusinessPartnerSeleOrderItem页面
收听“销售订单”单击事件并导航到“销售订单”详细信息（我们将在其中显示销售订单详细信息和销售订单项目）
添加一个FilterBar来过滤销售订单项目的表
添加一个ViewSettingsDialog来对销售订单项目进行排序/分组
展开SaleOrderItem实体的ToProduct导航属性，以将Product信息显示到表的行中

注意：当我需要过滤，排序和分组项目时，在SaleOrderItemsSet上遇到很多问题。您始终需要知道已启用哪些字段（在服务器端实现）以进行过滤，排序或分组。

跨团队通信是软件开发中的关键要素

在这种情况下，DeliveryDate是不可排序的，产品的类别和名称不可排序和可过滤，依此类推。因此，请记住始终与后端团队进行适当的沟通，以获取前端应用程序所需的服务器端实现。

让我们编写代码：删除操作

那么，删除记录需要做什么？

UI / UX

我们是前端开发人员（或全栈开发人员），UI / UX是我们工作的重要组成部分。我们需要创建一个界面和用户体验，以使我们的用户可以用更少的时间，更少的步骤来完成工作，并且不要讨厌一天结束时使用的应用程序。我们工作的结果是一个幸福的用户，他们用更少的时间和更少的错误完成工作，并且公司赚了更多的钱。

要实现此UI / UX，您可以利用ListBase的某些属性，该属性由我们的Table扩展。要添加删除按钮（大X），您只需要将Table 模式属性设置为Delete ，然后处理用户单击按钮时触发的delete事件。

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); } }); }

那么我们在这里做了什么？

我们从单击的listItem的绑定上下文中获取路径（标识我们项目的REST URL）。
我们从框架获取ODataModel引用（我们使用的是默认模型，因此我们无需为getModel方法指定模型名称）
我们把桌子忙起来了。这将显示一个繁忙的指示器，提示用户我们正在与服务器进行通信。
我们调用具有2个参数的.remove方法。第一个是我们要删除的项目的路径，第二个是具有不同参数的对象。您可以在官方文档中查看所有内容。我们只需要成功和错误事件的回调即可向用户提供正确的反馈并消除繁忙状态。

那么在UI / UX上使用.remove方法后会发生什么？

好吧，这很简单。记录被删除，ODataModel由框架自动更新，并且由于SAPUI5的绑定机制，表也被自动更新。

什么意思该框架还要注意用新数据刷新Table（已删除一项），因此我们无需为它烦恼；）

结论，第5部分的下一步是什么？

如果您想查看最终结果，可以直接转到GitHub Project的step_4分支。

在下一部分中，我们将处理销售订单项目的更新操作，以完成CRUD操作。

不幸的是，我无法实现Create操作，因为这似乎与我要提交的数据有关的服务器端验证问题，并且该错误非常隐蔽：D

需要反馈

您如何看待这个系列？您是否希望更多地关注某些SAPUI5方面？

把它写下来在评论部分！祝大家编码愉快！

用于假人的SAPUI5第4部分：完整的分步练习