Developing a Standard Control Extension

In this step, you will create the JavaScript file that contains the new HoverButton control, extension of a sap.m.Button control.

1. Log into your SAP Business Application Studio.

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

2. Open the ux402_fullscreen project from the previous exercises.

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

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

   1. Select your project webapp folder and from the context menu, choose New Folder.

   2. In the entry field, enter the name control as the folder name and choose the Enter key (on your keyboard).

   3. Select the newly created folder and from the context menu, choose New File.

   4. In the new entry field, enter HoverButton.js as file name and choose the Enter key (on your keyboard).

4. In the HoverButton.js file, extend the standard Buttoncontrol from the sap.m library, and name the extension HoverButtonin the student##.com.sap.training.ux402.fullscreen.ux402fullscreen.control namespace.

   1. Enter the following code in the HoverButton.js file:

      Code snippet

      Copy code

      
      sap.ui.define([
       "sap/m/Button"
      ],
      
       function (Button) {
       "use strict";
      
       return Button.extend("student00.com.sap.training.ux402.fullscreen.ux402fullscreen.control.HoverButton", { 
       });
       }
      );
      

      Expand

5. Define the metadata and add the properties allowHover and hoverText 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

   1. Enter the following code in the extend function:

      Code snippet

      Copy code

      
      metadata: {
       properties: {
       "allowHover": {
       type: "boolean",
       defaultValue: false
       },
       "hoverText": {
       type: "string"
       }
       }
      },

      Expand

6. Add a new custom event called hover with empty brackets {} as the value.

   1. Enter the following code after the properties definition:

      Code snippet

      Copy code

      
      ,
      events: {
       "hover": {}
      }

      Expand

7. Add an onmouseover function after the metadata.

   1. Enter the following code after the metadata definition :

      Code snippet

      Copy code

      
      onmouseover: function(evt) {
      
      }

      Expand

8. In the onmouseover function, check if allowHover is true, and if it is, fire the hover event.

   Hint

   Remember that the properties will have getter and setter methods created by the framework. Events will have the fire method created, for example firePress, for an event named press.

   1. Enter the following code inside the onmouseover function:

      Code snippet

      Copy code

      
      if (this.getAllowHover()) {
       this.fireHover();
      }

      Expand

9. 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 the onmouseover method, you can ignore the error that it is unused.

   1. Enter the following code after the onmouseover definition:

      Code snippet

      Copy code

      
      ,
      renderer: {}

      Expand

   2. Save your changes. Your HoverButton implementation should now look like the following:

      Code snippet

      Copy code

      
      metadata: {
       properties: {
       "allowHover": {
       type: "boolean",
       defaultValue: false
       },
       "hoverText": {
       type: "string"
       }
       },
       events: {
       "hover": {}
       }
      },
      onmouseover: function(evt) {
       if (this.getAllowHover()) {
       this.fireHover();
       }
      },
      renderer: {}
      
      
      

      Expand

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

   1. Open the Flights.controller.js file.

   2. Add a reference to the new HoverButton to the dependencies of your Flights controller:

      Code snippet

      Copy code

      
      sap.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";

      Expand

   3. Save and close the Flights.controller.js file.

2. 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 the Flights.view.xml file, several namespaces are defined pointing to SAP provided libraries. Add a new XML namespace with the prefix of cust pointing to the namespace where the HoverButton control is located.

   1. Enter the following code after xmlns:l="sap.ui.layout" :

      Code snippet

      Copy code

      xmlns:cust="student##.com.sap.training.ux402.fullscreen.ux402fullscreen.control"

      Expand

3. As a last element of the columns aggregation, add a new mobile enabled Column element with the following attributes and values:

   Attribute-value Pairs for the Column Element

   Attribute	Value
   id	column5
   minScreenWidth	Tablet
   demandPopin	true
   hAlign	Center

   1. Enter the following code after the column4 declaration:

      Code snippet

      Copy code

      
      <Column id="column5" minScreenWidth="Tablet" demandPopin="true" hAlign="Center">
      
      </Column> 
      

      Expand

4. Add a new sap.m.Text element with the following attribute to the new Column element:

   Attribute-value Pair for the Text Element

   Attribute	Value
   id	text8
   text	{i18n>bookaction}

   1. Enter the following code inside the column definition:

      Code snippet

      Copy code

      <Text id="text8" text="{i18n>bookaction}"/>

      Expand

5. As a last element of the cells aggregation, add a HoverButton 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.

   1. Enter the following code after the text7 declaration:

      Code snippet

      Copy code

      <cust:HoverButton id="hoverButton1" text="{i18n>bookaction}"
       allowHover="true"
       hoverText="{=${Seatsmax} - ${Seatsocc}}"
       hover="onHover"
      />

      Expand

   2. Save your changes.

6. Add the following key-value pair to the i18n.properties file:

   Key-value Pair within the i18n.properties File

   Key	Value
   bookaction	Book flight

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

7. Run the application.

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

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

   

   1. Choose a carrier in the Carriers table.

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

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

   1. Open the i18n.properties file and enter the following code:

      Code snippet

      Copy code

      
      #MSG
      msgSeatsAv=seats are available

      Expand

   2. Save your changes.

2. 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 the sap.m.MessageToast control.

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

   2. Update the code as follows :

      Code snippet

      Copy code

      
      sap.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";

      Expand

3. Add the onHover function to the controller implementation. The function takes one argument with the name, evt.

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

      Code snippet

      Copy code

      onHover: function(evt) {
      
      }

      Expand

4. In the onHover method, add code to display a MessageToast with the HoverButton controls hoverText displayed for 1000 milliseconds. Read the hoverText from the source of the event. Use the i18n capabilities of UI5. Now, save your changes.

   1. Enter the following code inside the onHover function:

      Code snippet

      Copy code

      
      var sText = this.getOwnerComponent().getModel("i18n").getProperty("msgSeatsAv");
      MessageToast.show(evt.getSource().getHoverText() + " " + sText, {duration: 1000});

      Expand

5. Start the application.

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

6. Select a carrier and navigate to the Flights table.

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

7. Hover over the button in the table. A MessageToast dialog box with the available seats for booking appears.

   

   1. Hover over the button in the table.

   2. A MessageToast dialog box with the available seats for booking appears.

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