文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >在OData调用SAPUI5 SplitApp中在用作筛选器的视图之间传递值

问在OData调用SAPUI5 SplitApp中在用作筛选器的视图之间传递值
EN

Stack Overflow用户
提问于 2016-01-12 21:59:01
回答 2查看 6.1K关注 0票数 0

我对SAPUI5很陌生，对编程也或多或少是新的。我目前正在从事我的第一个实用的SAPUI5项目。应用程序将是一个splitApp，主视图将包含在登录管理器下工作的员工列表，详细视图将根据员工编号从列表中选择特定员工最近缺勤的列表。我能够添加我自己的Component.js文件来将这个应用程序包含在我们的Fiori启动板中。我设置并注册了这个应用程序将要使用的网关服务。该服务有两个实体集，EmployeeListSet和EmployeeLeaveDetailSet。当我在我的oData代码中设置UI5模型时，我可以将EmployeeListSet绑定到主视图中的列表。我可以看到下属员工的名单。单击列表项时，将成功检索主控制器中关联的员工编号。

从这里开始我在挣扎。在尝试获取EmployeeleaveDetailSet的数据时，需要使用employee编号作为筛选参数，并在detail视图中使用该数据作为表的模型。我研究了路由作为实现这一目标的一种选择，方法是查看下面的链接，如http://scn.sap.com/community/developer-center/front-end/blog/2015/01/03/splitapp-with-routing-mechanism和https://www.youtube.com/watch?v=Iz1itB7uDio。(我读过其他几篇教程和论坛文章，看过其他几段视频，但我不能分享这篇文章中的链接，因为我没有足够的声誉来发布两个以上的链接。这对我来说有点傻，因为“如何询问”页面上说我应该和社区分享我的研究。)无论如何，我能够运行所有这些路由教程，并且能够理解正在演示的概念，但是当我尝试将路由应用到我自己的应用程序时，我得到了一个错误"Uncaught TypeError: t.createContent不是一个函数“。我想知道我的splitApp设置是否有缺陷，因为我看过的一些路由教程是从一个应用程序开始的，当我试图将它更改为splitApp时，我会得到相同的错误。

因此，我希望这个编程社区的成员能够指导我如何将员工号从主控制器传递到详细信息，这样我就可以在EmployeeLeaveDetail实体集的odata调用的筛选器中使用它。

您的帮助是非常感谢的，提前感谢那些如何能够帮助。下面是我到目前为止所做的代码。我评论了路由中不起作用的部分。

在WebContent文件夹中

index.html

​

代码语言：javascript
复制
<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
	       <script src="resources/sap-ui-core.js"
				id="sap-ui-bootstrap"
				data-sap-ui-libs="sap.ui.commons, sap.ui.table, sap.m"
				data-sap-ui-theme="sap_bluecrystal"
				data-sap-ui-resourceroots='{
				"zhcm_leave_check": "./"
			}'>
		</script>
		
		<script src="/sap/public/bc/ui2/services/sap/ui2/srvc/error.js"></script>
		<script src="/sap/public/bc/ui2/services/sap/ui2/srvc/utils.js"></script>
		<script src="/sap/public/bc/ui2/shell-api/sap/ui2/shell/startup.js"></script>
		<script src="/sap/public/bc/ui2/shell-api/sap/ui2/shell/shell.js"></script>
		<!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->

		<script>
		sap.ui.localResources("view");
// 		jQuery.sap.require("sap.ui.core.routing.Router");
// 		jQuery.sap.require("sap.ui.core.routing.HashChanger");
	
	new sap.m.Shell("shellId", {
			app: new sap.ui.core.ComponentContainer({
				name : "zhcm_leave_check",
				height: "100%"
		})
		}).placeAt("content");
	
