Step 12: NotFound View

There's one more thing that we need to finish off. In the Router configuration (see the Navigation and Routing section) there's a route definition for NotFound. Navigation to this is invoked in the Detail view's controller (see the Detail View section). So we need to create this view so that the Router can load it, add it to the SplitApp, and navigate to it.

This is the content of NotFound.view.xml in the view subfolder:

<mvc:View
	xmlns:mvc="sap.ui.core.mvc"
	xmlns="sap.m">
	<Page
		class="sapUiFioriObjectPage"
		title="{i18n>notFoundTitle}">
		<content>
		<FlexBox
			alignItems="Center"
			justifyContent="Center">
			<items>
				<Label
					class="spacerTop"
					textAlign="Center"
					text="{i18n>notFoundText}" />
			</items>
		</FlexBox>
		</content>
		<footer>
			<Bar>
			</Bar>
		</footer>
	</Page>
</mvc:View>

It's a simple affair. To fit in with the app's overall look, we're using an sap.m.Page control with a title and a Bar in the footer. The Page's default content aggregation contains an sap.m.FlexBox control with an sap.m.Label control centrally aligned and justified. The Label has a CSS class defined so we can use some custom CSS to move the text in the Label's text property down a little bit.

Here's the custom CSS, which is stored in style.css in the css subfolder:

.spacerTop {
	margin-top: 2rem;
}

In order for this custom CSS to work, you first need to write the following line of code inside your index.html file:

<link rel="stylesheet" type="text/css" href="css/style.css">

Progress Check

Finally, this is our complete app folder:

tdg/
  |
  +-- css/
  |     |
  |     +-- style.css
  |
  +-- i18n/
  |     |
  |     +-- messageBundle.properties
  |
  +-- util/
  |     |
  |     +-- Formatter.js
  |
  +-- view/
  |     |
  |     +-- AddProduct.controller.js
  |     +-- AddProduct.view.xml
  |     +-- App.view.xml
  |     +-- CategoryInfoForm.fragment.xml
  |     +-- Detail.controller.js
  |     +-- Detail.view.xml
  |     +-- Master.controller.js
  |     +-- Master.view.xml
  |     +-- NameRequiredDialog.fragment.xml
  |     +-- NotFound.view.xml
  |     +-- SupplierAddressForm.fragment.xml
  |
  +-- Component.js
  +-- index.html
  +-- MyRouter.html

When navigating to an unknown URL, this is what the user will see: