Add the possiblity to load custom javascript on startup (#6457)

config/docker/docker-compose.yml

@@ -138,6 +138,7 @@ services:
     volumes:
       - "./ui-config:/usr/share/nginx/html/config"
       - "./nginx.conf:/etc/nginx/conf.d/default.conf"
+      - "./externalJs:/usr/share/nginx/html/externalJs"
       - "../../src/test/externalWebAppExample:/usr/share/nginx/html/external/appExample"
   cards-external-diffusion:
     container_name: cards-external-diffusion

config/docker/externalJs/example.js

@@ -0,0 +1,9 @@
+/* Copyright (c) 2024, RTE (http://www.rte-france.com)
+ * See AUTHORS.txt
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ * SPDX-License-Identifier: MPL-2.0
+ * This file is part of the OperatorFabric project.
+ */
+console.log('Custom js example executed');

config/docker/ui-config/web-ui.json

@@ -175,5 +175,6 @@
         ]
       }
     }
-  }
+  },
+  "customJsToLoad": ["http://localhost:2002/externalJs/example.js"]
 }

src/docs/asciidoc/deployment/configuration/web-ui_configuration.adoc

@@ -181,6 +181,7 @@ a|authentication mode, available options:
 
 |usercard.useDescriptionFieldForEntityList|false|no|If true, show entity `description` field instead of `name` in user card page
 
+|customJsToLoad||no|List of URLs of javascript files to be loaded at startup
 
 |===
 

src/docs/asciidoc/reference_doc/template_description.adoc

@@ -777,3 +777,8 @@ To show the rich message in an HTML element you can call the `opfab.richTextEdit
 The library https://www.chartjs.org/[charts.js] is integrated in OperatorFabric, it means it's possible to show charts in cards, you can find a bundle example in the operator fabric git (https://github.com/opfab/operatorfabric-core/tree/develop/src/test/resources/bundles/defaultProcess_V1[src/test/resources/bundle/defaultProcess_V1]).
 
 The version of chartjs integrated in OperatorFabric is v3.7.1.
+
+== Custom javascript files
+
+It is possibile to configure Opfab to load custom javascript files at startup. This allows to share common functions and business logic between templates.
+The list of URLs of javascript files to be loaded can be configured using `customJsToLoad` parameter in `web-ui.json` file.

ui/main/src/app/business/application-loader.ts

@@ -120,6 +120,7 @@ export class ApplicationLoader {
         this.initServices();
         loadBuildInTemplates();
         this.initOpfabAPI();
+        await this.loadCustomScripts();
         await this.waitForStreamInitDone();
         this.goToEntryPage();
         this.loadingInProgress = false;
@@ -306,4 +307,15 @@ export class ApplicationLoader {
             RouterService.navigateTo(defaultEntryPage);
         }
     }
+
+    private async loadCustomScripts() {
+        const customScripts = ConfigService.getConfigValue('customJsToLoad');
+        if (customScripts) {
+            for (const script of customScripts) {
+                await import(/* webpackIgnore: true */ script).catch((err) =>
+                    logger.error('Error loading custom script ' + script + ' : ' + err)
+                );
+            }
+        }
+    }
 }