SAP UI5 - Key Components

SAP UI5 has multiple components which are independent and reusable objects in UI5 application. These components can be developed by different people and can be used in different projects.
An application can use the components from different locations and hence you can easily get the structure of an application. You can create different types of components under SAP UI5 development.
Faceless components are used to get the data from the backend system and they don’t contain a user interface.
Example− They are a part of class sap.ui.core.component
UI components are used to add rendering functionality and represent a screen area or element on the user interface.
Example − UI component can be a button with settings to perform some task. It is a part of class: sap.ui.core.UIComponent
Note − sap.ui.core.component is the base class for faceless and UI components. To define the extensibility function, the components can inherit from the base class or from other components in UI development.
The module name of a component is known as the package name, and .component where the package name is defined as the name of the parameter passed to the component constructor.
SAP UI5 components can also be divided as per the system landscape −
Client side component: This includes,

Control libraries sap.m, sap.ui.common, etc.
Core Javascript
Test includes HTML and Javascript

Control libraries sap.m, sap.ui.common, etc.
Core Javascript
Test includes HTML and Javascript
Server side component

Theming Generator
Control and application development tools in Eclipse
Resource handler

Theming Generator
Control and application development tools in Eclipse
Resource handler
Each component is represented in the form of a folder and contains the name of the components and the resources required to manage the component.
Each component should contain the following files −
Component.json file that contains metadata for design time and is used only for design time tools.
Component.json file that contains metadata for design time and is used only for design time tools.
Component.js is used to define properties, events, and components methods that are responsible for runtime metadata.
Component.js is used to define properties, events, and components methods that are responsible for runtime metadata.
To create a new component, you have to create new folder. Let us name this as button.
Next is to create the component.js file
Then, you have to extend UI component base class sap.ui.core.UIComponent.extend and enter the name of the component and package path.
Later, to define a new component, you have to start with the require statement as follows −
// defining a new UI Component
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;
};
The next step is to define the component.json in your folder as follows −
{
   "name": "samples.components.button",
   "version": "0.1.0",
   "description": "Sample button component",
   "keywords": [
      "button",
      "example"
   ],
   "dependencies": {
   }
}
To use a component, you have to wrap the component in a component container. You cannot directly use a UI component in a page using placeAt method. Another way is to pass the component to the componentContainer constructor.
It includes adding the component to the container and using placeAt method to place the component on the page.
var oComp = sap.ui.getCore().createComponent({
   name: "samples.components.shell",
   id: "Comp1",
   settings: {appTitle: "Hello John"}
});

var oCompCont = new sap.ui.core.ComponentContainer("CompCont1", {
   component: oComp
});

oCompCont.placeAt("target1");
//using placeAt method
A component container carries specific settings and also contains the lifecycle methods of a regular control. The following code segment shows how to pass the component to the componentContainer constructor.
var oCompCont2 = new sap.ui.core.ComponentContainer("CompCont2", {
   name: " samples.components.shell",
   settings: {text: "Hello John 1"}
});
oCompCont2.placeAt("target2");


    25 Lectures 
     6 hours 

 Sanjo Thomas

    26 Lectures 
     2 hours 

 Neha Gupta

    30 Lectures 
     2.5 hours 

 Sumit Agarwal

    30 Lectures 
     4 hours 

 Sumit Agarwal

    14 Lectures 
     1.5 hours 

 Neha Malik

    13 Lectures 
     1.5 hours 

 Neha Malik
 Print
 Add Notes
 Bookmark this page