Show TOC

Creating a New SAPUI5 ComponentLocate this document in the navigation structure

Process for creating a component for SAPUI5 from scratch.


This procedure describes how you create a new component for SAPUI5 from scratch. The example component used in the procedure has a button with configurable text.


  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"sap.ui.core.UIComponent");"sap.ui.commons.Button");"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.setProperty("text", sText);
          return this;
    • Component.json

          "name": "samples.components.button",
          "version": "0.1.0",
          "description": "Sample button components",
          "keywords": [
          "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 
            // 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"}