// 	var oRouter = new sap.ui.core.routing.Router(  
// 			  {  
// // 			      master: {  
// // 			          pattern: "",  
// // 			          view: "employeelist",
// // 			          targetAggregation: "masterPages"
// // 			  	  },  
// 			  	  detail: {    
// 			  		  pattern: ["EmployeeLeaveHistory", "detail"], 
// 			 		  view: "detail",
// 			 		 targetAggregation: "detailPages"
// 			  	  }  
// 			  },  
// 			  {  
// 			  targetControl: "splitapp",                                    
// 			  viewType: "JS",  
// 			  viewPath: "view",                        
// 			  clearTarget: false                    
// 			  });  
// 	var oRouteHandler = new sap.m.routing.RouteMatchedHandler(oRouter);  
// 	  oRouter.register("router");  // Assign a name to Router, so that we can access it in all controllers by using this name  
// 	  oRouter.initialize();  // Initialise the Router  

		</script>
		<script type = "text/javascript">var EmpID = ""</script>
	</head>
	<body class="sapUiBody" role="application">
		<div id="content"></div>
	</body>
</html>

​

Component.js

​

代码语言：javascript
复制
jQuery.sap.declare("zhcm_leave_check.Component");

sap.ui.core.UIComponent.extend("zhcm_leave_check.Component", {
	
//	metadata : {  
//		  routing : {  
//		  config : {  
//		  viewType : "JS",  
//		  viewPath : "view",  
//		  targetControl : "appId",  
//		  clearTarget : false,  
//		  },  
//		  routes : [  
//		  {  
//		  pattern : "", // which appears in URL, while you navigate  
//		  name : "Master",     // Name that is used in navTo method  
//		  view : "employeelist",   // this is the target view that you are navigating to  
//		  viewType : sap.ui.core.mvc.ViewType.JS,
//		  targetControl: "appId",
//		  targetAggregation : "masterPages"	  // this defines whether the target view is a [pages/content/masterpages/detailpages]  
//
//		  },  
//		 {  
//		  pattern : ["EmployeeLeaveHisotry", "detail"],  
//		  name : "detail",  
//		  view : "detail",  
//		  viewType : sap.ui.core.mvc.ViewType.JS,
//		  targetControl: "appId",
//		  targetAggregation : "detailPages"  
//		  },  
//		 ]  
//		  }  
//		  },    
		  
//		  init : function () {  
//			  // 1. some very generic requires  
//			   jQuery.sap.require("sap.m.routing.RouteMatchedHandler");  
//			   jQuery.sap.require("zhcm_leave_check.MyRouter");  
//			   // 2. call overridden init (calls createContent)  
//			   sap.ui.core.UIComponent.prototype.init.apply(this, arguments);  
//			 // 3a. monkey patch the router  
//			   var router = this.getRouter();  
//			   router.myNavBack = zhcm_leave_check.MyRouter.myNavBack;  
//			   // 4. initialize the router  
//			   this.routeHandler = new sap.m.routing.RouteMatchedHandler(router);  
//			   router.register("router");
//			   router.initialize();  
//			   },  
//			   
//			   destroy : function () {  
//			   if (this.routeHandler) {  
//			   this.routeHandler.destroy();  
//			   }  
//			   // call overridden destroy  
//			   sap.ui.core.UIComponent.prototype.destroy.apply(this, arguments);  
//			   },  
			
	createContent : function() {
		var oView = sap.ui.view({
			id : "app",
			viewName : "zhcm_leave_check.view.main",
			type : "JS",
			viewData : { component : this }
		});
		
		var sUrl1 = "/sap/opu/odata/sap/zhcm_leave_check_srv/";
		var oModel = new sap.ui.model.odata.ODataModel(sUrl1, false);
//		sap.ui.getCore().setModel(oModel);
//    sap.ui.getCore().byId("EmployeeList").setModel(oModel,"data");
		oView.setModel(oModel, "data")
		return oView;
	}
	
});

​

MyRouter.js

​

代码语言：javascript
复制
jQuery.sap.declare("zhcm_leave_check.MyRouter");  
zhcm_leave_check.MyRouter = {  
  /*  * to monkey patch the router with the mobile nav back handling 
  */  
  myNavBack : function (route, data) {  
  var history = sap.ui.core.routing.History.getInstance();  
  var url = this.getURL(route, data);  
  var direction = history.getDirection(url);  
  if ("Backwards" === direction) {  
  window.history.go(-1);  
  } else {  
  var replace = true; // otherwise we go backwards with a forward history  
  this.navTo(route, data, replace);  
  }  
  },  
};

