Developing a Standard Control Extension

Objectives

After completing this lesson, you will be able to:

  • Develop a Standard control Extension

Extend an Existing Control

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

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

    PropertyValue
    typeboolean
    defaultValuefalse

    Property-value pair for hoverText

    PropertyValue
    typestring
    1. Enter the following code in the extend function:

      Code snippet
      
      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
      
      ,
      events: {
       "hover": {}
      }
      Expand
  7. Add an onmouseover function after the metadata.

    1. Enter the following code after the metadata definition :

      Code snippet
      
      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
      
      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
      
      ,
      renderer: {}
      Expand
    2. Save your changes. Your HoverButton implementation should now look like the following:

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

Task 2: Add the HoverButton Control to the Application

Steps

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

    AttributeValue
    idcolumn5
    minScreenWidthTablet
    demandPopintrue
    hAlignCenter
    1. Enter the following code after the column4 declaration:

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

    AttributeValue
    idtext8
    text{i18n>bookaction}
    1. Enter the following code inside the column definition:

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

    AttributeValue
    text{i18n>bookaction}
    allowHovertrue
    hoverText{=${Seatsmax} - ${Seatsocc}}
    hoveronHover
    idhoverButton1
    Note
    The HoverButton is placed in a project specific namespace.
    1. Enter the following code after the text7 declaration:

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

    KeyValue
    bookactionBook 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.

Task 3: Implement the Hover Action

Steps

  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

    KeyValue
    msgSeatsAvseats are available
    1. Open the i18n.properties file and enter the following code:

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

Log in to track your progress & complete quizzes