SAP UI5应用里的页面路由处理 SAP UI5SAP成都研究院SAP Cloud PlatformSAP云平台ABAP
程序员文章站
2024-03-14 13:17:04
...
选择SAP UI5应用的webapp文件夹,右键,选择New->SAP UI5 View, 新建一个UI5视图:
视图名称改成app:
在manifest.json文件里编辑route区域,将默认的route重命名为home,清空Pattern字段,
路由的目标,设置成我们UI5应用里的另一个视图View1:
将我们刚才新建的视图设置成这个应用的root view:
```JavaScript
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
var selectedProductId = oEvent.getSource().getBindingContext().getProperty("ProductID");
oRouter.navTo("Detail", {
productId: selectedProductId
});
```
新建一个Detail view:
源代码:
```xml
<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="sapcp.cf.tutorial.app.controller.Detail"
xmlns:html="http://www.w3.org/1999/xhtml">
<App>
<pages>
<Page title="{i18n>DetailTitle}"
showNavButton="true"
navButtonPress="handleNavButtonPress" >
<VBox>
<Text text="{ProductName}" />
<Text text="{UnitPrice}" />
<Text text="{QuantityPerUnit}" />
<Text text="{UnitsInStock}" />
</VBox>
</Page>
</pages>
</App>
</mvc:View>
```
在manifest.json文件里,新建一条路由规则:
pattern:detail/{productId}
路由目标为Detail view,视图level为2:
运行时测试,我点了某个列表行项目之后:
跳转到明细页面:
推荐阅读
-
SAP UI5应用里的页面路由处理 SAP UI5SAP成都研究院SAP Cloud PlatformSAP云平台ABAP
-
浅谈SAP CRM和Hybris Commerce里的价格架构折扣 CRMHybrisSAP Cloud PlatformSAP成都研究院SAP云平台
-
SAP Leonardo图片处理相关的机器学习服务在SAP智能服务场景中的应用 人工智能机器学习SAP Cloud PlatformSAP成都研究院SAP云平台
-
wordpress插件上传的失败原因和处理方案 WordPressSAP成都研究院SAP Cloud PlatformSAP云平台SAP
-
SAP CRM中间件下载时数据库表CRMATAB为空的处理方法 SAP成都研究院SAP Cloud PlatformSAP云平台CRM中间件
-
SAP CRM里产品主数据的文本模型设计 SAP成都研究院SAP Cloud PlatformSAP云平台SAPFiori
-
SAP Fiori里的Adapt UI按钮,神出鬼没的奥秘 SAP成都研究院SAP Cloud PlatformSAP云平台SAPABAP
-
SAP CRM Fiori应用冗余round trip的原因分析 SAP成都研究院SAP Cloud PlatformSAP云平台CRMOData
-
SAP ABAP SQL的execution plan和cache SQLABAPSAP成都研究院SAP Cloud PlatformSAP云平台
-
如何创建URL Mashup并插入到SAP Cloud for Customer标准页面里 SAPSAP云平台SAP Cloud PlatformSAP成都研究院Cloud