​

在WebContent下的视图文件夹中：

main.view.js

​

代码语言：javascript
复制
sap.ui.jsview("zhcm_leave_check.view.main", {
	getControllerName : function() {
		return "zhcm_leave_check.view.main";
	},

	createContent : function(oController) {
		
		this.setDisplayBlock(true);
		this.app = new sap.m.SplitApp("splitapp"
//				, {
//			afterDetailNavigate: function(){
//				this.hideMaster();
//			}
//		}
		);
		
		var oPage = new sap.m.Page("mainPage", {
			title : "Department Leave History",
			showNavButton : true,
			navButtonPress : function(e){
				window.history.go(-1);
			},
		});
		
		this.app.addDetailPage(sap.ui.jsview(
				"zhcm_leave_check.view.detail", 
				"zhcm_leave_check.view.detail"));
		
		// Inbox-View as Master
		this.app.addMasterPage(sap.ui.jsview(
				"zhcm_leave_check.view.employeelist", 
				"zhcm_leave_check.view.employeelist"));
		
		// Add Views to Master
		this.app.toDetail("zhcm_leave_check.view.detail");
		this.app.toMaster("zhcm_leave_check.view.employeelist");
	
		oPage.addContent(this.app);
      	return oPage;
	}
});

​

main.controller.js是空的

主视图employeelist.view.js

​

代码语言：javascript
复制
sap.ui.jsview("zhcm_leave_check.view.employeelist", { 
	getControllerName : function() {
		return "zhcm_leave_check.view.employeelist";
	},

	createContent : function(oController) {
		var oList = new sap.m.List("EmployeeList",{
//			mode: jQuery.device.is.phone ? 
//			 sap.m.ListMode.None : sap.m.ListMode.SingleSelectMaster,
//			select : function(){oController.itemSelected(); },
			includeItemInSelection: true,
			inset: true,
			itemPress : function(oEvent){
				oController.onSelect(oEvent);}
		});
		
		oTemplate = new sap.m.StandardListItem("idItems", {
			title : "{data>EmployeeName}",
			description: "{data>EmployeeNumber}",
			type : sap.m.ListType.Navigation
		});
		
		oList.bindAggregation( "items", { 
			 path : "data>/EmployeeListSet",
			 template: oTemplate	 
		});
		
		this.page =  new sap.m.Page("master", {
			title: "Employee List",	
			content: [oList]
		});
 		return this.page;
	}
});

​

employeelist.controller.js

​

代码语言：javascript
复制
sap.ui.controller("zhcm_leave_check.view.employeelist", {

	onInit: function() {
//		var sUrl1 = "/sap/opu/odata/sap/zhcm_leave_check_srv";
//		var oModel = new sap.ui.model.odata.ODataModel(sUrl1, false);
		var oModel = sap.ui.getCore().getModel("data");
//		console.log(oModel);
		sap.ui.getCore().byId("EmployeeList").setModel(oModel,"data");
	//	this.router = sap.ui.core.UIComponent.getRouterFor(this);  

	},
	
	onSelect: function(oEvent){
		
		var oItemSelect = oEvent.getParameter("listItem");
		console.log(oItemSelect);
		var Context = oItemSelect.getBindingContext("data");
		console.log(Context);
		var EmpID = Context.getProperty("EmployeeNumber");
		console.log(EmpID);
 		
//		var sUrl2 = "/sap/opu/odata/sap/zhcm_leave_check_srv";
//		var oModel2 = new sap.ui.model.odata.ODataModel(sUrl2, false);
		var oModel = sap.ui.getCore().getModel("data");
		oTable = sap.ui.getCore().byId("EmployeeLeave");
		oTable.setModel(oModel);
		
//		this.oRouter = sap.ui.core.routing.Router.getRouter("router");  
//		this.oRouter.navTo("detail", {EmployeeNumber: EmpID});	

			
//		var oFilter = new sap.ui.model.Filter("/EmployeeLeaveDetailSet", sap.ui.model.FilterOperator.EQ, "EmployeeNumber", EmpID);
//		console.log(oFilter);
//		var colItems = sap.ui.getCore().byId("colItems");
//		oTable.bindAggregation("items","/EmployeeLeaveDetailSet",colItems, [oFilter]);
//		
	},

//	onBeforeRendering: function() {
//
//	},

//	onAfterRendering: function() {
//
//	},
 
//	onExit: function() {
//
//	}   	
});

