Skip to Content
Technical Articles
Author's profile photo Suresh Radhakrishnan

Consume Reuse Component


The purpose of this blog is to show how to consume a reuse component. This is the second blog in the series of two – on the topic of Developing and Consuming a Reuse Component.

  1. Develop Reuse Component
  2. Consume Reuse Component (this blog)

The consumption of the reuse component with a simple demo application is explained in this blog. Some of the relevant topics from the earlier blog such as model propagation would also be revisited.

Consumption App Project

Let us create the consuming application. For this purpose, I’m creating a freestyle application with just an input field for Customer ID and a button to initialise / refresh the reuse component.

Component Container

Regardless of whether your application is a free-style or Fiori Elements based, the reuse component always resides inside a component container.

<VBox id="vboxCompCont">
  <core:ComponentContainer id="customerDetailContainer" propagateModel="true" />

As you can see, the propgateModel is set to true. As we already discussed in the earlier blog, this means that the unnamed model of the consuming application along with the binding context would be propagated to the reuse component.

Component Usage – manifest.json

We need to define the component usage in the manifest.json of the consuming application.

    "sap.ui5": {
        "flexEnabled": true,
        "dependencies": {
            "minUI5Version": "1.113.0",
            "libs": {
            "components": {
                "demo.suresh.reusecomp": {
                    "lazy": false
        "componentUsages": {
            "customerDetailComponent": {
                "name": "demo.suresh.reusecomp",
                "settings": {}


The component usage constuerDetailComponent will be used as a usage parameter while creating the component. For this demo purpose, I had turned the lazy loading off.

Initialise the Reuse Component

The application component’s createComponent method returns a promise and while resolved, it provides the created component. We then set the reuse component’s custom attribute (CustomerID) and place it in the component container. I’ve written a initComponent method in the view controller which will be called when the Go button is clicked.

initComponent: function (sCustomerID) {
    if (!this._customerDetailComponent) {
        var oCustomerDetailComponent = this.getOwnerComponent()?.createComponent({
            usage: "customerDetailComponent",
            settings: {
                customerID: sCustomerID
            function (oCustomerDetail) {
                this._customerDetailComponent = oCustomerDetail;
    } else {

onGo: function (oControlEvent) {
    let sCustomerID = this.getView()?.getModel("local")?.getProperty("/CustomerID");
    sCustomerID && this.initComponent(sCustomerID);

The consuming application can change the binding context, which might require refreshing the reuse component. In this demo application I’m using a simple button to trigger the refresh. However, the point is we should take care of initial scenario where the component is not initialised as well as the scenario where the component needs to be refreshed.

Testing in the IDE

While testing the consuming and reuse component in the BAS or VS Code, I used the fiori-tools-servestatic paths in ui5.yaml to point to the local project paths

    - name: fiori-tools-servestatic
      afterMiddleware:  compression
          - path: /resources/demo/suresh/reusecomp
            src: ../reusecomp/webapp
          - path: /resources/demo.suresh.reusecomp
            src: ../reusecomp/webapp


Now everything is ready and it is time to test. The consuming application along with reuse component demo is shown below:


Reuse Component Consumption – Demo


We have seen a simple case of how to develop a reuse component, a consuming application and tested them in the IDE. Though this is just a demo simple application, I hope these two blogs gave you a good understanding of the basics about reuse components.

In a big Enterprise project, during design phase, identifying the reuse components will avoid unnecessary duplication of code, inconsistencies and on-going maintenance issues. As mentioned in the earlier blog an good example is SAP standard Attachment reuse component.

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Shweta Jain
      Shweta Jain

      hi ,

      could you please provide Git link for the same.

      Author's profile photo Suresh Radhakrishnan
      Suresh Radhakrishnan
      Blog Post Author

      Hello Shweta,

      Sorry for the delay. Here are the git links

      Reuse Component

      Component Consumer

      Author's profile photo Diego Alejandro Guizzo
      Diego Alejandro Guizzo


      At the time of deploying in the BTP cloud Foundry, it gives me an error



      el xs-app.json


      "authenticationMethod": "route",
      "routes": [

      "source": "/menuhorario(.*)$",
      "target": "$1",
      "localDir": "../apps/webapp/menuhorario/webapp"
      "source": "/nominagas/(.*)$",
      "target": "$1",
      "localDir": "../apps/webapp/nominagas/webapp"
      "source": "/nominacidis/(.*)$",
      "target": "$1",
      "localDir": "../apps/webapp/nominacidis/webapp"
      "welcomeFile": "/index.html"



      I tried in various ways, but I can't find that it can be used the same as it is done with

      - name: fiori-tools-servestatic

      name: fiori-tools-servestatic locally it works perfectly for me, but I have the problem in the cloud, do you know what I would have to do to make it work for me?