Developing a Custom Control

Objectives

After completing this lesson, you will be able to:

  • Develop a Custom Control

Create a Custom Control

Business Example

In this exercise, you will extend the ux402_fullscreen application by adding a custom control. The control shows data about the plane in the Flights table, including the following:

  • Maximum number of passengers

  • Current number of passengers booked

This is shown in the following figure:

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. In addition, be aware that the screenshots show the solutions from student00 namespace; you should replace this with your own student## one.

Task 1: Create the Custom Control

Steps

  1. Log into your SAP Business Application Studio.

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

  2. In the control folder of the ux402_fullscreen project, create a new file named PlaneInfo.js.

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

  3. In the PlaneInfo.js file, create a custom control named PlaneInfo by extending the sap.ui.core.Control.

    1. Use the following code:

      Code snippet
      
      sap.ui.define([
       "sap/ui/core/Control"
      ],
      
       function (Control) {
       "use strict";
      
       return Control.extend("studen##.com.sap.training.ux402.fullscreen.ux402fullscreen.control.PlaneInfo", {
       
       });
       }
      );
      
      Expand
  4. Add a metadata section. Add the following properties to the metadata definition and assign the given type as a type attribute. Then save your changes.

    Properties within the Metadata Section of the PlaneInfo.js File

    PropertyType
    seatsMaxstring
    seatsOccstring
    1. Enter the following code inside the extend function:

      Code snippet
      
      metadata:{
       properties: {
       "seatsMax" : {
       type: "string"
       },
       "seatsOcc" : {
       type: "string"
       }
       }
      }
      Expand
    2. Save your changes.

Task 2: Implement the Renderer

It is necessary to implement the renderer for the PlaneInfo control. The renderer follows the naming standards for renderer.

Steps

  1. In the control folder of the ux402_fullscreen project, create a new file named PlaneInfoRenderer.js.

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

  2. In the PlaneInfoRenderer.js file, create a custom control named PlaneInfoRenderer by extending the base sap.ui.core.Renderer, assign the extended object to a variable named PlaneInfoRenderer, and return the created object to the caller.

    1. Use the following code:

      Code snippet
      
      sap.ui.define([
       "sap/ui/core/Renderer"
      ],
      
       function (Renderer) {
       "use strict";
      
       var PlaneInfoRenderer = Renderer.extend("student##.com.sap.training.ux402.fullscreen.ux402fullscreen.control.PlaneInfoRenderer");
       return PlaneInfoRenderer;
       }
      );
      Expand
  3. To enable the incremental DOM-like API, set the apiVersion of the PlaneInfoRenderer object to 2.

    1. Add the following code before the return PlaneInfoRenderer statement :

      Code snippet
      PlaneInfoRenderer.apiVersion = 2;
      Expand
  4. Add a function render to the PlaneInfoRenderer object created in step 2. The function takes two arguments. Name the first argument oRm. It will contain a reference to the RenderManager at runtime. Name the second argument oControl. This variable will contain a reference to the control that the renderer should render. Add code to the render function to render the control. The HTML table control should have three rows of data from the PlaneInfo control properties: seatsMax and seatsOcc. Do not put in the icons at this point (as seen at the beginning of the exercise). Now, save your changes.

    Hint
    The table being rendered is an HTML table, not an SAPUI5 table. The data from the PlaneInfo control can be accessed from the oControl object passed in using the automatically generated getter methods.
    1. Use the RenderManager passed in to write out an opening div and write the control data for the oControl object passed in. Use the openStart function of the RenderManager.

    2. Write an HTML table control with three rows of data from the PlaneInfo control properties: seatsMax and seatsOcc. Do not put in the icons at this point (as seen at the beginning of the exercise). Use the openStart, openEnd, close, attr, and text functions of the RenderManager.

    3. Close the table and the div. Use the close function of the RenderManager.

    4. The implementation should look like the following code:

      Code snippet
      
      PlaneInfoRenderer.render = function(oRm, oControl) {
       oRm.openStart("div",oControl);
       oRm.openEnd();
       oRm.openStart("table");
       oRm.attr("align", "center");
       oRm.openEnd();
       oRm.openStart("tr");
       oRm.openEnd();
       oRm.openStart("td");
       oRm.openEnd();
       oRm.text(" "+oControl.getSeatsMax());
       oRm.close("td");
       oRm.close("tr");
       oRm.openStart("tr");
       oRm.openEnd();
       oRm.openStart("td");
       oRm.openEnd();
       oRm.text(" "+oControl.getSeatsOcc());
       oRm.close("td");
       oRm.close("tr");
       oRm.close("table");
       oRm.close("div"); 
      
      }
      Expand
      Note
      For less code, you could use method chaining.
    5. Save your changes.

Task 3: Add the PlaneInfoRenderer to the PlaneInfo Control