​

详细视图detail.view.js

​

代码语言：javascript
复制
sap.ui.jsview("zhcm_leave_check.view.detail", {

	/** Specifies the Controller belonging to this View. 
	* In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
	* @memberOf view.detail
	*/ 
	getControllerName : function() {
		return "zhcm_leave_check.view.detail";
	},

	/** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed. 
	* Since the Controller is given to this method, its event handlers can be attached right away. 
	* @memberOf view.detail
	*/ 
	createContent : function(oController) {
		
		var oTable = new sap.m.Table("EmployeeLeave",  {		
			inset : true,
			headerText : "List of Absences",
			headerDesign : sap.m.ListHeaderDesign.Standard, 
			mode : sap.m.ListMode.None, 		
			includeItemInSelection : false, 		
			});
		
		oTable.addColumn(new sap.m.Column({
	           header: new sap.ui.commons.Label({text: "Employee Number"}),
//	            template: new sap.ui.commons.TextField().bindProperty("value", "EmployeeNumber"),
	            sortProperty: "EmployeeNumber",
	            filterProperty: "EmployeeNumber"
	        }));
		
		oTable.addColumn(new sap.m.Column({
	           header: new sap.ui.commons.Label({text: "Leave ID"}),
//	            template: new sap.ui.commons.TextField().bindProperty("value", "LeaveID"),
	            sortProperty: "LeaveID"
	        }));
		
		
		oTable.addColumn(new sap.m.Column({
	           header: new sap.ui.commons.Label({text: "Leave Type"}),
//	            template: new sap.ui.commons.TextField().bindProperty("value", "LeaveText"),
	            sortProperty: "LeaveText"
	        }));
		
		oTable.addColumn(new sap.m.Column({
				header: new sap.m.Label({text: "Start Date"}),
//           template: new sap.ui.commons.TextField().bindProperty("value", "StartDate"),
            sortProperty: "StartDate"
        }));
		
		oTable.addColumn(new sap.m.Column({
            header: new sap.m.Label({text: "End Date"}),
//           template: new sap.ui.commons.TextField().bindProperty("value", "EndDate"),
            sortProperty: "EndDate"
        }));
		
		oTable.addColumn(new sap.m.Column({
            header: new sap.m.Label({text: "Start Time"}),
//          template: new sap.ui.commons.TextField().bindProperty("value", "StartTime"),
            sortProperty: "StartTime"
        }));
		
		oTable.addColumn(new sap.m.Column({
            header: new sap.ui.commons.Label({text: "End Time"}),
 //          template: new sap.ui.commons.TextField().bindProperty("value", "EndTime"),
            sortProperty: "EndTime"
        }));
		
		oTable.addColumn(new sap.m.Column({
           header: new sap.ui.commons.Label({text: "Absent Days"}),
 //           template: new sap.ui.commons.TextField().bindProperty("value", "AbsentDays"),
            sortProperty: "AbsentDays"
        }));
		
		oTable.addColumn(new sap.m.Column({
            header: new sap.m.Label({text: "Absent Hours"}),
 //           template: new sap.ui.commons.TextField().bindProperty("value", "AbsentHours"),
            sortProperty: "AbsentHours"
        }));
		
//		 Table Column Items
		var colItems = new sap.m.ColumnListItem("colItems",{type:"Active"});
		
		var txtNAME = new sap.m.Text("txtNAME",{text:"{EmployeeNumber}"});
		colItems.addCell(txtNAME);
		
		var txtNAME1 = new sap.m.Text("txtNAME1",{text:"{LeaveID}"});
		colItems.addCell(txtNAME1); 
		
		var txtNAME2 = new sap.m.Text("txtNAME2",{text:"{LeaveText}"});
		colItems.addCell(txtNAME2); 
				
		var txtNAME3 = new sap.m.Text("txtNAME3",{text:"{StartDate}"});
		colItems.addCell(txtNAME3); 
				
		var txtNAME4 = new sap.m.Text("txtNAME4",{text:"{EndDate}"});
		colItems.addCell(txtNAME4); 
		
		var txtNAME5 = new sap.m.Text("txtNAME5",{text:"{StartTime}"});
		colItems.addCell(txtNAME5); 
		
		var txtNAME6 = new sap.m.Text("txtNAME6",{text:"{EndTime}"});
		colItems.addCell(txtNAME6); 
		
		var txtNAME7 = new sap.m.Text("txtNAME7",{text:"{AbsentDays}"});
		colItems.addCell(txtNAME7);
		
		var txtNAME8 = new sap.m.Text("txtNAME8",{text:"{AbsentHours}"});
		colItems.addCell(txtNAME8);
		
////		oFilter = sap.ui.getCore().byId("Filter");
//		var oFilter = new sap.ui.model.Filter("/EmployeeLeaveDetailSet", sap.ui.model.FilterOperator.EQ, "EmployeeNumber", EmpID);
//		oTable.bindAggregation("items","/EmployeeLeaveDetailSet",colItems, [oFilter]);
//		
		
 		return new sap.m.Page("detail", {
			title: "Employee Leave History",
			content: [oTable]
		});
	}

});

