Step_4_Adding_a_Detail_Page_4e4315c.md

loio
4e4315cef89e48ceb60b4dc12f5be2d2

view on: demo kit nightly build | demo kit latest release

Step 4: Adding a Detail Page

In this step, we add an empty detail page.

---

Preview

List Page with Empty Detail Page

---

Coding

You can view and download all files at Flexible Column Layout App - Step 4.

---

webapp/view/Detail.view.xml [NEW]

<mvc:View
	xmlns:mvc="sap.ui.core.mvc">
</mvc:View>

First, we create a blank detail page.

---

webapp/view/App.view.xml [MODIFY]

<mvc:View
	displayBlock="true"
	height="100%"
	xmlns="sap.f"
	xmlns:mvc="sap.ui.core.mvc">
	<FlexibleColumnLayout id="flexibleColumnLayout" backgroundDesign="Solid">
		<beginColumnPages>
			<mvc:XMLView id="beginView" viewName="sap.ui.demo.fiori2.view.List"/>
		</beginColumnPages>
		<midColumnPages>
			<mvc:XMLView id="detailView" viewName="sap.ui.demo.fiori2.view.Detail"/>
		</midColumnPages>
	</FlexibleColumnLayout>
</mvc:View>

We add the detail page in FlexibleColumnLayout's midColumnPages aggregation in the App.view.xml file. This way the detail page will be displayed in the middle column.

---

webapp/view/List.view.xml [MODIFY]

		...
		<!-- DynamicPage Content -->
					...

					...
					<items>
						<ColumnListItem type="Navigation" press=".onListItemPress">
							<cells>
								<ObjectIdentifier title="{products>Name}" text="{products>ProductId}"/>
								<ObjectNumber
									number="{
										parts:[
											{path:'products>Price'},
											{path:'products>CurrencyCode'}
										],
										type: 'sap.ui.model.type.Currency',
										formatOptions: {showMeasure: false}
									}"
									unit="{products>CurrencyCode}"/>
							</cells>
						</ColumnListItem>
					</items>
					...

We add a press handler to each ColumnListItem in the List.view.xml.

---

webapp/controller/List.controller.js [MODIFY]

sap.ui.define([
	"sap/ui/model/json/JSONModel",
	"sap/ui/core/mvc/Controller",
	"sap/ui/model/Filter",
	"sap/ui/model/FilterOperator",
	'sap/ui/model/Sorter',
	'sap/m/MessageBox',
	'sap/f/library'
], function (JSONModel, Controller, Filter, FilterOperator, Sorter, MessageBox, fioriLibrary) {
	"use strict";
		...

		...
		onSort: function () {
			this._bDescendingSort = !this._bDescendingSort;
			var oBinding = this.oProductsTable.getBinding("items"),
				oSorter = new Sorter("Name", this._bDescendingSort);

			oBinding.sort(oSorter);
		},

		onListItemPress: function () {
			var oFCL = this.oView.getParent().getParent();

			oFCL.setLayout(fioriLibrary.LayoutType.TwoColumnsMidExpanded);
		}
	});
});

In the List.controller.js, we attach a onListItemPress function to the press handler, which changes the layout to TwoColumnsBeginExpanded. This means that there are going to be two columns, where the first one is larger than the second. For more information on the available layout types, see Types of Layout.

Parent topic:Flexible Column Layout App Tutorial

Next:Step 3: Using Dynamic Page for the List View

Previous:Step 5: Using Object Page Layout as a Detail Page