test/webapp/view/Detail.view.xml

<mvc:View
	controllerName="sap.ui.demo.orderbrowser.controller.Detail"
	xmlns="sap.m"
	xmlns:semantic="sap.f.semantic"
	xmlns:mvc="sap.ui.core.mvc"
	xmlns:core="sap.ui.core"
	xmlns:l="sap.ui.layout">
	<semantic:SemanticPage
		id="page"
		busy="{detailView>/busy}"
		busyIndicatorDelay="{detailView>/delay}"
		core:require="{
			formatMessage: 'sap/base/strings/formatMessage',
			DateType: 'sap/ui/model/type/Date'
		}">
		<semantic:titleHeading>
			<Title
				text="{
					parts: [
						'i18n>commonItemTitle',
						'OrderID'
					],
					formatter: 'formatMessage'
				}"/>
		</semantic:titleHeading>
		<semantic:headerContent>
			<l:HorizontalLayout>
				<l:VerticalLayout class="sapUiMediumMarginEnd">
					<ObjectAttribute
						title="{i18n>commonCustomerName}"
						text="{Customer/CompanyName}"/>
					<ObjectAttribute
						title="{i18n>detailOrderDate}"
						text="{
							path: 'OrderDate',
							type: 'DateType',
							formatOptions: { style: 'medium' }
						}"/>
					<ObjectAttribute
						title="{i18n>commonItemShipped}"
						text="{= ${ShippedDate} ?
								${
									path: 'ShippedDate',
									type: 'DateType',
									formatOptions: { style: 'medium' }
								}
							:${i18n>commonItemNotYetShipped} }"/>
				</l:VerticalLayout>
				<l:VerticalLayout>
					<Label text="{i18n>priceText}"/>
					<ObjectNumber
						number="{
							parts: [
								{path:'detailView>/totalOrderAmount'},
								{path:'detailView>/currency'}
							],
							type: 'sap.ui.model.type.Currency',
							formatOptions: {
								showMeasure: false
							}
						}"
						unit="{detailView>/currency}"/>
				</l:VerticalLayout>
			</l:HorizontalLayout>
		</semantic:headerContent>
		<semantic:content>
			<l:VerticalLayout>
				<IconTabBar
					id="iconTabBar"
					headerBackgroundDesign="Transparent"
					select=".onTabSelect"
					selectedKey="{detailView>/selectedTab}">
					<items>
						<IconTabFilter
							id="iconTabFilterShipping"
							icon="sap-icon://shipping-status"
							tooltip="{i18n>detailIconTabBarShipping}"
							key="shipping">
						</IconTabFilter>
						<IconTabFilter
							id="iconTabFilterProcessor"
							icon="sap-icon://employee"
							tooltip="{i18n>detailIconTabBarProcessor}"
							key="processor">
						</IconTabFilter>
					</items>
				</IconTabBar>
				<Table
					id="lineItemsList"
					class="sapUiSmallMarginTop"
					width="auto"
					items="{Order_Details}"
					updateFinished=".onListUpdateFinished"
					noDataText="{i18n>detailLineItemTableNoDataText}"
					busyIndicatorDelay="{detailView>/lineItemTableDelay}">
					<headerToolbar>
						<Toolbar id="lineItemsToolbar">
							<Title
								id="lineItemsHeader"
								text="{detailView>/lineItemListTitle}"/>
						</Toolbar>
					</headerToolbar>
					<columns>
						<Column>
							<Text text="{i18n>detailLineItemTableIDColumn}"/>
						</Column>
						<Column
							minScreenWidth="Tablet"
							demandPopin="true"
							hAlign="End">
							<Text text="{i18n>detailLineItemTableUnitPriceColumn}"/>
						</Column>
						<Column
							minScreenWidth="Tablet"
							demandPopin="true"
							hAlign="End">
							<Text text="{i18n>detailLineItemTableUnitQuantityColumn}"/>
						</Column>
						<Column
							minScreenWidth="Tablet"
							demandPopin="true"
							hAlign="End">
							<Text text="{i18n>detailLineItemTableTotalColumn}"/>
						</Column>
					</columns>
					<items>
						<ColumnListItem>
							<cells>
								<ObjectIdentifier
									title="{Product/ProductName}"
									text="{ProductID}"/>
								<ObjectNumber
									number="{
										path: 'UnitPrice',
										formatter: '.formatter.currencyValue'
									}"
									unit="{detailView>/currency}"/>
								<ObjectAttribute
									text="{Quantity}"/>
								<ObjectNumber
									number="{
										parts:[
											{path:'Quantity'},
											{path:'UnitPrice'},
											{path:'detailView>/currency'}
										],
										formatter: '.formatter.calculateItemTotal'
									}"
									unit="{detailView>/currency}"/>
							</cells>
						</ColumnListItem>
					</items>
				</Table>
			</l:VerticalLayout>
		</semantic:content>
		<semantic:sendEmailAction>
			<semantic:SendEmailAction
				id="shareEmail"
				press=".onSendEmailPress"/>
		</semantic:sendEmailAction>
		<semantic:closeAction>
			<semantic:CloseAction
				id="closeColumn"
				press=".onCloseDetailPress"/>
		</semantic:closeAction>
		<semantic:fullScreenAction>
			<semantic:FullScreenAction
				id="enterFullScreen"
				visible="{= !${device>/system/phone} &amp;&amp; !${appView>/actionButtonsInfo/midColumn/fullScreen}}"
				press="toggleFullScreen"/>
		</semantic:fullScreenAction>
		<semantic:exitFullScreenAction>
			<semantic:ExitFullScreenAction
				id="exitFullScreen"
				visible="{= !${device>/system/phone} &amp;&amp; ${appView>/actionButtonsInfo/midColumn/fullScreen}}"
				press="toggleFullScreen"/>
		</semantic:exitFullScreenAction>
	</semantic:SemanticPage>
</mvc:View>