How to Optimize Multiple SAPUI5 Apps in One Dashboard: Step by step Guide

To combine multiple SAPUI5 applications with separate functionalities into a single dashboard, you need a well-structured architecture that ensures seamless integration, scalability, and maintainability. Here is an overview of how to manage this architecture:

Modular Architecture

• Micro Frontend Approach: Treat each application as a micro frontend. This allows each app to be developed, deployed, and maintained independently.
• Reusable Components: Create common UI components and services that can be reused across different applications to maintain consistency and reduce duplication.

Lets get started

First will create a fresh project called name Demo

Note: you will find github link at the end of blog.

To add a Shell bar (which serves as the Dashboard) in your SAPUI5 application, you should modify the App.view.xml file. This approach ensures that the Shell bar is a common component rendered for every controller.

Now if you see in the above image in the code editor you see line number 38 <tnt:sideContent/> it is responsible for side navigation list to make it dynamic will add a json data in model folder and declare as globally in manifest.json>model

Now will generate Fragment using npm i ui5-route-generator

We need show side navigation list so once we add fragment we need to bind that fragment in app.view.xml inside <tnt:sideContent/>

1. we add a fragment SideNavigation.fragment.xml
2. we insert the content for SideNavigation
3. we open that fragment in our App.view.xml

my path is "sohail9744.demo.fragment.SideNavigation" if you are not able to find your path simple go on the top of your App.view.xml you will find like this below (you can see the controllerName the above to words is your directory path .controller or .fragment is your rest path)

<mvc:View
    controllerName="sohail9744.demo.controller.App"
    xmlns:html="https://www.w3.org/1999/xhtml"
    xmlns:mvc="sap.ui.core.mvc"
    displayBlock="true"        

Now assume in side navigation list every name is having there separate apps now will divide into components how we use to do in react.

1. Create a folder called app inside the webapp folder
2. Create 2 folder called History and myTask because i need manage to applications (you can add multiple folder according to you!
3. in History declare to file View and it's controller
4. Give proper path in your view and controller as you can see higlighted box in below image

Now it's time to configuring routing for this pages go to manifest.json file

1. First Add The RouteName and Declare targetName
2. In TargetName you need to declare View Path (Important)
3. You need to update the keys in your model>dashboardList.json

In the App.controller.js you need code and paste this below code

1. onMenuButtonPress function is for closing and opening side navigation frgment
2. onItemSelect is used for dynamic routing it will get key from dashboardList.json file and navigate to the pages

sap.ui.define(
  [
    "sap/ui/core/mvc/Controller",
    "sap/ui/core/UIComponent"
  ],
  function (BaseController, UIComponent) {
    "use strict";

    return BaseController.extend("sohail9744.demo.controller.App", {
      onInit: function () {
        this.router = UIComponent.getRouterFor(this)
      },

      onMenuButtonPress: function () {
        let toolPage = this.byId('toolPage')
        toolPage?.setSideExpanded(!toolPage?.getSideExpanded());
      },
      onItemSelect: function (ev) {
        let item = ev.getParameter('item').getKey();
        this.router.navTo(item)
      }
    });
  }
);
        

Hurreeeee:) Now everyting is completed it will work if you read all blog.

Live application Demo Example: Link

You can Clone from Github https://github.com/sohail9744/ui5boilerplate

git clone https://github.com/sohail9744/ui5boilerplate.git