Developing a Full-screen Application

Since we do not use an ABAP system as data source, we will need a metadata.xml file to simulate an OData Service. You will find this file in the Github repository, in the Mockdata folder.

1. Make sure you have downloaded the files from the Github repository, https://github.com/SAP-samples/sapui5-development-advanced-learning-journey

   1. Go to https://github.com/SAP-samples/sapui5-development-advanced-learning-journey

   2. When you are in the repository, select the Code button and then Download ZIP.

   3. Unzip the file into whichever folder you see fit. You will need some of the files for exercises and you can also refer to the files in the Solution sub-folder if you have some trouble with one of the exercise.

2. Log into the training SAP Business Application Studio.

   1. Perform this step, as shown in a previous training.

3. Upload the metadata.xml file to your Business Application Studio, in a Training files folder.

   1. Select the menu File → Open Folder....

   2. Select or Enter the /home/user/projects/ folder and choose OK.

   3. Click anywhere in the blank space of the Explorer, press the right mouse button, and select New Folder....

   4. Enter Training files in the input field and choose the Enter key (on your keyboard).

   5. In the contextual menu of the newly created folder, choose Upload... and look for the metadata.xml file from the Github repository you downloaded. It should be in the Mockdata folder.

1. Create a new SAP Fiori Freestyle project using the following information:

   Select Template and Target Location

   Field	Value
   Template	SAP Fiori application

   Template Selection

   Field	Value
   Template Type	SAP Fiori
   Template	Basic

   Datasource and Service Selection

   Field	Value
   Data source	Upload a Metadata Document
   Metadata file path	/home/user/projects/Training files/metadata.xml

   View name

   Field	Value
   View name	Carrier

   Project Attributes

   Field	Value
   Module name	ux402_fullscreen
   Application title	Full-screen Application
   Application namespace	student##.com.sap.training.ux402.fullscreen
   Description	A Full-screen Application
   Project folder path	/home/user/project
   Minimum SAPUI5 version	Let it on default value

   1. Choose File → New Project from Template in the SAP Business Application Studio.

   2. Choose SAP Fiori Application and select Start.

   3. For Template Type, choose SAP Fiori.

   4. Choose Basic and select Next.

   5. Choose the Data Source and Service Selection following Options:

      • As Data source, select Upload a Metadata Document.
      • As Metadata file path, enter /home/user/projects/Training files/metadata.xml or select the file in the search field and choose OK.

      Choose Next to continue.

   6. Insert Carrier as view name, and then select Next.

   7. Insert the following values into the Project Attributes page:

      • As Module name, enter ux402_fullscreen.
      • As Application title, enter Full-screen Application.
      • As Application namespace, enter student##.com.sap.training.ux402.fullscreen.
      • As Description, enter Full-screen Application.
      • As Project folder path, keep /home/user/projects.

   8. Select Finish.

2. Change the flag flexEnabled to false.

   1. Open the file, manifest.json.

   2. Scroll down to the sap.ui5 configuration.

   3. Change the flexEnabled property from true to false.

3. Upload the JSON files for mock data into a new webapp/localService/data folder.

   1. In the context menu of the webapp/localService folder, select New folder....

   2. A new line appears where you can enter the new folder name: data. Press Enter (on your keyboard) to confirm.

   3. In the context menu of the webapp/localService/data folder, select Upload....

   4. Select the three mockdata JSON files downloaded from Github and choose Open.

4. Add the listed views of type XML in the view folder and the corresponding controllers of type JavaScript in the controller folder of your project. Use Copy then Paste in the context menu of the Carrier.view.xml and Carrier.controller.js files to create the new files. Then rename them with the listed view and controller file names. In the created view files, change the controllerName attribute. In the created controller files, change the controller name in the extend function.

   View and Controller File Names

   View File Name	Controller File Name
   Flights.view.xml	Flights.controller.js
   NotFound.view.xml	NotFound.controller.js

   1. Select the Carrier.view.xml file in the view folder of your project and from the context menu, choose Copy.

   2. Select the view folder of your project and from the context menu, choose Paste.

   3. Select the created Carrier.view_copy.xml file and from the context menu, choose Rename. Replace Carrier.view_copy with Flights.view and choose Ok.

   4. In the opened Flights.view.xml file, edit the controllerName attribute and replace Carrier with Flights.

   5. Select the Carrier.controller.js file in the controller folder of your project and from the context menu, choose Copy.

   6. Select the controller folder of your project and, from the context menu, choose Paste.

   7. Select the created Carrier.controller_copy.js file and from the context menu, choose Rename. Replace Carrier.controller_copy with Flights.controller and choose Ok.

   8. In the opened Flights.controller.js file, change the controller name in the extend function by replacing Carrier with Flights. Save your changes.

   9. Repeat steps a to f and create a NotFound view with the corresponding controller.

   10. Save your changes and close all tabs.

1. For the Carrier View, add the listed key-value pairs to the i18n.properties file of your project.

   Carrier View Key-value Pairs within the i18n.properties File

   Key	Value
   overviewPageTitle	Carriers
   columnId	Id
   columnName	Name

   1. Open the i18n.properties file in the i18n folder of your project. Add the aforementioned mentioned key-value pairs to the file.

2. For the Flights view, add the listed key-value pairs to the i18n.properties file of your project.

   Flights view key-value pairs within the i18n.properties file

   Key	Value
   idLabelText	Id
   nameLabelText	Name
   currLabelText	Currency
   urlLabelText	Url
   carriername	Name
   flightno	Flight­No
   flightdate	Flight date
   seatmax	Seat max.
   seatocc	Seat occ.

   1. If the i18n.properties file is not already open, open it. Add the aforementioned key-value pairs to the file.

