Developing a Full-screen Application

Objectives
After completing this lesson, you will be able to:

After completing this lesson, you will be able to:

  • Develop a full-screen application in SAP BAS

Implement a Full-screen Application

Business Example

In this exercise, you will learn how to implement a Full-screen Application with SAPUI5.

Prerequisites

  1. Before you start this exercise, you should have already downloaded the prepared files from Github : https://github.com/SAP-samples/sapui5-development-advanced-learning-journey
  2. In the following exercises, SAP Business Application Studio is used as the development environment. It is assumed that you already have access to this development tool.

    If this is not yet the case, you can gain access to the SAP Business Application Studio free of charge using the free tier model for SAP Business Technology Platform (SAP BTP). To do this, read this tutorial Get an Account on SAP BTP to Try Out Free Tier Service Plans on how to create a free account on SAP BTP. Based on this, the video SAP Business Application Studio Free Tier Model Onboarding shows you the necessary steps to set up the free tier plan for SAP Business Application Studio.

  3. You might also want to setup your browser to allow all popups, if possible. If you are not allowed to change those settings, you will be notified each time you preview your application in Business Application Studio and have to select Open in the displayed dialog.
Note

SAP Business Technology Platform and its tools are cloud services. Due to the nature of cloud software, step procedures and naming of fields and buttons may differ from the exercise solution.

Note
In the following exercises, replace <L> with the course group and ## with your user group.
Caution
Be aware that in some cases the initial code or code of previous implementation steps is not shown. In the following steps, do not delete any existing code or code that you have added in previous steps if you are not explicitly asked. Furthermore, be aware that the screenshots show the solutions from student00 namespace; you should then replace this with your own student## one.

Task 1: Upload the metadata file to your Business Application Studio Development Space.

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.

Steps

  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 FileOpen 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.

Task 2: Create the Basic Components of the Fullscreen Application

Steps

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

    Select Template and Target Location

    FieldValue
    TemplateSAP Fiori application

    Template Selection

    FieldValue
    Template TypeSAP Fiori
    TemplateBasic

    Datasource and Service Selection

    FieldValue
    Data sourceUpload a Metadata Document
    Metadata file path/home/user/projects/Training files/metadata.xml

    View name

    FieldValue
    View nameCarrier

    Project Attributes

    FieldValue
    Module nameux402_fullscreen
    Application titleFull-screen Application
    Application namespacestudent##.com.sap.training.ux402.fullscreen
    DescriptionA Full-screen Application
    Project folder path/home/user/project
    Minimum SAPUI5 versionLet it on default value
    1. Choose FileNew 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 NameController File Name
    Flights.view.xmlFlights.controller.js
    NotFound.view.xmlNotFound.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.

Task 3: Prepare the Internationalized Texts for the Application

Steps

  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

    KeyValue
    overviewPageTitleCarriers
    columnIdId
    columnNameName
    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

    KeyValue
    idLabelTextId
    nameLabelTextName
    currLabelTextCurrency
    urlLabelTextUrl
    carriernameName
    flightnoFlight­No
    flightdateFlight date
    seatmaxSeat max.
    seatoccSeat 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

    KeyValue
    notFoundMessageTitleNot Found
    notFoundMessageTextSorry, but the requested resource is not available.
    notFoundMessageDescriptionCheck 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.

Task 4: Check and Configure the Routing

Steps

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

    Routing configuration

    Configuration ParameterValue
    routerClasssap.m.routing.Router
    viewTypeXML
    asynctrue
    viewPathstudent##.com.sap.training.ux402.fullscreen.ux402fullscreen.view
    controlAggregationpages
    controlIdapp
    transitionslide
    clearControlAggregationfalse
    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
      
      "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

    AttributeValue
    viewTypeXML
    transitionslide
    viewIdCarrier
    viewNameCarrier
    viewLevel1
    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
      
       "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
      
       "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

    AttributesValue
    viewTypeXML
    transitionslide
    viewIdFlights
    viewNameFlights
    viewLevel2
    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
      
       "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
      
      {
       "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

    AttributeValue
    viewIdNotFound
    viewNameNotFound
    transitionshow
    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
      
      "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
      
      "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
      
      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

Task 5: Define the Main List View Content

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.

Steps

  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

    AttributeValue
    title{i18n>overviewPageTitle}
    idcarrierPage
    1. Use the following code:

      Code snippet
      
      <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

    AttributeValue
    items{/UX_C_Carrier_TP}
    idcarrierTable
    1. Insert the following code after the Page beginning tag :

      Code snippet
      
      <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
      
       <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 ElementsAttributesValues
    1text{i18n>columnId}
    idtext1
    2text{i18n>columnName}
    idtext2
    1. Use the following code:

      Code snippet
      
       <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.

    AttributeValue
    idcolumnListItem1
    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

    AttributeValue
    title{Carrid}
    idobjectIdentifier1
    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

    AttributeValue
    text{Carrname}
    idtext3
    1. Use the following code after the columns aggregation:

      Code snippet
      
       <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
      
      <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.

Task 6: Add a Control for Navigation

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.

Steps

  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
      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
      type="Navigation"
      Expand
    2. Save your changes. You now should have the following code:

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

Task 7: Implement the Carrier View Behavior for Navigation

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.

Steps

  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
      
      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
      
      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
       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
      
      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
      
      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
      
      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

Task 8: Define the Flights View content

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.

Steps

  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
      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

    AttributeValue
    navButtonPressonNavBack
    showNavButtontrue
    title{Carrname}
    idflightsPage
    1. Enter the following code for the Page element :

      Code snippet
      <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
      
       <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

    AttributeBinding
    title{Carrname}
    numberBound to empty String
    titleHref{Url}
    numberUnit{Currcode}
    idobjectHeader
    1. Add the following code inside the VerticalLayout element :

      Code snippet
      
      <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
      
      <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

    ElementAttributeValue
    1text{Carrid}
     idobjectAttribute1
    2text{Url}
     idobjectAttribute2
    1. Use the following code for the first ObjectAttribute element:

      Code snippet
      id="objectAttribute1" text="{Carrid}"
      Expand
    2. Use the following code for the second ObjectAttribute element:

      Code snippet
      id="objectAttribute2" text="{Url}"
      Expand
    3. You now should have the following code:

      Code snippet
      
      <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

    AttributeValue
    ididFlights
    modeSingleSelectMaster
    growingtrue
    growingThreshold10
    1. Add the following code after the VerticalLayout element:

      Code snippet
      
      <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
      items="{path: 'to_Flight', sorter: {path: 'Carrid'}}"
      Expand
    2. You now should have the following code:

      Code snippet
      
      <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.

    AttributeValue
    idtoolbar1
    1. Add the following code inside the Table element:

      Code snippet
      
      <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

    AttributeValue
    textFlights
    levelH2
    idtitle1
    1. Add the following code inside the Toolbar element:

      Code snippet
      <Title id="title1" text="Flights" level="H2" />
      
      
      Expand
    2. You now should have the following code:

      Code snippet
      
      <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.

    ElementAttributeValue
    1idcolumn1
    2idcolumn2
    3idcolumn3
    4idcolumn4
    1. Enter the following code after the headerToolbar element:

      Code snippet
      
      <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 attributeValue
    1text{i18n>carriername}
    idtext1
    2text{i18n>flightdate}
    idtext2
    3text{i18n>seatmax}
    idtext3
    4text{i18n>seatocc}
    idtext4
    1. Add the following code inside the first Column element:

      Code snippet
      <Text id="text1" text="{i18n>carriername}" />
      
      
      Expand
    2. Add the following code inside the second Column element:

      Code snippet
      <Text id="text2" text="{i18n>flightdate}" />
      
      
      Expand
    3. Add the following code inside the third Column element:

      Code snippet
      <Text id="text3" text="{i18n>seatmax}" />
      
      
      Expand
    4. Add the following code inside the fourth Column element:

      Code snippet
      <Text id="text4" text="{i18n>seatocc}" />
      
      
      Expand
    5. You now should have the following code:

      Code snippet
      
      <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
      <items>
      
      </items>
      Expand
  14. Add an element of the type sap.m.ColumnListItem to the items aggregation.

    AttributeValue
    idcolumnListItem1
    1. Add the following code inside the items element:

      Code snippet
      <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
      <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

    AttributeBinding
    title{Carrid}
    text{Carrid}
    idobjectIdentifier1
    1. Add the following code inside the cells element:

      Code snippet
      <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

    ElementAttributeValue/BindingType
    1textFldatesap.ui.model.type.Date
    idtext5 
    2text{Seatsmax} 
    idtext6 
    3text{Seatsocc} 
    idtext7 
    1. Add the following code after the ObjectIdentifier element:

      Code snippet
      <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
      
      <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

Task 9: Implement the Flights View Behavior for Navigation

Steps

  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
      
      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
      var oRouter = this.getRouter();
      Expand
    3. Register the function _onObjectMatched when the route flights is matched. Enter the following code:

      Code snippet
      oRouter.getRoute("flights").attachMatched(this._onObjectMatched, this);
      Expand
    4. You now should have the following code:

      Code snippet
      
      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
      _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
      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
      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
      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
      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
      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
      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
      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
      
      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
      
      dataReceived: function () {
       oView.setBusy(false);
      }
      Expand
    2. You now should have the following code:

      Code snippet
      
      _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
      
      _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
      
      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.

Task 10: Implement the UI for Not Found elements

Steps

  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
      
      <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

    AttributeValue
    title{i18n>notFoundMessageTitle}
    text{i18n>notFoundMessageText}
    description{i18n>notFoundMessageDescription}
    showNavButtontrue
    navButtonPressonNavBack
    idmessagePage1
    1. Add the following implementation:

      Code snippet
      <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
      
      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
      
      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.

Task 11: Test your Application

Steps

  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.

Task 12: Test your Application for Responsiveness

Steps

  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.

Task 13: Adjust the Carrier View for a Mobile Device

Steps

  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

    AttributeValue
    minScreenWidthTablet
    demandPopintrue
    1. Open the Carrier.view.xml file.

    2. Add the following code to each Column definition:

      Code snippet
      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
      
      <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

Task 14: Adjust the Flights View for a Mobile Device

Steps

  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

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

      Code snippet
      width="12em"
      Expand
  3. Add the following attribute to the last element of typeColumn:

    Attribute-value pair for the last Column element

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

      Code snippet
      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

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

      Code snippet
      minScreenWidth="Tablet" demandPopin="true"
      Expand
    2. Save your changes. You now should have the following code:

      Code snippet
      
      <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

Task 15: Test your Application Again

Steps

  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.

Log in to track your progress & complete quizzes