Steps

  1. Open the PlaneInfo.js file and add a reference to the new PlaneInfoRenderer to the implementation.

    1. Open the PlaneInfo.js file located in the control folder of your project.

    2. Update the code as follows:

      Code snippet
      
      sap.ui.define([
       "sap/ui/core/Control",
       "student##/com/sap/training/ux402/fullscreen/ux402fullscreen/control/PlaneInfoRenderer"
      ],
      
       function (Control, PlaneInfoRenderer) {
       "use strict";
      Expand
  2. Add an attribute renderer to the implementation and assign the PlaneInfoRenderer reference to it.

    1. Add the following code after the metadata definition:

      Code snippet
      ,
      renderer: PlaneInfoRenderer
      Expand
    2. Save your changes.

Task 4: Add the PlaneInfo Control to the Application

Steps

  1. Open the i18n.properties file and add the following key-value pair. Now, save your changes.

    Key-value Pair within the i18n.properties File

    KeyValue
    planeInfoPlane Infos
    1. Perform this step as shown in a previous exercise.

  2. Open the Flights.controller.js file and add a reference to the new PlaneInfo control. Now, save your changes.

    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",
       "student##/com/sap/training/ux402/fullscreen/ux402fullscreen/control/PlaneInfo" 
      ],
       /**
       * @param {typeof sap.ui.core.mvc.Controller} Controller
       */
       function (Controller, HoverButton, MessageToast, PlaneInfo) {
       "use strict";
      Expand
    3. Save your changes.

  3. Open the Flights.view.xml file. Before the last Column element, add a new mobile-enabled Column element with the following attributes to the columns aggregation:

    Attribute-value Pairs for the Column Element within the Flights.view.xml File

    AttributeValue
    idcolumn6
    minScreenWidthTablet
    demandPopintrue
    hAlignCenter
    1. Open the Flights.view.xml file.

    2. Add the following code between column4 and column5 definition:

      Code snippet
      <Column id="column6" minScreenWidth="Tablet" demandPopin="true" hAlign="Center">
      
      </Column>
      Expand
  4. Add a sap.m.Text element with the following attribute and value to the newly created Column element:

    Attribute-value Pair for the Text Element within the Flights.view.xml File

    AttributeValue
    idtext9
    text{i18n>planeInfo}
    1. Add the following code inside the new Column definition :

      Code snippet
      <Text id="text9" text="{i18n>planeInfo}"/>
      Expand
  5. Before the HoverButton element of the cells aggregation, add a PlaneInfo element with the following attributes and values. Bear in mind that PlaneInfo is placed in a project specific namespace. Now, save your changes.

    Attribute-value Pairs for the PlaneInfo Element within the Flights.view.xml File

    AttributeValue
    seatsMax{Seatsmax}
    seatsOcc{Seatsocc}
    idplaneInfo1
    1. Add the following code in the cells aggregation, before the HoverButton definition:

      Code snippet
      <cust:PlaneInfo id="planeInfo1"
       seatsMax="{Seatsmax}"
       seatsOcc="{Seatsocc}"
      />
      Expand
    2. Save your changes.

  6. Save the Flights.view.xml file and run the application.

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

  7. Verify that the row in the Flights table now shows the PlaneInfo control with the three pieces of data. If the control 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 row in the Flights table now shows the PlaneInfo control with the three pieces of data.

    3. If the control does not display or the application fails to load, open Chrome DevTools by pressing F12 (on your keyboard) and look at the console for errors.

    4. Adjust the PlaneInfoRenderer.js file as needed to get the HTML correct. Use Chrome DevTools as needed to look at the HTML code that is inserted by the custom control. This may take several attempts.

Task 5: Add Icons to the PlaneInfo Control

Steps

  1. Open the PlaneInfoRenderer.js file.

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

  2. To show clearly what the numbers mean, add icons before the numbers of the PlaneInfo table. Show the listed icons at the appropriate position. Use the icon function of the RenderManager. It takes the URL of the icon as a parameter. The URL prefix for the SAP icons is sap-icon://.

    Icons within the PlaneInfoRenderer.js File

    IconInfront Of
    person-placeholderseatsMax
    suitcaseseatsOcc
    1. Add the following code before oRm.text(" "+oControl.getSeatsMax()); :

      Code snippet
      oRm.icon("sap-icon://person-placeholder")
      Expand
    2. Add the following code before oRm.text(" "+oControl.getSeatsOcc()); :

      Code snippet
      oRm.icon("sap-icon://suitcase")
      Expand
  3. Save the PlaneInfoRenderer.js file and run the application.

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

  4. Verify that the icons are appearing on the PlaneInfo control. You may need a few spaces after the icon to move the numbers away from the icon slightly.

    1. Choose a carrier in the Carriers table.

    2. Verify that the icons are appearing on the PlaneInfo control.

  5. You can now close the browser tab in which your application is running.

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