Connecting multiple UI5 projects

Question

I have multiple UI5 projects (lets call app X and Y ), and I am using router in app X,

I have a toolbar menu in my app X , and when I click on one of the routes, I want it to redirect me to my other project called app Y .

Is it somehow possible with using SAP UI5 ?

Both of my projects are in the same cloud folder. ( I am developing them on sap cloud platform and I need one HTML5 App in the other HTML5 App )

Answer 1

There are more ways to solve your problem.

1. Attach a listener to the route. If the click is triggered you should step into the handler function of your route. Then you could simply location.replace("<location of app Y>")
2. The add the application Y as Component into your application X. Just use a ComponentContainer for this and place the ComponentContainer into a View, or any div of your DOM

Maybe it makes sense, to use a "root" applciation where application X and application Y are encapsulated and the router of the root application adds the other applications as ComponentContainer into views of root app. If the child apps also use a router functionality you can add the parent component to the routes of the child applications.

Answer 2

The architecture

First you should think about the dependencies and hierachy of X to Y. And then orchestrate your nested components. Some examples:

Case 1: The hirachy is equal and they dont have dependencies, then create a root component for an independent navigation and on single load of the UI5 framework. Nest X and Y into this component. Might be good to have them as dependencies injected via a module loader.

Case 2: Y is part of X and is depends on it eg. control, models etc. Then X should nest component Y in order to forward these dependencies.

Case etc.

Implementaion

To load a new 'sap.ui.core.Component' in an existing one on a specific place eg. on a navigation route. You can simply add a component with ComponentContainer as XMLTag within the view on the desired place in the view structure to load the component there. Ps. make sure you provided the component namespace in your application bootsrap. The nested component should load and render itself.

Answer 3

If you use the Fiori launchpad you can use semantic object to navigate from on app to the other. See this for more information about navigation in fiori launchpad cloud

If you are not using the Fiori Launchpad i would advise u use the solution boghyon provided by adding them to your root resources.