From 9dae3550c21ab73af5da330bad40267ca72edc55 Mon Sep 17 00:00:00 2001
From: StanZGenchev <stan.genchev@codbex.com>
Date: Fri, 3 Apr 2026 17:52:47 +0300
Subject: [PATCH] Fixed #5834

Signed-off-by: StanZGenchev <stan.genchev@codbex.com>
---
 .../ui/index.html.template                    |  3 ++
 .../dirigible/editor-form-builder/editor.html | 37 +++++++++++++++++--
 .../editor-form-builder/js/editor.js          | 35 ++++++++++--------
 3 files changed, 57 insertions(+), 18 deletions(-)

diff --git a/components/template/template-form-builder-angularjs/src/main/resources/META-INF/dirigible/template-form-builder-angularjs/ui/index.html.template b/components/template/template-form-builder-angularjs/src/main/resources/META-INF/dirigible/template-form-builder-angularjs/ui/index.html.template
index ef299fabec..3dc8c91302 100644
--- a/components/template/template-form-builder-angularjs/src/main/resources/META-INF/dirigible/template-form-builder-angularjs/ui/index.html.template
+++ b/components/template/template-form-builder-angularjs/src/main/resources/META-INF/dirigible/template-form-builder-angularjs/ui/index.html.template
@@ -37,6 +37,9 @@ $result##
 		<script type="text/javascript" src="controller.js"></script>
 #foreach($script in $scripts)
 		<script type="text/javascript" src="$script.url"></script>
+#end
+#foreach($style in $styles)
+		<link href="$style.url" rel="stylesheet" />
 #end
 	</head>
 
diff --git a/components/ui/editor-form-builder/src/main/resources/META-INF/dirigible/editor-form-builder/editor.html b/components/ui/editor-form-builder/src/main/resources/META-INF/dirigible/editor-form-builder/editor.html
index ea118a8962..edc1382ea1 100644
--- a/components/ui/editor-form-builder/src/main/resources/META-INF/dirigible/editor-form-builder/editor.html
+++ b/components/ui/editor-form-builder/src/main/resources/META-INF/dirigible/editor-form-builder/editor.html
@@ -42,6 +42,7 @@
                 <bk-icon-tab-bar-tab label="Feeds" tab-id="feeds" ng-click="switchTab('feeds')"></bk-icon-tab-bar-tab>
                 <bk-icon-tab-bar-tab label="Code" tab-id="code" ng-click="switchTab('code')"></bk-icon-tab-bar-tab>
                 <bk-icon-tab-bar-tab label="Scripts" tab-id="scripts" ng-click="switchTab('scripts')"></bk-icon-tab-bar-tab>
+                <bk-icon-tab-bar-tab label="Styles" tab-id="styles" ng-click="switchTab('styles')"></bk-icon-tab-bar-tab>
                 <bk-icon-tab-bar-buttons align-right="true">
                     <bk-button state="transparent" glyph="sap-icon--save" label="Save" aria-label="save" ng-click="shortcuts()" ng-disabled="!(isFormValid() && changed)"></bk-button>
                     <bk-button state="transparent" glyph="sap-icon-TNT--operations" aria-label="Regenerate" title="Regenerate" label="Regenerate" ng-click="regenerate()" ng-disabled="changed || !canRegenerate"></bk-button>
@@ -222,7 +223,7 @@ <h4 bk-panel-title>
             <bk-icon-tab-bar-panel class="bk-vbox bk-fill-parent fb-panel" tab-id="scripts" ng-show="selectedTab === 'scripts'">
                 <bk-toolbar has-title="false">
                     <bk-toolbar-spacer></bk-toolbar-spacer>
-                    <bk-button glyph="sap-icon--add" title="Add script URL to list" state="transparent" label="Add" aria-label="Add script URL to list" ng-click="addScript()"></bk-button>
+                    <bk-button glyph="sap-icon--add" title="Add script URL to list" state="transparent" label="Add" aria-label="Add script URL to list" ng-click="addUrl(true)"></bk-button>
                 </bk-toolbar>
                 <bk-scrollbar class="bk-fill-parent">
                     <table bk-table display-mode="compact" outer-borders="bottom">
@@ -241,8 +242,38 @@ <h4 bk-panel-title>
                                 <td bk-table-cell>{{script.name}}</td>
                                 <td bk-table-cell>{{script.url}}</td>
                                 <td bk-table-cell fit-content="true">
-                                    <bk-button glyph="sap-icon--edit" title="Edit script" state="transparent" aria-label="Edit script" ng-click="editScript(script)"></bk-button>
-                                    <bk-button glyph="sap-icon--delete" title="Delete script" state="transparent" aria-label="Delete script" ng-click="deleteScript($index)"></bk-button>
+                                    <bk-button glyph="sap-icon--edit" title="Edit script" state="transparent" aria-label="Edit script" ng-click="editUrl(script, true)"></bk-button>
+                                    <bk-button glyph="sap-icon--delete" title="Delete script" state="transparent" aria-label="Delete script" ng-click="deleteUrl($index, true)"></bk-button>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </bk-scrollbar>
+            </bk-icon-tab-bar-panel>
+            <bk-icon-tab-bar-panel class="bk-vbox bk-fill-parent fb-panel" tab-id="styles" ng-show="selectedTab === 'styles'">
+                <bk-toolbar has-title="false">
+                    <bk-toolbar-spacer></bk-toolbar-spacer>
+                    <bk-button glyph="sap-icon--add" title="Add style URL to list" state="transparent" label="Add" aria-label="Add style URL to list" ng-click="addUrl(false)"></bk-button>
+                </bk-toolbar>
+                <bk-scrollbar class="bk-fill-parent">
+                    <table bk-table display-mode="compact" outer-borders="bottom">
+                        <thead bk-table-header sticky="true" interactive="false">
+                            <tr bk-table-row>
+                                <th bk-table-header-cell>Name</th>
+                                <th bk-table-header-cell>URL</th>
+                                <th bk-table-header-cell></th>
+                            </tr>
+                        </thead>
+                        <tbody bk-table-body>
+                            <tr ng-if="formData.styles.length === 0" bk-table-row>
+                                <td bk-table-cell no-data="true">No styles.</td>
+                            </tr>
+                            <tr bk-table-row hoverable="false" ng-repeat="style in formData.styles track by $index">
+                                <td bk-table-cell>{{style.name}}</td>
+                                <td bk-table-cell>{{style.url}}</td>
+                                <td bk-table-cell fit-content="true">
+                                    <bk-button glyph="sap-icon--edit" title="Edit style" state="transparent" aria-label="Edit style" ng-click="editUrl(style, false)"></bk-button>
+                                    <bk-button glyph="sap-icon--delete" title="Delete style" state="transparent" aria-label="Delete style" ng-click="deleteUrl($index, false)"></bk-button>
                                 </td>
                             </tr>
                         </tbody>
