在视图之间传递值以用作ODUI调用中的过滤器，用于SAPUI5 SplitApp

时间：2016-01-12 21:59:02

标签： routing odata sapui5

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

从这里我正在努力。在尝试获取EmployeeleaveDetailSet的数据时，我需要使用员工编号作为过滤器参数，并在详细视图中将该数据用作我的表的模型。我已经通过查看以下链接（例如http://scn.sap.com/community/developer-center/front-end/blog/2015/01/03/splitapp-with-routing-mechanism和https://www.youtube.com/watch?v=Iz1itB7uDio）来研究路由作为完成此操作的选项。 （我已经阅读了其他几个教程和论坛帖子，并观看了其他几个视频，但我不能在这篇文章中分享链接，因为我没有足够的声誉发布超过2个链接。这对我来说似乎有点傻该网站的“如何询问”页面声明我应该与社区分享我的研究。）无论如何，我能够运行所有这些路由教程，并且能够理解所演示的概念，但是当我尝试应用路由时到我自己的应用程序我收到错误“未捕获的TypeError：t.createContent不是函数”。我想知道我的splitApp设置是否有缺陷，因为我看过的一些路由教程只是一个应用程序开始，当我尝试将其更改为splitApp时，我得到了同样的错误。

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

非常感谢您的帮助，提前感谢那些能够提供帮助的人。以下是我到目前为止所做的代码。我注释掉了无效的路由部分。

在WebContent文件夹中

的index.html 

<!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 

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 

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 

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 

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 

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 

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 为空。

2 个答案:

答案 0 :(得分：0)

我想要一个徽章来阅读这个信息！据我所知，您缺少将聚合“项目”绑定到您的详细信息页面。 列表/表格需要这几个步骤：

  1. 列

            var oColumns = [
            new sap.m.Column({
                hAlign: "Left",
                header: new sap.m.Label({
                    text: "Pernr"   
            }),
                minScreenWidth: "Tablet"
            }), new sap.m.Column({
                hAlign: "Left",
                header: new sap.m.Label({
                    text: "Name"    
            }),
                minScreenWidth: "Tablet"
            })
        ];

  2. 表

            var oTable = new sap.m.Table({
            columns: oColumns,
            growing: true,
            growingThreshold: 5,
            mode: sap.m.ListMode.MultiSelect
        });

  3. 模板

            var oTemplate = new sap.m.ColumnListItem({
            vAlign: "Middle",
            cells: [
                new sap.m.Text({
                    text: "{Pernr}"
        }), new sap.m.Text({
                    text: "{Name}"
                })
            ]
        });

  4. 项目聚合绑定（在详细信息视图中缺失） 

            oTable.bindAggregation("items", {
            path: "/d/results", // <-- may differ in your Scenario, if SAP-Service, /d/results might be fine!
            template: oTemplate
        });

    5. 另一个提示是使用SAP WEB IDE，如果您没有HCP，那么也存在试用版，只需选择odata字段和IDE，您就可以通过预设模板简单地构建示例正在为你编写代码。这可能有助于了解如何开发sap意味着它的方式。

答案 1 :(得分：0)

我能够让这个项目与路由一起工作。所以我成功地将一个变量从详细视图传递到主视图。我无法使用oTable.bindAggregation将过滤器参数发送到后端。 SAP后端中的表IT_FILTER_SELECT_OPTIONS为空。但是使用带有oTable.bindItems的filter参数可以将过滤器发送到后端表IT_FILTER_SELECT_OPTIONS。

虽然我让程序工作，但我不能把它放在我的fiori启动板中，因为当我尝试合并Component.js文件时仍然会收到错误“Uncaught TypeError：t.createContent is not function”。我也在使用博客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 TypeError：t.createContent不是函数”。所以我想在使用splitApp，routing和Component.js时我一定会遗漏一些东西。

相关问题
最新问题