Skip to Content
Previous

SAPUI5 extending a simple Control

By Akshen

Part 1 of 4. In this tutorial you will learn how to extend a simple UI5 control.

You will learn

You will learn how to extend a control in your application from scratch.
Understand the basic flow of control and it’s required parameters.

Details


  1. Open Eclipse IDE and Create a new SAP Project in Eclipse as follows:

    sapui5_select_project

    sapui5_select_app

    sapui5_project

  2. In your index.html file between the scripts tag add the following:

       sap.ui.core.Control.extend()
    

    step_one

  3. Then you have to define the extended control by adding Metadata to it.

    sap.ui.core.Control.extend("valueEditor",{
    
    metadata : {
      	    properties : {
      		     label : "string"
       }
    },
    renderer: {
        }
    });
    

    step_two

  4. Now add the renderer which defines the HTML structure that will be added to the DOM tree of your application whenever the control is instantiates in a view.

    renderer : function(oRm,oControl){
    
        oRm.write("<div style=padding-top:5px;color:#1F3A93;>");
        oRm.write(oControl.getLabel());
        oRm.write("<br>");
        oRm.write("</div>");
    
    }
    

    step_three

  5. Now you will create an object of the extended control, pass the values for it’s property and place the object in the content. Since you are going to add other elements in the content you will edit the existing <div id="content"> as <div id="content_1">

    var oLabel = new valueEditor({
      				label : "Login Preview",
      			 });
      oLabel.placeAt("content_1");
    

    step_four

  6. Your final code will look like this:

    all_code

  7. Now to run the code, right-click on the project file and select run as Web App Preview.

    run_as

    finaloutput


Next Steps

Updated 06/13/2016

Time to Complete

10 Min

Beginner

Tags

Prerequisites

Next
Back to top