Business Example
In this exercise, you will extend one of the standard SAPUI5 controls to add functionality. The Button control will be extended and the new control added to the Flights table. The control will be modified to add a hover event and display text that is controlled through a custom property on the control. To save some time, you will adjust the ux402_fullscreen application.
Note
SAP Business Technology Platform and its tools are cloud services. Due to the nature of cloud software, step procedures and the 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 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: Extend the Button Control
In this step, you will create the JavaScript file that contains the new HoverButton control, extension of a sap.m.Button
control.
Steps
Log into your SAP Business Application Studio.
Perform this step as shown in a previous exercise.
Open the ux402_fullscreen project from the previous exercises.
Perform this step as shown in a previous exercise.
Create a new folder with the name control in the webapp folder of your project ux402_fullscreen and add a file with the name HoverButton.js to the newly created folder.
Select your project webapp folder and from the context menu, choose New Folder.
In the entry field, enter the name control as the folder name and choose the Enter key (on your keyboard).
Select the newly created folder and from the context menu, choose New File.
In the new entry field, enter HoverButton.js as file name and choose the Enter key (on your keyboard).
In the
HoverButton.js
file, extend the standardButton
control from the sap.m library, and name the extensionHoverButton
in thestudent##.com.sap.training.ux402.fullscreen.ux402fullscreen.control
namespace.Enter the following code in the
HoverButton.js
file:Code SnippetCopy codeSwitch to dark mode12345678910111213sap.ui.define([ "sap/m/Button" ], function (Button) { "use strict"; return Button.extend("student00.com.sap.training.ux402.fullscreen.ux402fullscreen.control.HoverButton", { }); } );
Define the metadata and add the properties
allowHover
andhoverText
with the following attributes and value assignments to the metadata:Property-value pairs for allowHover
Property Value type boolean defaultValue false Property-value pair for hoverText
Property Value type string Enter the following code in the
extend
function:Code SnippetCopy codeSwitch to dark mode123456789101112metadata: { properties: { "allowHover": { type: "boolean", defaultValue: false }, "hoverText": { type: "string" } } },
Add a new custom event called
hover
with empty brackets{}
as the value.Enter the following code after the
properties
definition:Code SnippetCopy codeSwitch to dark mode12345, events: { "hover": {} }
Add an
onmouseover
function after the metadata.Enter the following code after the
metadata
definition :Code SnippetCopy codeSwitch to dark mode1234onmouseover: function(evt) { }
In the
onmouseover
function, check ifallowHover
istrue
, and if it is, fire thehover
event.Hint
Remember that the properties will havegetter
andsetter
methods created by the framework. Events will have thefire
method created, for examplefirePress
, for an event namedpress
.Enter the following code inside the
onmouseover
function:Code SnippetCopy codeSwitch to dark mode1234if (this.getAllowHover()) { this.fireHover(); }
Add a renderer with empty brackets
{}
as the value. Then save your changes.Note
There should be no syntax errors. If you have an event parameter for theonmouseover
method, you can ignore the error that it is unused.Enter the following code after the
onmouseover
definition:Code SnippetCopy codeSwitch to dark mode123, renderer: {}Save your changes. Your HoverButton implementation should now look like the following:
Code SnippetCopy codeSwitch to dark mode123456789101112131415161718192021222324metadata: { properties: { "allowHover": { type: "boolean", defaultValue: false }, "hoverText": { type: "string" } }, events: { "hover": {} } }, onmouseover: function(evt) { if (this.getAllowHover()) { this.fireHover(); } }, renderer: {}
Task 2: Add the HoverButton Control to the Application
Steps
Before using the HoverButton control in the SAPUI5 application, the resources must be registered so that they are known to SAPUI5. The views in the view folder are registered automatically, but the HoverButton is located in a different location so it has to be specifically registered. Open the
Flights.controller.js
file and add a reference to the new HoverButton to the dependencies of your Flights controller. Then save your changes.Open the
Flights.controller.js
file.Add a reference to the new HoverButton to the dependencies of your Flights controller:
Code SnippetCopy codeSwitch to dark mode12345678910sap.ui.define([ "sap/ui/core/mvc/Controller", "student##/com/sap/training/ux402/fullscreen/ux402fullscreen/control/HoverButton" ], /** * @param {typeof sap.ui.core.mvc.Controller} Controller */ function (Controller, HoverButton) { "use strict";Save and close the
Flights.controller.js
file.
Open the
Flights.view.xml
file. In order to use the new HoverButton control, an XML namespace must be added to the view so that it can address the control properly. At the top of theFlights.view.xml
file, several namespaces are defined pointing to SAP provided libraries. Add a new XML namespace with the prefix ofcust
pointing to the namespace where the HoverButton control is located.Enter the following code after
xmlns:l="sap.ui.layout"
:Code SnippetCopy codeSwitch to dark mode1xmlns:cust="student##.com.sap.training.ux402.fullscreen.ux402fullscreen.control"
As a last element of the
columns
aggregation, add a new mobile enabledColumn
element with the following attributes and values:Attribute-value Pairs for the Column Element
Attribute Value id column5 minScreenWidth Tablet demandPopin true hAlign Center Enter the following code after the
column4
declaration:Code SnippetCopy codeSwitch to dark mode12345<Column id="column5" minScreenWidth="Tablet" demandPopin="true" hAlign="Center"> </Column>
Add a new
sap.m.Text
element with the following attribute to the newColumn
element:Attribute-value Pair for the Text Element
Attribute Value id text8 text {i18n>bookaction} Enter the following code inside the column definition:
Code SnippetCopy codeSwitch to dark mode1<Text id="text8" text="{i18n>bookaction}"/>
As a last element of the
cells
aggregation, add aHoverButton
element with the following attributes and values. Now, save your changes.Attribute-value Pairs for the HoverButton Element
Attribute Value text {i18n>bookaction} allowHover true hoverText {=${Seatsmax} - ${Seatsocc}} hover onHover id hoverButton1 Note
The HoverButton is placed in a project specific namespace.Enter the following code after the
text7
declaration:Code SnippetCopy codeSwitch to dark mode12345<cust:HoverButton id="hoverButton1" text="{i18n>bookaction}" allowHover="true" hoverText="{=${Seatsmax} - ${Seatsocc}}" hover="onHover" />Save your changes.
Add the following key-value pair to the
i18n.properties
file:Key-value Pair within the i18n.properties File
Key Value bookaction Book flight Perform this step as shown in a previous exercise.
Run the application.
Perform this step, as shown in a previous exercise.
Verify that the application runs properly and that a new Button is shown in each row of the Flights table. The functionality for the hover has not been implemented yet so there are no added features at this point. If the field does not display, or the application fails to load, open Chrome DevTools and look at the console for errors.
Choose a carrier in the Carriers table.
Verify that the application runs properly and that a new Button is shown in each row of the Flights table. If that is not the case, use Chrome DevTools to detect the errors.
Task 3: Implement the Hover Action
Steps
Open the
i18n.properties
file and add the following key-value pair (with a leading blank at the value) to the file. Now, save your changes.Key-value Pair within the i18n.properties File
Key Value msgSeatsAv seats are available Open the
i18n.properties
file and enter the following code:Code SnippetCopy codeSwitch to dark mode123#MSG msgSeatsAv=seats are availableSave your changes.
The HoverButton control that was added has the hover method set to call a method called onHover. This method is not yet implemented by the application. Open the
Flights.controller.js
file and add a new dependency to thesap.m.MessageToast
control.Open the
Flights.controller.js
file located in the controller folder of your project.Update the code as follows :
Code SnippetCopy codeSwitch to dark mode1234567891011sap.ui.define([ "sap/ui/core/mvc/Controller", "student##/com/sap/training/ux402/fullscreen/ux402fullscreen/control/HoverButton", "sap/m/MessageToast" ], /** * @param {typeof sap.ui.core.mvc.Controller} Controller */ function (Controller, HoverButton, MessageToast) { "use strict";
Add the
onHover
function to the controller implementation. The function takes one argument with the name,evt
.Enter the following code after the
onNavBack
function implementation :Code SnippetCopy codeSwitch to dark mode123onHover: function(evt) { }
In the
onHover
method, add code to display aMessageToast
with the HoverButton controlshoverText
displayed for 1000 milliseconds. Read thehoverText
from the source of the event. Use the i18n capabilities of UI5. Now, save your changes.Enter the following code inside the
onHover
function:Code SnippetCopy codeSwitch to dark mode123var sText = this.getOwnerComponent().getModel("i18n").getProperty("msgSeatsAv"); MessageToast.show(evt.getSource().getHoverText() + " " + sText, {duration: 1000});
Start the application.
Perform this step as shown in a previous exercise.
Select a carrier and navigate to the Flights table.
Perform this step as shown in a previous exercise.
Hover over the button in the table. A MessageToast dialog box with the available seats for booking appears.
Hover over the button in the table.
A MessageToast dialog box with the available seats for booking appears.
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.