Skip to Content

SAPUI5 extending a simple Control

test
0 %
SAPUI5 extending a simple Control
Details
// Explore More Tutorials

SAPUI5 extending a simple Control

12/12/2017

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

Details

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.


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

    sapui5_select_projectsapui5_select_appsapui5_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

Next Steps

Prerequisites

Back to top