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" />
</VBox>

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
            }
        });
        oCustomerDetailComponent.then(
            function (oCustomerDetail) {
                oCustomerDetail.setCustomerID(sCustomerID);
                this.byId("customerDetailContainer")?.setComponent(oCustomerDetail);
                this._customerDetailComponent = oCustomerDetail;
            }.bind(this)
        );
    } else {
        this._customerDetailComponent.setCustomerID(sCustomerID);
    }
},

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
      configuration:
        paths:
          - path: /resources/demo/suresh/reusecomp
            src: ../reusecomp/webapp
          - path: /resources/demo.suresh.reusecomp
            src: ../reusecomp/webapp

Preview

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

Conclusion

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.