Embedding a Fiori app within another - SAP Build Work Zone, standard edition

[binil_sivan2]

This blog delineates the process of embedding a Fiori app within another Fiori app deployed in SAP Build Work Zone, standard edition. Here, for clarity, "Fiori apps" refers specifically to applications developed using SAPUI5.

Libraries, Fragments, and Component Containers stand out as the primary options for code reuse in SAPUI5-based Fiori applications. When considering the embedding of one Fiori app (which may be independently deployed) within another Fiori app, the optimal approach is to employ Component Containers, given that Fiori apps are built upon Components.

A Component Container serves as a receptacle for a component, as the name implies. It facilitates the loading of the child Fiori app based on a Component to a designated position within the Parent Fiori App.

When these apps are deployed within the SAP backend as BSP applications, no additional processing is necessary beyond linking both apps using relative paths during the instantiation of the Component Container. The backend system automatically resolves the path and identifies the correct app to load. However, if these apps are independently deployed within the BTP Cloud Foundry environment, and managed descriptors are utilized to register them with Build Work Zone-based portals, the parent app cannot load the child app solely using the relative path.

The pivotal step occurs within the mta.yaml file of the Child App.

Upon deployment of a Fiori App in Cloud Foundry, three service instances are generated by default: Destination Service, App Repository Service, and Authorization & Trust Management Service.

It is essential for the child app to reuse destination service of the parent app to enable resolution of Component Container paths.

mta.yaml file of the Child App needs to be adapted so that it can reuse the destination service of the Parent App.

Modules Section of mta.yaml of Child App:

Resources Section of mta.yaml of Child App:

By configuring these settings, the Component Container specified in the parent app will successfully load the Component from the child app and embed the child App into the Parent App.

Screenshots of an app which uses child app embedding on parent app is given below:

Parent App before embedding:

Child App launched independently:

Parent App with embedding enabled: