Creating a New SAPUI5 Component

Process for creating a component for SAPUI5 from scratch.

1. Create a new folder with the name of your component, for example button.
2. Create the following files in your folder:

   • Component.js

     If you use particular controls in your component, start with the require statements. If your component depends on an entire library, you can include the require statements in the metadata. The declare statement for the component follows the require statements. Then you extend the UIComponent base class and pass the name of the component as well as the package path to it.

     // define a new (simple) UIComponent
     jQuery.sap.require("sap.ui.core.UIComponent");
     jQuery.sap.require("sap.ui.commons.Button");
     jQuery.sap.declare("samples.components.button.Component");
     
     // new Component
     sap.ui.core.UIComponent.extend("samples.components.button.Component", {
     
         metadata : {
             properties : {
                 text: "string"
             }
         }
     });
     
     
     samples.components.button.Component.prototype.createContent = function(){
         this.oButton = new sap.ui.commons.Button("btn");
         return this.oButton; 
     }; 
     
     /*
     * Overrides setText method of the component to set this text in the button
     */
     samples.components.button.Component.prototype.setText = function(sText) {
         this.oButton.setText(sText);
         this.setProperty("text", sText);
         return this;
     };
     

   • Component.json

     {
         "name": "samples.components.button",
         "version": "0.1.0",
         "description": "Sample button components",
         "keywords": [
             "button",
             "example" 
         ],
         "dependencies": {
         }
     }
     

   The component is now ready to be used in an application. The following code snippet gives an example of the use of the component in two instances:

   // Create a component
          var oComp1 = sap.ui.getCore().createComponent({
           name: "samples.components.button",
           id: "Comp1", 
           settings: {text: "Hello World"}
       });
           // Create a Ui container 
       var oCompCont1 = new sap.ui.core.ComponentContainer("CompCont1", {
           component: oComp1
       });
           // place this Ui Container with the Component inside into UI Area 
       oCompCont1.placeAt("target1");
   
   
           // You can also create a component and container at once. 
           // In this example the container will create a new component according to the name.
       var oCompCont2 = new sap.ui.core.ComponentContainer("CompCont2", {
           name: "samples.components.button",
           settings: {text: "Hello World again"}
       });
       oCompCont2.placeAt("target2");