​

detail.controller.js是空的。

routing
odata
sapui5
EN

回答 2

Stack Overflow用户

发布于 2016-01-13 14:29:56

我想要一个徽章，因为我读了这么多信息！据我所知，您缺少将聚合“项”绑定到详细信息页的方法。这几个步骤对于列表/表格是必要的：

  1. 列 var oColumns =新sap.m.Column({ hAlign：“左”，标题:新sap.m.Label({ text："Pernr“})，minScreenWidth："Tablet”}，新sap.m.Column({ hAlign：“左”)，标题:新sap.m.Label({ text："Name“})，minScreenWidth："Tablet”}；
  2. 表格 var oTable =新的sap.m.Table({列: oColumns，growing: true，growingThreshold: 5，mode: sap.m.ListMode.MultiSelect })；
  3. 模板 var oTemplate =新sap.m.ColumnListItem({ vAlign：“中间”，单元格:新sap.m.Text({ text："{Pernr}“})，新sap.m.Text({ text："{Name}”}) )；
  4. 项聚合绑定(在详细视图中缺失) OTable.bindAggregation(“项”，{ path：“/d/结果”，// <-)在您的场景中可能有所不同，如果Service、/d/结果可能是可以的！模板: oTemplate })；

另一个提示是使用SAP，如果您没有HCP，也会有一个试用版，您只需选择odata字段就可以根据预设的模板构建示例，而IDE正在为您编写代码。这可能有助于了解如何按照sap的本意发展。

票数 0
EN

Stack Overflow用户

发布于 2016-01-21 14:53:24

我能够让这个项目与路由一起工作。因此，我成功地将一个变量从detail视图传递到主视图。我在用oTable.bindAggregation将过滤器参数发送到后端时遇到了问题。SAP后端中的表IT_FILTER_SELECT_OPTIONS为空。但是，在oTable.bindItems中使用filter参数可以将过滤器发送到后端表IT_FILTER_SELECT_OPTIONS。

虽然我的程序可以工作，但我不能把它放在我的fiori发射台上，因为当我尝试合并一个TypeError文件时，仍然会出现错误"Uncaught t.createContent :t.createContent不是一个函数“。我还在使用来自博客http://scn.sap.com/community/developer-center/front-end/blog/2015/02/16/navigation-between-views-using-routing-and-parameter-passing-between-views的演示，这个演示使用路由和一个Component.js文件。但是，当我试图将这个演示修改为splitApp而不是App时，我仍然会遇到同样的错误："Uncaught : t.createContent不是一个函数“。因此，我想，当涉及到一起使用splitApp、路由和Component.js时，我肯定遗漏了一些东西。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/34754554

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档