Business Example
In this exercise, you will learn how to implement a Full-screen Application with SAPUI5.
Prerequisites
- 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
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.
- 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
Make sure you have downloaded the files from the Github repository, https://github.com/SAP-samples/sapui5-development-advanced-learning-journey
Go to https://github.com/SAP-samples/sapui5-development-advanced-learning-journey
When you are in the repository, select the Code button and then Download ZIP.
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.
Log into the training SAP Business Application Studio.
Perform this step, as shown in a previous training.
Upload the metadata.xml file to your Business Application Studio, in a Training files folder.
Select the menu File → Open Folder....
Select or Enter the /home/user/projects/ folder and choose OK.
Click anywhere in the blank space of the Explorer, press the right mouse button, and select New Folder....
Enter Training files in the input field and choose the Enter key (on your keyboard).
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
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 Choose File → New Project from Template in the SAP Business Application Studio.
Choose SAP Fiori Application and select Start.
For Template Type, choose SAP Fiori.
Choose Basic and select Next.
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.
Insert Carrier as view name, and then select Next.
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.
Select Finish.
Change the flag flexEnabled to false.
Open the file, manifest.json.
Scroll down to the sap.ui5 configuration.
Change the flexEnabled property from true to false.
Upload the JSON files for mock data into a new webapp/localService/data folder.
In the context menu of the webapp/localService folder, select New folder....
A new line appears where you can enter the new folder name: data. Press Enter (on your keyboard) to confirm.
In the context menu of the webapp/localService/data folder, select Upload....
Select the three mockdata JSON files downloaded from Github and choose Open.
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 Select the Carrier.view.xml file in the view folder of your project and from the context menu, choose Copy.
Select the view folder of your project and from the context menu, choose Paste.
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.
In the opened Flights.view.xml file, edit the controllerName attribute and replace Carrier with Flights.
Select the Carrier.controller.js file in the controller folder of your project and from the context menu, choose Copy.
Select the controller folder of your project and, from the context menu, choose Paste.
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.
In the opened Flights.controller.js file, change the controller name in the extend function by replacing Carrier with Flights. Save your changes.
Repeat steps a to f and create a NotFound view with the corresponding controller.
Save your changes and close all tabs.
Task 3: Prepare the Internationalized Texts for the Application
Steps
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 Open the i18n.properties file in the i18n folder of your project. Add the aforementioned mentioned key-value pairs to the file.
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 FlightNo flightdate Flight date seatmax Seat max. seatocc Seat occ. If the i18n.properties file is not already open, open it. Add the aforementioned key-value pairs to the file.
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. If the i18n.properties file is not already open, open it. Add the above mentioned key-value pairs to the file.
Save your changes.
Task 4: Check and Configure the Routing
Steps
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 Open the file manifest.json.
Locate the routing configuration, config.
Make sure that the listed configuration parameters are included.
Your implementation should look like the following code:
Code SnippetCopy codeSwitch to dark mode123456789101112"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" },
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 Find the targets configuration and rename the TargetCarrier target to overview.
Check the listed attributes and values and modify accordingly.
Your implementation should look like the following :
Code SnippetCopy codeSwitch to dark mode123456789"targets": { "overview": { "viewType": "XML", "transition": "slide", "viewId": "Carrier", "viewName": "Carrier", "viewLevel": 1 }
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.
Your implementation should look like the following :
Code SnippetCopy codeSwitch to dark mode12345678910"routes": [ { "name": "overview", "pattern": "", "titleTarget": "", "greedy": false, "target": ["overview"] } ],
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 Add the flights target after the overview target with the listed attributes and values.
Your implementation should look like the following :
Code SnippetCopy codeSwitch to dark mode12345678"flights": { "viewType": "XML", "transition": "slide", "viewId": "Flights", "viewName": "Flights", "viewLevel": 2 }
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.
Your implementation should look like the following :
Code SnippetCopy codeSwitch to dark mode12345678910{ "name": "flights", "pattern": "carriers/{carrid}", "titleTarget": "", "greedy": false, "target": ["flights"] }
Create a target with the name notFound with the listed attributes and values.
notFound target
Attribute Value viewId NotFound viewName NotFound transition show Add the notFound target after the flights target with the listed attributes and values.
Your implementation should look like the following :
Code SnippetCopy codeSwitch to dark mode12345678"notFound": { "viewId": "NotFound", "viewName": "NotFound", "transition": "show" }
Extend the routing configuration in the descriptor by adding a bypassed property and setting its target to notFound. Then save your changes.
Add the bypassed property and set its target to notFoundin the routing configuration.
Use the following code:
Code SnippetCopy codeSwitch to dark mode123456789101112131415"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"] } }Save your changes.
Check if the init function of your component contains the router initialization.
Open the Component.js file.
Navigate to the init function.
Ensure that the router is initialized:
Code SnippetCopy codeSwitch to dark mode1234567891011init: 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"); }
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
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 Use the following code:
Code SnippetCopy codeSwitch to dark mode12345678910<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>
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 Insert the following code after the Page beginning tag :
Code SnippetCopy codeSwitch to dark mode1234<Table id="carrierTable" items="{/UX_C_Carrier_TP}"> </Table>
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.
Enter the following code after the Table beginning tag:
Code SnippetCopy codeSwitch to dark mode12345678910<columns> <Column id="column1"> </Column> <Column id="column2"> </Column> </columns>
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 Use the following code:
Code SnippetCopy codeSwitch to dark mode12345678<Column id="column1"> <Text id="text1" text="{i18n>columnId}"/> </Column> <Column id="column2"> <Text id="text2" text="{i18n>columnName}"/> </Column>
Add the items aggregation to the sap.m.Table element.
See the code in step 9.
Add an element of the type sap.m.ColumnListItem to the items aggregation with the following attribute and value.
Attribute Value id columnListItem1 See the code in step 9.
Add the cells aggregation to the sap.m.ColumnListItem element.
See the code in step 9.
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 See the code in step 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 Use the following code after the columns aggregation:
Code SnippetCopy codeSwitch to dark mode12345678910<items> <ColumnListItem id="columnListItem1" > <cells> <ObjectIdentifier id="objectIdentifier1" title="{Carrid}" /> <Text id="text3" text="{Carrname}" /> </cells> </ColumnListItem> </items>Save your changes. You now should have the following code:
Code SnippetCopy codeSwitch to dark mode123456789101112131415161718192021222324252627<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>
Test your application. A list of carriers should appear.
Caution
Be aware that actual data may differ from screenshot.To start the application, open the context menu of your project folder and select Preview Application. Choose start-local fiori run.
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
Open the Carrier.view.xml file and assign an event handler function with the name onPress to the press event of the ColumnListItem element.
Add the press attribute to the ColumnListItem :
Code SnippetCopy codeSwitch to dark mode1press="onPress"
Add the attribute type to the ColumnListItem element and assign the value Navigation to the attribute. Then save your changes.
Add the type attribute to the ColumnListItem:
Code SnippetCopy codeSwitch to dark mode1type="Navigation"Save your changes. You now should have the following code:
Code SnippetCopy codeSwitch to dark mode123456789<ColumnListItem id="columnListItem1" press="onPress" type="Navigation" > <cells> <ObjectIdentifier id="objectIdentifier1" title="{Carrid}" /> <Text id="text3" text="{Carrname}" /> </cells> </ColumnListItem>
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
Open the Carrier.controller.js file and remove the onInit function.
Open the Carrier.controller.js file.
Remove the onInit function.
Code SnippetCopy codeSwitch to dark mode123456789101112131415sap.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", { }); });
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.
Use the following code:
Code SnippetCopy codeSwitch to dark mode1234getRouter: function () { return sap.ui.core.UIComponent.getRouterFor(this); }
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.
Add a function with the name onPress. The function should take one argument called oEvent. Use the following code:
Code SnippetCopy codeSwitch to dark mode123onPress: function(oEvent) { }
Read the property Carrid from the binding context of the event initiator and store the value in a local variable, sCarrid.
Declare a variable with the name oItem and assign the event-source object to the variable.
Declare a variable with the name oCtx and assign the binding context from the event source object to the variable.
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.
Your implementation inside the onPress function should look like the following:
Code SnippetCopy codeSwitch to dark mode1234var oItem = oEvent.getSource(); var oCtx = oItem.getBindingContext(); var sCarrid = oCtx.getProperty("Carrid");
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.
Use the following code after the variables definition :
Code SnippetCopy codeSwitch to dark mode1234this.getRouter().navTo("flights", { carrid: sCarrid }, false);Your controller implementation should look like the following:
Save your changes. You now should have the following code:
Code SnippetCopy codeSwitch to dark mode123456789101112131415161718return 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); } });
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
Open the Flights.view.xml file and add an XML-alias l to your Flights view pointing to sap.ui.layout.
Open the Flights.view.xml file with the Code Editor of the SAP Business Application Studio.
Add an XML-alias l to your Flights view pointing to sap.ui.layout.
Enter the following code after xmlns="sap.m" :
Code SnippetCopy codeSwitch to dark mode1xmlns:l="sap.ui.layout"
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 Enter the following code for the Page element :
Code SnippetCopy codeSwitch to dark mode1<Page id="idFlightsPage" navButtonPress="onNavBack" showNavButton="true" title="{Carrname}">
Add a sap.ui.layout.VerticalLayout element to the content aggregation of your sap.m.Page element
Add the following code:
Code SnippetCopy codeSwitch to dark mode12345678<content> <l:VerticalLayout id="verticalLayout"> </l:VerticalLayout> </content>
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 Add the following code inside the VerticalLayout element :
Code SnippetCopy codeSwitch to dark mode123456<ObjectHeader id="objectHeader" title="{Carrname}" number="" numberUnit="{Currcode}" titleHref="{Url}"> </ObjectHeader>
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.
Add the following code inside the ObjectHeader element:
Code SnippetCopy codeSwitch to dark mode1234567<attributes> <ObjectAttribute/> <ObjectAttribute/> </attributes>
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 Use the following code for the first ObjectAttribute element:
Code SnippetCopy codeSwitch to dark mode1id="objectAttribute1" text="{Carrid}"Use the following code for the second ObjectAttribute element:
Code SnippetCopy codeSwitch to dark mode1id="objectAttribute2" text="{Url}"You now should have the following code:
Code SnippetCopy codeSwitch to dark mode123456789<ObjectHeader id="objectHeader" title="{Carrname}" number="" numberUnit="{Currcode}" titleHref="{Url}"> <attributes> <ObjectAttribute id="objectAttribute1" text="{Carrid}" /> <ObjectAttribute id="objectAttribute2" text="{Url}" /> </attributes> </ObjectHeader>
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 Add the following code after the VerticalLayout element:
Code SnippetCopy codeSwitch to dark mode123456<Table id="idFlights" mode="SingleSelectMaster" growing="true" growingThreshold="10"> </Table>
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.
Add the following code between id and mode attributes:
Code SnippetCopy codeSwitch to dark mode1items="{path: 'to_Flight', sorter: {path: 'Carrid'}}"You now should have the following code:
Code SnippetCopy codeSwitch to dark mode123456789<Table id="idFlights" items="{path: 'to_Flight', sorter: {path: 'Carrid'}}" mode="SingleSelectMaster" growing="true" growingThreshold="10"> </Table>
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 Add the following code inside the Table element:
Code SnippetCopy codeSwitch to dark mode1234567<headerToolbar> <Toolbar id="toolbar1"> </Toolbar> </headerToolbar>
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 Add the following code inside the Toolbar element:
Code SnippetCopy codeSwitch to dark mode123<Title id="title1" text="Flights" level="H2" />You now should have the following code:
Code SnippetCopy codeSwitch to dark mode12345678<headerToolbar> <Toolbar id="toolbar1"> <Title id="title1" text="Flights" level="H2" /> </Toolbar> </headerToolbar>
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 Enter the following code after the headerToolbar element:
Code SnippetCopy codeSwitch to dark mode123456789101112131415<columns> <Column id="column1"> </Column> <Column id="column2"> </Column> <Column id="column3"> </Column> <Column id="column4"> </Column> </columns>
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 Add the following code inside the first Column element:
Code SnippetCopy codeSwitch to dark mode123<Text id="text1" text="{i18n>carriername}" />Add the following code inside the second Column element:
Code SnippetCopy codeSwitch to dark mode123<Text id="text2" text="{i18n>flightdate}" />Add the following code inside the third Column element:
Code SnippetCopy codeSwitch to dark mode123<Text id="text3" text="{i18n>seatmax}" />Add the following code inside the fourth Column element:
Code SnippetCopy codeSwitch to dark mode123<Text id="text4" text="{i18n>seatocc}" />You now should have the following code:
Code SnippetCopy codeSwitch to dark mode1234567891011121314151617<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>
Add the items aggregation to the Tableelement.
Enter the following code after the columns element:
Code SnippetCopy codeSwitch to dark mode123<items> </items>
Add an element of the type sap.m.ColumnListItem to the items aggregation.
Attribute Value id columnListItem1 Add the following code inside the items element:
Code SnippetCopy codeSwitch to dark mode1234<ColumnListItem id="columnListItem1"> </ColumnListItem>
Add the cells aggregation to the ColumnListItem element.
Add the following code inside the ColumnListItem element:
Code SnippetCopy codeSwitch to dark mode123<cells> </cells>
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 Add the following code inside the cells element:
Code SnippetCopy codeSwitch to dark mode12<ObjectIdentifier id="objectIdentifier1" title="{Carrid}" text="{Carrid}" />
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 Add the following code after the ObjectIdentifier element:
Code SnippetCopy codeSwitch to dark mode1234<Text id="text5" text="{path: 'Fldate', type: 'sap.ui.model.type.Date'}" /> <Text id="text6" text="{Seatsmax}" /> <Text id="text7" text="{Seatsocc}" />You now should have the following code:
Code SnippetCopy codeSwitch to dark mode123456789101112<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>
Task 9: Implement the Flights View Behavior for Navigation
Steps
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.
Open the Flights.controller.js file.
Add a getRouter function using the following code (don't forget to add a coma after the onInit function):
Code SnippetCopy codeSwitch to dark mode1234getRouter: function () { return sap.ui.core.UIComponent.getRouterFor(this); }
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.
Locate the onInit function.
Create a variable with the name oRouterand assign a reference to router. Use the following code:
Code SnippetCopy codeSwitch to dark mode1var oRouter = this.getRouter();Register the function _onObjectMatched when the route flights is matched. Enter the following code:
Code SnippetCopy codeSwitch to dark mode1oRouter.getRoute("flights").attachMatched(this._onObjectMatched, this);You now should have the following code:
Code SnippetCopy codeSwitch to dark mode12345onInit: function () { var oRouter = this.getRouter(); oRouter.getRoute("flights").attachMatched(this._onObjectMatched, this); },
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.
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 SnippetCopy codeSwitch to dark mode123_onObjectMatched: function (oEvent) { }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 SnippetCopy codeSwitch to dark mode1var oArgs = oEvent.getParameter("arguments");Read the property carrierId from the oArgs object and assign the result to a member variable called _sCarrierId. Add the following code:
Code SnippetCopy codeSwitch to dark mode1this._sCarrierId = oArgs.carrid;Get a reference to the view object and assign the reference to a local variable called oView. Add the following code:
Code SnippetCopy codeSwitch to dark mode1var oView = this.getView();
Call the function bindElement on the view object. Pass a literal object to the function.
Enter the following code:
Code SnippetCopy codeSwitch to dark mode123oView.bindElement({ });
Add the property path to the literal object and assign the binding to the selected Carrier using the _sCarrierId variable.
Add the following code to the bindElement function:
Code SnippetCopy codeSwitch to dark mode1path: "/UX_C_Carrier_TP('" + this._sCarrierId + "')",
Add a property events to the literal object. Assign another literal object to the property.
Add the following code after the path property specification:
Code SnippetCopy codeSwitch to dark mode123events: { }
Call the _onBindingChange function for the event change. The function will be implemented in a later step.
Add the following code to the events definition:
Code SnippetCopy codeSwitch to dark mode1change: this._onBindingChange.bind(this),
Add a function for the event dataRequested and implement the function in a way that the view is set to busy.
Add the following code after the change event specification:
Code SnippetCopy codeSwitch to dark mode1234dataRequested: function () { oView.setBusy(true); },
Add a function for the event dataReceived and implement the function in a way that the view is set to not busy.
Add the following code after the dataRequested event specification:
Code SnippetCopy codeSwitch to dark mode1234dataReceived: function () { oView.setBusy(false); }You now should have the following code:
Code SnippetCopy codeSwitch to dark mode123456789101112131415161718192021_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); } } }); },
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").
Enter the following code after the _onObjectMatched function implementation:
Code SnippetCopy codeSwitch to dark mode1234567891011_onBindingChange: function () { var oElementBinding; oElementBinding = this.getView().getElementBinding(); // No data for the binding if (oElementBinding && !oElementBinding.getBoundContext()) { this.getRouter().getTargets().display("notFound"); } },
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.
Add the following code after the _onBindingChange function implementation:
Code SnippetCopy codeSwitch to dark mode12345678910111213onNavBack: 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*/); } }Save all of your changes.
Task 10: Implement the UI for Not Found elements
Steps
Open the NotFound.view.xml file and remove the sap.m.Page element.
Open the NotFound.view.xml file with the Code Editor of the SAP Business Application Studio.
Make sure that the sap.m.Page element is removed.
Should have the following:
Code SnippetCopy codeSwitch to dark mode1234567<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>
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 Add the following implementation:
Code SnippetCopy codeSwitch to dark mode123456<MessagePage id="messagePage1" title="{i18n>notFoundMessageTitle}" text="{i18n>notFoundMessageText}" description="{i18n>notFoundMessageDescrition}" showNavButton="true" navButtonPress="onNavBack"/>Save your changes.
Remove the onInit function in the NotFound.controller.js file.
Open the NotFound.controller.js file located in the controller folder of your project.
Remove the onInit function.
Implement a function getRouter in the NotFound.controller.js file. The function should return the router instance of your application.
If the NotFound.controller.js file is not yet open, then open it and add the following implementation:
Code SnippetCopy codeSwitch to dark mode1234getRouter: function() { return sap.ui.core.UIComponent.getRouterFor(this); },
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.
Implement the onNavBack function as shown below.
Code SnippetCopy codeSwitch to dark mode12345678910111213onNavBack: 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*/); } }Save your changes.
Task 11: Test your Application
Steps
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.Perform this step in the way it was shown in a previous exercise.
Try to navigate to a URL for which no route exists. The NotFound view should be displayed.
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).
The Not Found view should display.
Task 12: Test your Application for Responsiveness
Steps
Run the application, ux402_fullscreen, again.
Perform this step as shown in a previous exercise.
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.
Press F12 (on your keyboard) to access Chrome DevTools.
Choose Toggle device toolbar.
Set the screen size to 1142 x 764 and press Enter (on your keyboard).
Select a carrier from the list of carriers. Take note that the table for the flights has plenty of room for each field.
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.
Set the screen size to 324 x 480 and press Enter (on your keyboard).
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
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 Open the Carrier.view.xml file.
Add the following code to each Column definition:
Code SnippetCopy codeSwitch to dark mode1minScreenWidth="Tablet" demandPopin="true"For additional information about demandPopin visit the following URL: https://sapui5.netweaver.ondemand.com/sdk/#/api/sap.m.Column%23controlProperties
Save your changes. You now should have the following code:
Code SnippetCopy codeSwitch to dark mode1234567891011<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>
Task 14: Adjust the Flights View for a Mobile Device
Steps
Open the Flights.view.xml file.
Perform this step as shown in a previous exercise.
Add the following attribute to the first element of type, Column:
Attribute-value Pair for the first Column Element
Attribute Value width 12em Add the following code to the first Column definition:
Code SnippetCopy codeSwitch to dark mode1width="12em"
Add the following attribute to the last element of typeColumn:
Attribute-value pair for the last Column element
Attribute Value hAlign Right Add the following code to the last Column definition:
Code SnippetCopy codeSwitch to dark mode1hAlign="Right"
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 Add the following code to the other two Column definition:
Code SnippetCopy codeSwitch to dark mode1minScreenWidth="Tablet" demandPopin="true"Save your changes. You now should have the following code:
Code SnippetCopy codeSwitch to dark mode1234567891011121314151617<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>
Task 15: Test your Application Again
Steps
Start your application for the test.
Perform this step as shown in a previous exercise.
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.
Press F12 (on your keyboard) to access Chrome DevTools.
Set the screen size to 1142 x 764.
Select a carrier from the list of carriers.
Notice that the table for the flights has plenty of room for each field.
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.
Set the screen size to 324 x 700.
Notice the table for the flights has adjusted well to the new size.
Close and stop the application.
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.