Creating Component from another Component of different Applications

Dear All,

I was just wondering that SAPUI5 uses Component based methodology, then how come we can use concept of reusability.

Let me show you how we can call a component’s method, in another component.

Firstly, let’s create a SAPUI5 project without ‘initial View’

Create a Component.js file in webcontent ‘folder’, write code as:-

// declaring Component Module
jQuery.sap.declare("test.Component");
// extending UI Component
sap.ui.core.UIComponent.extend("test.Component",{
 // defining a public method myButton which returns a Button with the text 'Login'
   myButton : function(){
    return new sap.m.Button({text:"login"});
   }
})

code of index page as :

<script>
  jQuery.sap.registerModulePath("test", "./");
  new sap.ui.core.ComponentContainer({
  name : "test"
  }).placeAt("content");
  </script>

deploy it to “SAP ABAP Repository” referring to http://scn.sap.com/docs/DOC-42820

Now, let’s create another Component (calling component )as same as above:-

in index.page

<script>
jQuery.sap.registerModulePath("test3", "./");
  new sap.ui.core.ComponentContainer({
  name : "test3"
  }).placeAt("content");
  </script>

in Component.js

jQuery.sap.declare("test3.Component");
sap.ui.core.UIComponent.extend("test3.Component",{
  createContent : function(){
// creating Component instance of above defined Component
  var ocomp1 = sap.ui.getCore().createComponent({
// test is a declaration name of the calling component
  name : "test",
//note: z_comp1 is the bsp application name
 
url : "/sap/bc/ui5_ui5/sap/z_comp1"
  });
    oButton = ocomp1.myButton();
  return oButton;
  },
})

Deploy it to same ABAP repository… and run the application as ‘Run on ABAP Server’.

This is how we can use a modularization in SAPUI5, team of developer can divide their work, and can integrate application.

Thank you.