Integrate External Web Application/UI With DIGIT UI

Steps to integrate external UI with DIGIT UI

Overview

This document provides the steps on how to integrate another UI into the DIGIT UI using iframe.

Steps

1. Enable the Utilities module.

   • Add these MDMS configurations to enable the Utilities module.

   • Add the mentioned changes in your web/src/App.js and web/package.json to enable the module in the Build.

2. Once the Utilities module is enabled, add the following changes to the master (file path given below).

Reference Master details: data/pg/commonmasters/uiCommonConstants.json

  "uiCommonConstants": [
      {
         "shg": {
            "iframe-routes": {
               "home": {
                  "routePath": "/works-shg-app/",
                  "isOrigin": true
               }
            }
         }
      }
   ]

Here -

• shg is the path name to access inside digit-ui;

• home is the route to access it;

• whatever is mentioned inside routePath should be the Application/Pod name that is expected to be shown inside the digit-ui;

3. Once the MDMS changes are applied, access the new application using the following route - <SERVER_URL>/digit-ui/employee/utilities/iframe/<PATH_NAME>/<ROUTE_NAME>

Examples: New Web Application (UI - any framework)

shg app built through flutter

DIGIT UI

integrated the other app through iframe