diff --git a/components/ui/editor-form-builder/src/main/resources/META-INF/dirigible/editor-form-builder/js/editor.js b/components/ui/editor-form-builder/src/main/resources/META-INF/dirigible/editor-form-builder/js/editor.js
index 23852b96d9..e432f790e2 100644
--- a/components/ui/editor-form-builder/src/main/resources/META-INF/dirigible/editor-form-builder/js/editor.js
+++ b/components/ui/editor-form-builder/src/main/resources/META-INF/dirigible/editor-form-builder/js/editor.js
@@ -44,6 +44,7 @@ editorView.controller('DesignerController', ($scope, $window, $document, $timeou
     $scope.formData = {
         feeds: [],
         scripts: [],
+        styles: [],
         code: ''
     };
 
@@ -2209,9 +2210,9 @@ editorView.controller('DesignerController', ($scope, $window, $document, $timeou
         $scope.fileChanged();
     };
 
-    $scope.addScript = () => {
+    $scope.addUrl = (script = true) => {
         dialogHub.showFormDialog({
-            title: 'Add script',
+            title: `Add ${script ? 'script' : 'style'}`,
             form: {
                 'asName': {
                     label: 'Name',
@@ -2236,7 +2237,7 @@ editorView.controller('DesignerController', ($scope, $window, $document, $timeou
         }).then((form) => {
             if (form) {
                 $scope.$evalAsync(() => {
-                    $scope.formData.scripts.push({
+                    $scope.formData[script ? 'scripts' : 'styles'].push({
                         name: form['asName'],
                         url: form['asUrl']
                     });
@@ -2246,17 +2247,17 @@ editorView.controller('DesignerController', ($scope, $window, $document, $timeou
         }, (error) => {
             console.error(error);
             dialogHub.showAlert({
-                title: 'New script error',
-                message: 'There was an error while adding the new script.',
+                title: `New ${script ? 'script' : 'style'} error`,
+                message: `There was an error while adding the new ${script ? 'script' : 'style'}.`,
                 type: AlertTypes.Error,
                 preformatted: false,
             });
         });
     };
 
-    $scope.editScript = (script) => {
+    $scope.editUrl = (item, script = true) => {
         dialogHub.showFormDialog({
-            title: 'Edit script',
+            title: `Edit ${script ? 'script' : 'style'}`,
             form: {
                 'asName': {
                     label: 'Name',
@@ -2264,7 +2265,7 @@ editorView.controller('DesignerController', ($scope, $window, $document, $timeou
                     placeholder: '',
                     type: 'text',
                     minlength: 1,
-                    value: script.name,
+                    value: item.name,
                     focus: true,
                     required: true
                 },
@@ -2274,7 +2275,7 @@ editorView.controller('DesignerController', ($scope, $window, $document, $timeou
                     placeholder: '',
                     type: 'text',
                     minlength: 1,
-                    value: script.url,
+                    value: item.url,
                     required: true
                 },
             },
@@ -2283,24 +2284,24 @@ editorView.controller('DesignerController', ($scope, $window, $document, $timeou
         }).then((form) => {
             if (form) {
                 $scope.$evalAsync(() => {
-                    script.name = form['asName'];
-                    script.url = form['asUrl'];
+                    item.name = form['asName'];
+                    item.url = form['asUrl'];
                     $scope.fileChanged();
                 });
             }
         }, (error) => {
             console.error(error);
             dialogHub.showAlert({
-                title: 'New script error',
-                message: 'There was an error while adding the new script.',
+                title: `New ${script ? 'script' : 'style'} error`,
+                message: `There was an error while adding the new ${script ? 'script' : 'style'}.`,
                 type: AlertTypes.Error,
                 preformatted: false,
             });
         });
     };
 
-    $scope.deleteScript = (index) => {
-        $scope.formData.scripts.splice(index, 1);
+    $scope.deleteUrl = (index, script = true) => {
+        $scope.formData[script ? 'scripts' : 'styles'].splice(index, 1);
         $scope.fileChanged();
     };
 
@@ -2480,6 +2481,9 @@ editorView.controller('DesignerController', ($scope, $window, $document, $timeou
                     if (response.data.hasOwnProperty('scripts')) {
                         $scope.formData.scripts = response.data.scripts;
                     }
+                    if (response.data.hasOwnProperty('styles')) {
+                        $scope.formData.styles = response.data.styles;
+                    }
                     if (response.data.hasOwnProperty('form')) {
                         createDomFromJson(migrateForm(response.data.form));
                     }
@@ -2542,6 +2546,7 @@ editorView.controller('DesignerController', ($scope, $window, $document, $timeou
             metadata: getMetadataFromForm(),
             feeds: $scope.formData.feeds,
             scripts: $scope.formData.scripts,
+            styles: $scope.formData.styles,
             code: $scope.formData.code,
             form: createFormJson($scope.formModel)
         };