Step 15: Reuse an Existing Route

직원 Table에서 클릭시 해당 직원의 이력서 view로 액세스 해보자 이때 새로운 route와 새로운 view를 통해서가 아닌 기존 route를 재사용하여 특정 직원의 이력서를 교차 링크로 구현한다.
이번 튜토리얼을 통해 동일한 page로 연결되는 여러 path가 있음을 알 수 있다.

Preview

Coding

Routing and Navigation - Step 15.

webapp/view/employee/overview/EmployeeOverviewContent.view.xml

<mvc:View
	controllerName="sap.ui.demo.nav.controller.employee.overview.EmployeeOverviewContent"
	xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc">
	<Table id="employeesTable"
			items="{/Employees}"
			itemPress="onItemPressed">
		<headerToolbar>
			...
		</headerToolbar>
		<columns>
			...
		</columns>
		<items>
			<ColumnListItem type="Active">
				<cells>
					...
				</cells>
			</ColumnListItem>
		</items>
	</Table>
</mvc:View>

EmployeeOverviewContent view에서 itemPress event에 대한 이벤트 핸들러를 등록하고
ColumnListItem의 type 속성을 Active로 설정하여 항목을 선택하고 탐색을 트리거 할 수있게 한다.

webapp/controller/employee/overview/EmployeeOverviewContent.controller.js

sap.ui.define([
	"sap/ui/demo/nav/controller/BaseController",
	"sap/ui/model/Filter",
	"sap/ui/model/FilterOperator",
	"sap/ui/model/Sorter"
], function (BaseController, Filter, FilterOperator, Sorter) {
	"use strict";
	return BaseController.extend("sap.ui.demo.nav.controller.employee.overview.EmployeeOverviewContent", {
		...
		_syncViewSettingsDialogSorter : function (sSortField, bSortDescending) {
			// the possible keys are: "EmployeeID" | "FirstName" | "LastName"
			// Note: no input validation is implemented here
			this._oVSD.setSelectedSortItem(sSortField);
			this._oVSD.setSortDescending(bSortDescending);
		},
	 onItemPressed : function (oEvent) {
			var oItem, oCtx, oRouter;
			oItem = oEvent.getParameter("listItem");
			oCtx = oItem.getBindingContext();
			this.getRouter().navTo("employeeResume",{
				employeeId : oCtx.getProperty("EmployeeID"),
				query : {
					tab : "Info"
				}
			});
		}
	});
});

itemPress event의 onItemPressed Handler를 EmployeeOverviewContent controller에 추가한다.
선택된 item으로 부터 바인딩 context()을 호출하여 employeeResume route로 이동한다.
이미 해당 route와 target은 이전 단계에 추가했으므로 재사용하면 된다.

이제 부터 employee table뿐만 아니라 이전 단계에서 생성된 직원 detail 정보 page(route name = employee)에서 employeeResume route로 이동할 수 있다.