skip to Main Content

SAPUI5: Multicomponent Application

Over the last decade, I have seen the immense possibilities SAP UI5 brings to businesses – sustainability, efficiency, productivity. In my blog today, I will take you through the various components of SAP UI5 and how it contributes to preparing businesses for the future. 

To begin with, SAP UI5 (SAP user interface for HTML 5) has multiple components which are independent and reusable in SAP UI5 applications. This Multi component designing approach can be developed and used in various projects within an organization. Over the course of SAP UI5 development, you can further create different types of components under “project structure”.

Types of SAP UI5 Components 

  1. Faceless Components: Faceless components do not have a user interface and are used for coding where no UI elements are needed.
  2. UI components: UI components are an extension and add rendering functionality to the component.  

Summary:

To render UI components, we must wrap them in a ComponentContainer.

The ComponentContainer separates the application and the embedded component. Because it uses a UIArea to avoid a nested control tree and to separate the eventing of the component’s user interface and the outer application. 

In a simple word it enables you to run one (or more) SAPUI5 application inside another SAPUI5 application. 

This blog contains the functionality to use multiple components in a UI5 application. The application contains multiple components and also has functionality to reuse the components in multiple places as per the requirement. 

These components can be utilized from other applications deployed in the Fiori launchpad. So if any core functionality is developed in one application, it can be reused in other applications without external navigation. You can infer the same in the next section of this blog. 

Project Structure 

I have created an application with multiple components, that means I have defined a folder named comp and created 3 structures of components inside the application.

I have defined VBox in the view to add these components.

I have called the employee and company components from the controller. Find the steps below to know how the project structure is used for the multicomponent scenario.

  1. First I have created the component and then added these components to the     component container. 
  2. To create the component, I have used sap.ui.getCore().createComponent.
  3. You can also use this.getOwnerComponent().createComponent to create the component.
  4. After creation of the component add the component to the component container.
  5. Then add a component container to VBox which is created in view. We can also add a component container to the panel as per the requirement. 

The Employee & Company Component

If we want to create the component from this.getOwnerComponent().createComponent then use the below code.

In the case below, the component name is defined in manifest.json and the same name is used in usage property.

After the above mentioned steps you will be able to render the content defined in employee and company components. Sounds easy? Here comes the best part. 

Reusing the components

I have created one more component structure which I have called from both Employee and Company components to show the component reuse functionality. 

a. Created table component structure inside comp

b. I have created VBox in both view files of components to add the table component

c. From the controller of the both components I have created the component with sap.ui.getCore().createComponent. Then add this to the component container and then to the VBox defined in view.

d. I have also passed a model here which is used in the table component structure

e. From each component we have to pass the model to render the table as per the calling component data.

f. To fetch the model pass from the component we have to use this.getComponentData() in component.js of table component.

Conclusion: With the help of above steps you will be able to create an application with multi components, these components can be reused too. Further, they can be called by the other components. These components cover a clear functionality of the application and can be run by itself. Minimizing your efforts on rendering. Most importantly, It isn’t aware of the other components. Hope you enjoy developing your own application, now. 

 

Vishal Kumar is a Senior Developer at Mindset Consulting LLc. He comes with 8 years of experience in SAP Frontend development. He has worked on various projects of SAP UI5/ Fiori in his career and he loves rigging codes for a bug free UI.

Back To Top