3. For the NotFound View, add the listed key-value pairs to the i18n.properties file of your project. Then save your changes.

   NotFound view key-value pairs within the i18n.properties.file

   Key	Value
   notFoundMessageTitle	Not Found
   notFoundMessageText	Sorry, but the requested resource is not available.
   notFoundMessageDescription	Check the URL and try again.

   1. If the i18n.properties file is not already open, open it. Add the above mentioned key-value pairs to the file.

   2. Save your changes.

1. Check the generated routing configuration and make sure that the following routing configuration parameters are configured correctly:

   Routing configuration

   Configuration Parameter	Value
   routerClass	sap.m.routing.Router
   viewType	XML
   async	true
   viewPath	student##.com.sap.training.ux402.fullscreen.ux402fullscreen.view
   controlAggregation	pages
   controlId	app
   transition	slide
   clearControlAggregation	false

   1. Open the file manifest.json.

   2. Locate the routing configuration, config.

   3. Make sure that the listed configuration parameters are included.

   4. Your implementation should look like the following code:

      Code snippet

      Copy code

      
      "routing": {
       "config": {
       "routerClass": "sap.m.routing.Router",
       "viewType": "XML",
       "async": true,
       "viewPath": "student00.com.sap.training.ux402.fullscreen.ux402fullscreen.view",
       "controlAggregation": "pages",
       "controlId": "app",
       "clearControlAggregation": false,
       "transition": "slide"
       },

      Expand

2. Modify the TargetCarrier target. Rename it overviewand make sure that it has the listed attributes and values.

   Overview Target

   Attribute	Value
   viewType	XML
   transition	slide
   viewId	Carrier
   viewName	Carrier
   viewLevel	1

   1. Find the targets configuration and rename the TargetCarrier target to overview.

   2. Check the listed attributes and values and modify accordingly.

   3. Your implementation should look like the following :

      Code snippet

      Copy code

      
       "targets": {
       "overview": {
       "viewType": "XML",
       "transition": "slide",
       "viewId": "Carrier",
       "viewName": "Carrier",
       "viewLevel": 1
       }

      Expand

3. Delete the RouteCarrier route. Then define a default route with the name overview. Assign the route to the overview target, set greedy to false and set the titleTarget to an empty string.

   1. Your implementation should look like the following :

      Code snippet

      Copy code

      
       "routes": [
       {
       "name": "overview",
       "pattern": "",
       "titleTarget": "",
       "greedy": false,
       "target": ["overview"]
       }
       ],

      Expand

4. Define a target with the name flights with the listed attributes and values.

   flights target

   Attributes	Value
   viewType	XML
   transition	slide
   viewId	Flights
   viewName	Flights
   viewLevel	2

   1. Add the flights target after the overview target with the listed attributes and values.

   2. Your implementation should look like the following :

      Code snippet

      Copy code

      
       "flights": {
       "viewType": "XML",
       "transition": "slide",
       "viewId": "Flights",
       "viewName": "Flights",
       "viewLevel": 2
       }

      Expand

5. Create a new route with the name flights after the overview route and assign the newly created target with the name flights to this new route. Add the pattern carriers/{carrid} to the route, set greedy to false and set the titleTarget to an empty string.

   1. Your implementation should look like the following :

      Code snippet

      Copy code

      
      {
       "name": "flights",
       "pattern": "carriers/{carrid}",
       "titleTarget": "",
       "greedy": false,
       "target": ["flights"]
      }
      
      

      Expand

6. Create a target with the name notFound with the listed attributes and values.

   notFound target

   Attribute	Value
   viewId	NotFound
   viewName	NotFound
   transition	show

   1. Add the notFound target after the flights target with the listed attributes and values.

   2. Your implementation should look like the following :

      Code snippet

      Copy code

      
      "notFound": {
       "viewId": "NotFound",
       "viewName": "NotFound",
       "transition": "show"
      }
      
      

      Expand

7. Extend the routing configuration in the descriptor by adding a bypassed property and setting its target to notFound. Then save your changes.

   1. Add the bypassed property and set its target to notFoundin the routing configuration.

   2. Use the following code:

      Code snippet

      Copy code

      
      "routing": {
       "config": {
       "routerClass": "sap.m.routing.Router",
       "viewType": "XML",
       "async": true,
       "viewPath": "student00.com.sap.training.ux402.fullscreen.ux402fullscreen.view",
       "controlAggregation": "pages",
       "controlId": "app",
       "clearControlAggregation": false,
       "transition": "slide",
       "bypassed": {
       "target": ["notFound"]
       }
       }

      Expand

   3. Save your changes.

8. Check if the init function of your component contains the router initialization.

   1. Open the Component.js file.

   2. Navigate to the init function.

   3. Ensure that the router is initialized:

      Code snippet

      Copy code

      
      init: function () {
       // call the base component's init function
       UIComponent.prototype.init.apply(this, arguments);
      
       // enable routing
       this.getRouter().initialize();
      
       // set the device model
       this.setModel(models.createDeviceModel(), "device");
      }

      Expand

Implement the Carrier view and display all carriers, using the entity set UX_C_Carrier_TP. To display the list of carriers, use a sap.m.Table control. For each carrier, show the property Carrid and Carrname of the entity. Display Id as a header for the first column and Name as the header of the second column of the table.

1. Open the Carrier.view.xml file and add the following attributes to the element of type sap.m.Page:

   Attribute-value Pair for the sap.m.Page Element

   Attribute	Value
   title	{i18n>overviewPageTitle}
   id	carrierPage

   1. Use the following code:

      Code snippet

      Copy code

      
      <mvc:View controllerName="student00.com.sap.training.ux402.fullscreen.ux402fullscreen.controller.Carrier"
       xmlns:mvc="sap.ui.core.mvc" displayBlock="true"
       xmlns="sap.m">
       <Page id="carrierPage" title="{i18n>overviewPageTitle}">
       
       </Page>
      </mvc:View>
      
      

      Expand

2. Create an element of the type sap.m.Table inside the contentaggregation of the sap.m.Page and define the following attribute and value:

   Attribute-value Pair for the sap.m.Table Element

   Attribute	Value
   items	{/UX_C_Carrier_TP}
   id	carrierTable

   1. Insert the following code after the Page beginning tag :

      Code snippet

      Copy code

      
      <Table id="carrierTable" items="{/UX_C_Carrier_TP}">
      
      </Table>

      Expand

3. Specify an aggregation of the type columns inside the sap.m.Table element. Implement two sap.m.Column elements inside the columns aggregation. Add this for each sap.m.Column with an id. Use column1 as the id for the first column and use column2 for as the id the second column.

   1. Enter the following code after the Table beginning tag:

      Code snippet

      Copy code

      
       <columns>
       <Column id="column1">
      
       </Column>
       <Column id="column2">
      
       </Column>
       </columns>
      

      Expand

4. For each of the sap.m.Column elements, add one element of the type sap.m.Text, and assign the following attributes:

   Attribute-value Pairs for the sap.m.Text Elements

   Text Elements	Attributes	Values
   1	text	{i18n>columnId}
   	id	text1
   2	text	{i18n>columnName}
   	id	text2

   1. Use the following code:

      Code snippet

      Copy code

      
       <Column id="column1">
       <Text id="text1" text="{i18n>columnId}"/>
       </Column>
       <Column id="column2">
       <Text id="text2" text="{i18n>columnName}"/>
       </Column>
      

      Expand

5. Add the items aggregation to the sap.m.Table element.

   1. See the code in step 9.

6. Add an element of the type sap.m.ColumnListItem to the items aggregation with the following attribute and value.

   Attribute	Value
   id	columnListItem1

   1. See the code in step 9.

7. Add the cells aggregation to the sap.m.ColumnListItem element.

   1. See the code in step 9.

8. Add a sap.m.ObjectIdentifier element to the cells aggregation with the following attribute and value:

   Attribute-value Pair for the sap.m.ObjectIdentifier Element

   Attribute	Value
   title	{Carrid}
   id	objectIdentifier1

   1. See the code in step 9.

9. Add a sap.m.Text element to the cells aggregation (after the ObjectIdentifier) with the following attribute and value. Then save your changes.

   Attribute-value Pair for the sap.m.Text Element

   Attribute	Value
   text	{Carrname}
   id	text3

   1. Use the following code after the columns aggregation:

      Code snippet

      Copy code

      
       <items>
       <ColumnListItem id="columnListItem1" >
       <cells>
       <ObjectIdentifier id="objectIdentifier1" title="{Carrid}" />
       <Text id="text3" text="{Carrname}" />
       </cells> 
       </ColumnListItem>
       </items>
      

      Expand

   2. Save your changes. You now should have the following code:

      Code snippet

      Copy code

      
      <mvc:View controllerName="student00.com.sap.training.ux402.fullscreen.ux402fullscreen.controller.Carrier"
       xmlns:mvc="sap.ui.core.mvc" displayBlock="true"
       xmlns="sap.m">
       <Page id="carrierPage" title="{i18n>overviewPageTitle}">
       <Table id="carrierTable" items="{/UX_C_Carrier_TP}">
       <columns>
       <Column id="column1" minScreenWidth="Tablet" demandPopin="true">
       <Text id="text1" text="{i18n>columnId}"/>
       </Column>
       <Column id="column2" minScreenWidth="Tablet" demandPopin="true">
       <Text id="text2" text="{i18n>columnName}"/>
       </Column> 
       </columns>
       <items>
       <ColumnListItem id="columnListItem1">
       <cells>
       <ObjectIdentifier id="objectIdentifier1" title="{Carrid}" />
       <Text id="text3" text="{Carrname}" />
       </cells>
       </ColumnListItem>
       </items>
       </Table> 
       </Page>
      </mvc:View>
      
      

      Expand

10. Test your application. A list of carriers should appear.

    Caution

    Be aware that actual data may differ from screenshot.
    

    1. To start the application, open the context menu of your project folder and select Preview Application. Choose start-local fiori run.

    2. The application appears and displays the list of carriers. In further tasks, the Flights view and the Carrier and Flights controllers will be implemented. When a user selects an entry inside the Carriers List, the details of the selected carrier and the available flights of that carrier will then be displayed in the Flights view. The Carrid of the selected carrier will be passed as a parameter to the navigation target. Inside the navigation target, the Carrid will be used for the binding.

We now want to react to the selection of a carrier from the carriers table. Therefore, implement an event handler for the press event of the ColumnListItem element. Name the function onPress. Read the property Carridfrom the selected item. Furthermore, set the type attribute of the ColumnListItem element to Navigation. In this task, we will adjust the Carrier.view.xml file.

1. Open the Carrier.view.xml file and assign an event handler function with the name onPress to the press event of the ColumnListItem element.

   1. Add the press attribute to the ColumnListItem :

      Code snippet

      Copy code

      press="onPress"

      Expand

2. Add the attribute type to the ColumnListItem element and assign the value Navigation to the attribute. Then save your changes.

   1. Add the type attribute to the ColumnListItem:

      Code snippet

      Copy code

      type="Navigation"

      Expand

   2. Save your changes. You now should have the following code:

      Code snippet

      Copy code

      
      <ColumnListItem id="columnListItem1" press="onPress" type="Navigation" >
       <cells>
       <ObjectIdentifier id="objectIdentifier1" title="{Carrid}" />
       <Text id="text3" text="{Carrname}" />
       </cells>
      </ColumnListItem>
      
      

      Expand

In the following task, you must implement the onPress function in the Carrier view controller. The onPress function reads the property Carrid from the event initiator. After reading the property, the route flights will be invoked and the id of the airline/carrier is passed as argument to the route.

1. Open the Carrier.controller.js file and remove the onInit function.

   1. Open the Carrier.controller.js file.

   2. Remove the onInit function.

      Code snippet

      Copy code

      
      sap.ui.define([
       "sap/ui/core/mvc/Controller"
      ],
       /**
       * @param {typeof sap.ui.core.mvc.Controller} Controller
       */
       function (Controller) {
       "use strict";
       return Controller.extend("student00.com.sap.training.ux402.fullscreen.ux402fullscreen.controller.Carrier", {
      
       });
       });
      
      

      Expand

2. Implement a function getRouter in the view controller of the carrier view. The function should return the reference to the router object of the component.

   1. Use the following code:

      Code snippet

      Copy code

      
      getRouter: function () {
       return sap.ui.core.UIComponent.getRouterFor(this);
      }

      Expand

3. Add an event handler function with the name onPress to the controller implementation of the carrier view controller. The function takes one argument with the name oEvent.

   1. Add a function with the name onPress. The function should take one argument called oEvent. Use the following code:

      Code snippet

      Copy code

       onPress: function(oEvent) {
      
      }

      Expand

4. Read the property Carrid from the binding context of the event initiator and store the value in a local variable, sCarrid.

   1. Declare a variable with the name oItem and assign the event-source object to the variable.

   2. Declare a variable with the name oCtx and assign the binding context from the event source object to the variable.

   3. Declare a variable sCarrid. Read the value of the property Carrid from the oCtx-Object using the function getProperty and assign the result to the variable sCarrid.

   4. Your implementation inside the onPress function should look like the following:

      Code snippet

      Copy code

      
      var oItem = oEvent.getSource();
      var oCtx = oItem.getBindingContext();
      var sCarrid = oCtx.getProperty("Carrid");

      Expand

5. Navigate to the Flights view using the route flights defined in the previous step. Pass the value of sCarrid to the route as an argument using the property carrierId. Use the navTo function of the router for triggering the navigation.

   1. Use the following code after the variables definition :

      Code snippet

      Copy code

      
      this.getRouter().navTo("flights", {
       carrid: sCarrid
      }, false);

      Expand

   2. Your controller implementation should look like the following:

   3. Save your changes. You now should have the following code:

      Code snippet

      Copy code

      
      return Controller.extend("student00.com.sap.training.ux402.fullscreen.ux402fullscreen.controller.Carrier", {
       getRouter: function () {
       return sap.ui.core.UIComponent.getRouterFor(this);
       },
      
       onPress: function(oEvent) {
       var oItem = oEvent.getSource();
       var oCtx = oItem.getBindingContext();
       var sCarrid = oCtx.getProperty("Carrid");
      
       this.getRouter().navTo("flights", {
       carrid: sCarrid
       }, false);
       }
      });
      
      

      Expand

Implement the Flights view. The page should show the navBack button and the button is active. The implementation of the page should contain two main elements. The first element is of the type, sap.m.ObjectHeader. The object header element shows some details of the selected carrier. The second element is an element of type, sap.m.Table. The table shows the list of flights for the selected carrier.

1. Open the Flights.view.xml file and add an XML-alias l to your Flights view pointing to sap.ui.layout.

   1. Open the Flights.view.xml file with the Code Editor of the SAP Business Application Studio.

   2. Add an XML-alias l to your Flights view pointing to sap.ui.layout.

   3. Enter the following code after xmlns="sap.m" :

      Code snippet

      Copy code

      xmlns:l="sap.ui.layout"

      Expand

2. Add the following attributes to the element of type, sap.m.Page:

   Attribute-value Pairs for the sap.m.Page Element

   Attribute	Value
   navButtonPress	onNavBack
   showNavButton	true
   title	{Carrname}
   id	flightsPage

   1. Enter the following code for the Page element :

      Code snippet

      Copy code

      <Page id="idFlightsPage" navButtonPress="onNavBack" showNavButton="true" title="{Carrname}">

      Expand

3. Add a sap.ui.layout.VerticalLayout element to the content aggregation of your sap.m.Page element

   1. Add the following code:

      Code snippet

      Copy code

      
       <content>
       <l:VerticalLayout id="verticalLayout">
      
       </l:VerticalLayout>
       </content>
      
      

      Expand

4. Implement the sap.m.ObjectHeader element in the Flights view. Add it to the sap.ui.layout.VerticalLayout element and bind the following attributes of the ObjectHeader to the model:

   Attribute-binding Pairs for the sap.m.ObjectHeader Element

   Attribute	Binding
   title	{Carrname}
   number	Bound to empty String
   titleHref	{Url}
   numberUnit	{Currcode}
   id	objectHeader

   1. Add the following code inside the VerticalLayout element :

      Code snippet

      Copy code

      
      <ObjectHeader id="objectHeader" title="{Carrname}" number="" numberUnit="{Currcode}" titleHref="{Url}">
      
      </ObjectHeader>
      
      

      Expand

5. Add the aggregation attributes to the ObjectHeaderelement and add two elements of the type sap.m.ObjectAttribute to the attributes aggregation of the ObjectHeader element.

   1. Add the following code inside the ObjectHeader element:

      Code snippet

      Copy code

      
      <attributes>
       <ObjectAttribute/>
       <ObjectAttribute/>
      </attributes>
      
      

      Expand

6. Assign the following attributes to the two sap.m.ObjectAttributeselements:

   Attribute-value Pairs for the sap.m.ObjectAttribute Elements

   Element	Attribute	Value
   1	text	{Carrid}
   	id	objectAttribute1
   2	text	{Url}
   	id	objectAttribute2

   1. Use the following code for the first ObjectAttribute element:

      Code snippet

      Copy code

      id="objectAttribute1" text="{Carrid}"

      Expand

   2. Use the following code for the second ObjectAttribute element:

      Code snippet

      Copy code

      id="objectAttribute2" text="{Url}"

      Expand

   3. You now should have the following code:

      Code snippet

      Copy code

      
      <ObjectHeader id="objectHeader" title="{Carrname}" number="" numberUnit="{Currcode}" titleHref="{Url}">
       <attributes>
       <ObjectAttribute id="objectAttribute1" text="{Carrid}" />
       <ObjectAttribute id="objectAttribute2" text="{Url}" />
       </attributes>
      </ObjectHeader>
      
      

      Expand

7. Add a sap.m.Table element to the content aggregation and add the following attributes to the Table element:

   Attribute-value Pairs for the sap.m.Table Element

   Attribute	Value
   id	idFlights
   mode	SingleSelectMaster
   growing	true
   growingThreshold	10

   1. Add the following code after the VerticalLayout element:

      Code snippet

      Copy code

      
      <Table id="idFlights"
       mode="SingleSelectMaster"
       growing="true"
       growingThreshold="10">
      </Table>

      Expand

8. Bind the attribute items of the table to the to_Flight entity set and define that the flights should be sorted by the Carrid property. 

   1. Add the following code between id and mode attributes:

      Code snippet

      Copy code

      items="{path: 'to_Flight', sorter: {path: 'Carrid'}}"

      Expand

   2. You now should have the following code:

      Code snippet

      Copy code

      
      <Table id="idFlights" 
       items="{path: 'to_Flight', sorter: {path: 'Carrid'}}" 
       mode="SingleSelectMaster" 
       growing="true" 
       growingThreshold="10">
      </Table>
      
      

      Expand

9. Add the headerToolbar aggregation to the Table element, and add a sap.m.Toolbar element to the headerToolbar aggregation with the following attributes and values.

   Attribute	Value
   id	toolbar1

   1. Add the following code inside the Table element:

      Code snippet

      Copy code

      
      <headerToolbar>
       <Toolbar id="toolbar1">
      
       </Toolbar>
      </headerToolbar>
      

      Expand

10. Add a sap.m.Title element to the Toolbar element with the following attributes and values.

    Attribute-value Pairs for the sap.m.Title Element

    Attribute	Value
    text	Flights
    level	H2
    id	title1

    1. Add the following code inside the Toolbar element:

       Code snippet

       Copy code

       <Title id="title1" text="Flights" level="H2" />
       
       

       Expand

    2. You now should have the following code:

       Code snippet

       Copy code

       
       <headerToolbar>
        <Toolbar id="toolbar1">
        <Title id="title1" text="Flights" level="H2" />
        </Toolbar>
       </headerToolbar>
       
       

       Expand

11. Add the columns aggregation to the Table element and add five elements of the type sap.m.Column to the columns aggregation with the following attributes and values.

    Element	Attribute	Value
    1	id	column1
    2	id	column2
    3	id	column3
    4	id	column4

    1. Enter the following code after the headerToolbar element:

       Code snippet

       Copy code

       
       <columns>
        <Column id="column1">
       
        </Column>
        <Column id="column2">
       
        </Column>
        <Column id="column3">
       
        </Column>
        <Column id="column4">
       
        </Column>
       </columns>

       Expand

12. To each of the sap.m.Column elements, add one element of the type sap.m.Text and assign the following attributes:

    Attribute-value Pairs for the sap.m.Text Elements

    Text-elements and attribute		Value
    1	text	{i18n>carriername}
    	id	text1
    2	text	{i18n>flightdate}
    	id	text2
    3	text	{i18n>seatmax}
    	id	text3
    4	text	{i18n>seatocc}
    	id	text4

    1. Add the following code inside the first Column element:

       Code snippet

       Copy code

       <Text id="text1" text="{i18n>carriername}" />
       
       

       Expand

    2. Add the following code inside the second Column element:

       Code snippet

       Copy code

       <Text id="text2" text="{i18n>flightdate}" />
       
       

       Expand

    3. Add the following code inside the third Column element:

       Code snippet

       Copy code

       <Text id="text3" text="{i18n>seatmax}" />
       
       

       Expand

    4. Add the following code inside the fourth Column element:

       Code snippet

       Copy code

       <Text id="text4" text="{i18n>seatocc}" />
       
       

       Expand

    5. You now should have the following code:

       Code snippet

       Copy code

       
       <columns>
        <Column id="column1">
        <Text id="text1" text="{i18n>carriername}" />
        </Column>
        <Column id="column2">
        <Text id="text2" text="{i18n>flightdate}" />
        </Column>
        <Column id="column3">
        <Text id="text3" text="{i18n>seatmax}" />
        </Column>
        <Column id="column4">
        <Text id="text4" text="{i18n>seatocc}" />
        </Column>
       </columns>
       
       

       Expand

13. Add the items aggregation to the Tableelement.

    1. Enter the following code after the columns element:

       Code snippet

       Copy code

       <items>
       
       </items>

       Expand

14. Add an element of the type sap.m.ColumnListItem to the items aggregation.

    Attribute	Value
    id	columnListItem1

    1. Add the following code inside the items element:

       Code snippet

       Copy code

       <ColumnListItem id="columnListItem1">
       
       </ColumnListItem>
       

       Expand

15. Add the cells aggregation to the ColumnListItem element.

    1. Add the following code inside the ColumnListItem element:

       Code snippet

       Copy code

       <cells>
       
       </cells>

       Expand

16. Add an sap.m.ObjectIdentifier element with the following attributes to the cells aggregation:

    Attribute-value Pairs for the sap.m.ObjectIdentifier Element

    Attribute	Binding
    title	{Carrid}
    text	{Carrid}
    id	objectIdentifier1

    1. Add the following code inside the cells element:

       Code snippet

       Copy code

       <ObjectIdentifier id="objectIdentifier1" title="{Carrid}" text="{Carrid}" />
       

       Expand

17. Add four sap.m.Text elements to the cells aggregation and add the following attributes and bindings to the Text elements:

    Attribute-value Pairs for the sap.m.Text Elements

    Element	Attribute	Value/Binding	Type
    1	text	Fldate	sap.ui.model.type.Date
    	id	text5
    2	text	{Seatsmax}
    	id	text6
    3	text	{Seatsocc}
    	id	text7

    1. Add the following code after the ObjectIdentifier element:

       Code snippet

       Copy code

       <Text id="text5" text="{path: 'Fldate', type: 'sap.ui.model.type.Date'}" />
       <Text id="text6" text="{Seatsmax}" />
       <Text id="text7" text="{Seatsocc}" />
       

       Expand

    2. You now should have the following code:

       Code snippet

       Copy code

       
       <items>
        <ColumnListItem id="columnListItem1">
        <cells>
        <ObjectIdentifier id="objectIdentifier1" title="{Carrid}" text="{Carrid}" />
        <Text id="text5" text="{path: 'Fldate', type: 'sap.ui.model.type.Date'}" />
        <Text id="text6" text="{Seatsmax}" />
        <Text id="text7" text="{Seatsocc}" />
        </cells>
        </ColumnListItem>
       </items>
       

       Expand

1. Implement a function getRouter in the view controller of the flights view. The function should return the reference to the router object of the component.

   1. Open the Flights.controller.js file.

   2. Add a getRouter function using the following code (don't forget to add a coma after the onInit function):

      Code snippet

      Copy code

      
      getRouter: function () {
      return sap.ui.core.UIComponent.getRouterFor(this);
      }

      Expand

2. Implement the onInit function of the Flights controller. Register a function _onObjectMatched for the route flights. The function will be implemented in one of the next steps.

   1. Locate the onInit function.

   2. Create a variable with the name oRouterand assign a reference to router. Use the following code:

      Code snippet

      Copy code

      var oRouter = this.getRouter();

      Expand

   3. Register the function _onObjectMatched when the route flights is matched. Enter the following code:

      Code snippet

      Copy code

      oRouter.getRoute("flights").attachMatched(this._onObjectMatched, this);

      Expand

   4. You now should have the following code:

      Code snippet

      Copy code

      
      onInit: function () {
       var oRouter = this.getRouter();
       oRouter.getRoute("flights").attachMatched(this._onObjectMatched, this);
      },

      Expand

3. Implement the function _onObjectMatched. The function should read the property carrierId from the event parameter arguments and bind the view to the selected carrier. Register the _onBindingChange function for the change event. Then register anonymous event handler functions for the events dataRequestedand dataReceived. When the event dataRequested occurs, the view should be set into the busy mode, and when dataReceivedoccurs, the busy mode should be set to false. In this step, create a function _onObjectMatched with one invocation parameter called oEvent. Then retrieve the parameter with the name arguments from the event object, read the property Carrid and store the value in a local variable _sCarrierId. In addition, get the view and assign it to the local variable oView.

   1. Create a function _onObjectMatched with one invocation parameter called oEvent. Add the following code after the getRouter function (don't forget to add a coma) :

      Code snippet

      Copy code

      _onObjectMatched: function (oEvent) {
      
      }

      Expand

   2. Retrieve the parameter with the name arguments from the event object. Assign it to a variable called oArgs. Add the following code to the function:

      Code snippet

      Copy code

      var oArgs = oEvent.getParameter("arguments");

      Expand

   3. Read the property carrierId from the oArgs object and assign the result to a member variable called _sCarrierId. Add the following code:

      Code snippet

      Copy code

      this._sCarrierId = oArgs.carrid;

      Expand

   4. Get a reference to the view object and assign the reference to a local variable called oView. Add the following code:

      Code snippet

      Copy code

      var oView = this.getView();

      Expand

4. Call the function bindElement on the view object. Pass a literal object to the function.

   1. Enter the following code:

      Code snippet

      Copy code

      oView.bindElement({
      
      });

      Expand

5. Add the property path to the literal object and assign the binding to the selected Carrier using the _sCarrierId variable.

   1. Add the following code to the bindElement function:

      Code snippet

      Copy code

      path: "/UX_C_Carrier_TP('" + this._sCarrierId + "')",

      Expand

6. Add a property events to the literal object. Assign another literal object to the property.

   1. Add the following code after the path property specification:

      Code snippet

      Copy code

      events: {
      
      }

      Expand

7. Call the _onBindingChange function for the event change. The function will be implemented in a later step.

   1. Add the following code to the events definition:

      Code snippet

      Copy code

      change: this._onBindingChange.bind(this),

      Expand

8. Add a function for the event dataRequested and implement the function in a way that the view is set to busy.

   1. Add the following code after the change event specification:

      Code snippet

      Copy code

      
      dataRequested: function () {
       oView.setBusy(true);
      },

      Expand

9. Add a function for the event dataReceived and implement the function in a way that the view is set to not busy.

   1. Add the following code after the dataRequested event specification:

      Code snippet

      Copy code

      
      dataReceived: function () {
       oView.setBusy(false);
      }

      Expand

   2. You now should have the following code:

      Code snippet

      Copy code

      
      _onObjectMatched: function (oEvent) {
       var oArgs = oEvent.getParameter("arguments");
       this._sCarrierId = oArgs.carrid;
       var oView = this.getView();
      
       oView.bindElement({
       path: "/UX_C_Carrier_TP('" + this._sCarrierId + "')",
       events: {
       change: this._onBindingChange.bind(this),
       dataRequested: function () {
       oView.setBusy(true);
       },
       dataReceived: function () {
       oView.setBusy(false);
       }
       }
       });
      },
      
      

      Expand

10. Add a function _onBindingChange to the controllers implementation. Get the element binding from the view. If the element binding has no bound context, the NotFound view should be displayed. Get a reference to the target's helper object of the router and call display("notFound").

    1. Enter the following code after the _onObjectMatched function implementation:

       Code snippet

       Copy code

       
       _onBindingChange: function () {
        var oElementBinding;
       
        oElementBinding = this.getView().getElementBinding();
       
        // No data for the binding 
        if (oElementBinding && !oElementBinding.getBoundContext()) {
        this.getRouter().getTargets().display("notFound");
        }
       },

       Expand

11. Add a function onNavBack to the controllers implementation. If the previous hash is undefined, use the navTo function of the router with the overview route. Then save your changes.

    1. Add the following code after the _onBindingChange function implementation:

       Code snippet

       Copy code

       
       onNavBack: function () {
        var oHistory, sPreviousHash;
       
        oHistory = sap.ui.core.routing.History.getInstance();
        sPreviousHash = oHistory.getPreviousHash();
       
        if (sPreviousHash !== undefined) {
        window.history.go(-1);
        } else {
        this.getRouter().navTo("overview", true /*no history*/);
        }
       }

       Expand

    2. Save all of your changes.

1. Open the NotFound.view.xml file and remove the sap.m.Page element.

   1. Open the NotFound.view.xml file with the Code Editor of the SAP Business Application Studio.

   2. Make sure that the sap.m.Page element is removed.

   3. Should have the following:

      Code snippet

      Copy code

      
      <mvc:View 
       controllerName="student00.com.sap.training.ux402.fullscreen.ux402fullscreen.controller.NotFound"
       xmlns:mvc="sap.ui.core.mvc" displayBlock="true"
       xmlns="sap.m">
      </mvc:View>
      

      Expand

2. Add an sap.m.MessagePage element with the following attribute-value pairs to the view implementation of your NotFound.view.xml file. Then save your changes.

   Attribute-value Pairs for the sap.m.MessagePage Element

   Attribute	Value
   title	{i18n>notFoundMessageTitle}
   text	{i18n>notFoundMessageText}
   description	{i18n>notFoundMessageDescription}
   showNavButton	true
   navButtonPress	onNavBack
   id	messagePage1

   1. Add the following implementation:

      Code snippet

      Copy code

      <MessagePage id="messagePage1" 
       title="{i18n>notFoundMessageTitle}"
       text="{i18n>notFoundMessageText}"
       description="{i18n>notFoundMessageDescrition}"
       showNavButton="true"
       navButtonPress="onNavBack"/>

      Expand

   2. Save your changes.

3. Remove the onInit function in the NotFound.controller.js file.

   1. Open the NotFound.controller.js file located in the controller folder of your project.

   2. Remove the onInit function.

      

4. Implement a function getRouter in the NotFound.controller.js file. The function should return the router instance of your application.

   1. If the NotFound.controller.js file is not yet open, then open it and add the following implementation:

      Code snippet

      Copy code

      
      getRouter: function() {
       return sap.ui.core.UIComponent.getRouterFor(this);
      },

      Expand

5. Implement the function onNavBack in the NotFound.controller.js file. If the previous hash is undefined, use the navTo function of the router with the overview route. Then save your changes.

   1. Implement the onNavBack function as shown below.

      Code snippet

      Copy code

      
      onNavBack: function() {
       var oHistory, sPreviousHash;
      
       oHistory = sap.ui.core.routing.History.getInstance();
       sPreviousHash = oHistory.getPreviousHash();
      
       if (sPreviousHash !== undefined) {
       window.history.go(-1);
       } else {
       this.getRouter().navTo("overview", true /*no history*/);
       }
      }

      Expand

   2. Save your changes.

1. Test your application. Choose a carrier to see the corresponding flights. The Flights view should be displayed.

   Caution

   Be aware that actual data may differ from the screenshot.
   

   1. Perform this step in the way it was shown in a previous exercise.

2. Try to navigate to a URL for which no route exists. The NotFound view should be displayed.

   

   1. In the URL field of your browser, exchange the carrier id at the end with something that does not exist (like XX for example) and press Enter (on your keyboard).

   2. The Not Found view should display.

1. Run the application, ux402_fullscreen, again.

   1. Perform this step as shown in a previous exercise.

2. With the help of Chrome DevTools, choose the large screen size of 1142 x 764 to preview how the application might look in a desktop browser. Select a carrier from the list of carriers and notice that the table for the flights has plenty of room for each field.

   1. Press F12 (on your keyboard) to access Chrome DevTools.

   2. Choose Toggle device toolbar.

      

   3. Set the screen size to 1142 x 764 and press Enter (on your keyboard).

      

   4. Select a carrier from the list of carriers. Take note that the table for the flights has plenty of room for each field.

      

3. With the help of Chrome DevTools, choose a smaller screen size of 324 x 480 to preview how the application might look on a mobile browser. Take note that the table for the flights has adjusted poorly to the new size.

   1. Set the screen size to 324 x 480 and press Enter (on your keyboard).

      

   2. Notice that the table for the flights has adjusted poorly to the new size. Text fields are wrapped and difficult to read.

      

1. Open the Carrier.view.xml file and add it to each of the Column elements amongst the following attributes. Then save your changes.

   Attribute-value Pairs for the Column Elements

   Attribute	Value
   minScreenWidth	Tablet
   demandPopin	true

   1. Open the Carrier.view.xml file.

   2. Add the following code to each Column definition:

      Code snippet

      Copy code

      minScreenWidth="Tablet" demandPopin="true"

      Expand

   3. For additional information about demandPopin visit the following URL: https://sapui5.netweaver.ondemand.com/sdk/#/api/sap.m.Column%23controlProperties

   4. Save your changes. You now should have the following code:

      Code snippet

      Copy code

      
      <columns>
       <Column id="column1" minScreenWidth="Tablet" demandPopin="true">
       <Text id="text1" text="{i18n>columnId}"/>
       </Column>
       <Column id="column2" minScreenWidth="Tablet" demandPopin="true">
       <Text id="text2" text="{i18n>columnName}"/>
       </Column> 
      </columns>
      
      

      Expand

1. Open the Flights.view.xml file.

   1. Perform this step as shown in a previous exercise.

2. Add the following attribute to the first element of type, Column:

   Attribute-value Pair for the first Column Element

   Attribute	Value
   width	12em

   1. Add the following code to the first Column definition:

      Code snippet

      Copy code

      width="12em"

      Expand

3. Add the following attribute to the last element of typeColumn:

   Attribute-value pair for the last Column element

   Attribute	Value
   hAlign	Right

   1. Add the following code to the last Column definition:

      Code snippet

      Copy code

      hAlign="Right"

      Expand

4. Add the following attributes to the other elements of type Column. Then save your changes.

   Attribute-value Pairs for the second, third and fourth Column Elements

   Attribute	Value
   minScreenWidth	Tablet
   demandPopin	true

   1. Add the following code to the other two Column definition:

      Code snippet

      Copy code

      minScreenWidth="Tablet" demandPopin="true"

      Expand

   2. Save your changes. You now should have the following code:

      Code snippet

      Copy code

      
      <columns>
       <Column id="column1" width="12em">
       <Text id="text1" text="{i18n>carriername}" />
       </Column>
       <Column id="column2" minScreenWidth="Tablet" demandPopin="true">
       <Text id="text2" text="{i18n>flightdate}" />
       </Column>
       <Column id="column3" minScreenWidth="Tablet" demandPopin="true">
       <Text id="text3" text="{i18n>seatmax}" />
       </Column>
       <Column id="column4" hAlign="Right">
       <Text id="text4" text="{i18n>seatocc}" />
       </Column>
      </columns>
      
      

      Expand

1. Start your application for the test.

   1. Perform this step as shown in a previous exercise.

2. With the help of Chrome DevTools, choose the large screen size of 1142 x 764 to preview how the application would look in a desktop browser. Then select a carrier from the list of carriers. Take note that the table for the flights has plenty of room for each field.

   

   1. Press F12 (on your keyboard) to access Chrome DevTools.

   2. Set the screen size to 1142 x 764.

      

   3. Select a carrier from the list of carriers.

   4. Notice that the table for the flights has plenty of room for each field.

3. With the help of Chrome DevTools, choose a smaller screen size of 324 x 700 to preview how the application will look on a mobile browser. Notice that the table for the flights has adjusted well to the new size.

   

   1. Set the screen size to 324 x 700.

      

   2. Notice the table for the flights has adjusted well to the new size.

   3. Close and stop the application.

4. Since we will further develop your fullscreen project in a following exercise, you can save the current state of the project by downloading it. Select the UX402_fullscreen project and from the context menu, choose Download.