Skip to content

#5820 - Document Select, Step Indicator and Progress bar controls in the Form editor #5821

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
delchev merged 1 commit into from
Apr 1, 2026
Merged

#5820 - Document Select, Step Indicator and Progress bar controls in the Form editor #5821

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions ...-dashboard/src/main/resources/META-INF/dirigible/dashboard/translations/bg-BG/common.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@
"yes": "Да",
"no": "Не",
"ok": "Добре",
"select": "Избери",
"cancel": "Отказ",
"add": "Добави",
"edit": "Редактирай",
Expand Down
7 changes: 7 additions & 0 deletions .../resources-documents/src/main/resources/META-INF/dirigible/documents/configs/documents.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,13 @@ const perspectiveData = {
lazyLoad: true,
icon: '/services/web/documents/images/documents.svg',
};
const viewData = {
region: 'center',
hasHeader: false,
maxWidth: '640px',
...perspectiveData
};
if (typeof exports !== 'undefined') {
exports.getPerspective = () => perspectiveData;
exports.getView = () => viewData;
}
5 changes: 5 additions & 0 deletions ...nts/src/main/resources/META-INF/dirigible/documents/extensions/window-documents.extension
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"module": "documents/configs/documents.js",
"extensionPoint": "application-windows",
"description": "Documents Window"
}
35 changes: 23 additions & 12 deletions .../resources/resources-documents/src/main/resources/META-INF/dirigible/documents/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,14 +43,15 @@
<bk-toolbar-spacer></bk-toolbar-spacer>
<bk-button glyph="sap-icon--search" aria-label="{{'documents:findItem' | t:'Find item'}}" title="{{'documents:findItem' | t:'Find item'}}" state="transparent" ng-click="search.displaySearch = !search.displaySearch"
toggled="search.displaySearch"></bk-button>
<bk-toolbar-separator></bk-toolbar-separator>
<bk-button glyph="sap-icon--add-folder" aria-label="{{'documents:newFolder' | t:'New folder'}}" title="{{'documents:newFolder' | t:'New folder'}}" state="transparent" ng-click="showNewFolderDialog()"></bk-button>
<bk-button glyph="sap-icon--delete" aria-label="{{'documents:delSelected' | t:'Delete selected'}}" title="{{'documents:delSelected' | t:'Delete selected'}}" state="transparent" ng-click="showDeleteItemsDialog($event)"
ng-disabled="!isDeleteItemsButtonEnabled()"></bk-button>
<bk-toolbar-separator></bk-toolbar-separator>
<a bk-button glyph="sap-icon--download-from-cloud" state="transparent" aria-label="{{'documents:downloadZip' | t:'Download zip'}}" title="{{'documents:downloadZip' | t:'Download zip'}}"
<bk-toolbar-separator ng-if="!params.readOnly"></bk-toolbar-separator>
<bk-button ng-if="!params.readOnly" glyph="sap-icon--add-folder" aria-label="{{'documents:newFolder' | t:'New folder'}}" title="{{'documents:newFolder' | t:'New folder'}}" state="transparent" ng-click="showNewFolderDialog()">
</bk-button>
<bk-button ng-if="!params.readOnly" glyph="sap-icon--delete" aria-label="{{'documents:delSelected' | t:'Delete selected'}}" title="{{'documents:delSelected' | t:'Delete selected'}}" state="transparent"
ng-click="showDeleteItemsDialog($event)" ng-disabled="!isDeleteItemsButtonEnabled()"></bk-button>
<bk-toolbar-separator ng-if="!params.readOnly"></bk-toolbar-separator>
<a ng-if="params.container !== 'window'" bk-button glyph="sap-icon--download-from-cloud" state="transparent" aria-label="{{'documents:downloadZip' | t:'Download zip'}}" title="{{'documents:downloadZip' | t:'Download zip'}}"
ng-href="{{ downloadZipPath }}?path={{ folder.path }}"></a>
<bk-popover>
<bk-popover ng-if="!params.readOnly">
<bk-popover-control>
<bk-button is-menu="true" glyph="sap-icon--upload-to-cloud" aria-label="{{'documents:uploadFile' | t:{count: 1}:'Upload file'}}" title="{{'documents:uploadFile' | t:{count: 1}:'Upload file'}}" state="transparent">
</bk-button>
Expand Down Expand Up @@ -85,7 +86,7 @@
<table bk-table inner-borders="horizontal" outer-borders="none" display-mode="compact">
<thead bk-table-header sticky="true">
<tr bk-table-row>
<th bk-table-header-cell content-type="checkbox">
<th bk-table-header-cell content-type="checkbox" ng-if="params.multiple">
<bk-checkbox id="cb-all" ng-model="selection.allSelected" ng-change="selectAllChanged()"></bk-checkbox>
<bk-checkbox-label empty="true" for="cb-all"></bk-checkbox-label>
</th>
Expand All @@ -94,7 +95,7 @@
</thead>
<tbody bk-table-body>
<tr bk-table-row ng-repeat="single in filteredItems = (folder.children | filter: search.filterBy | orderBy: ['-type', 'name'])" selected="single.selected">
<td bk-table-cell content-type="checkbox">
<td bk-table-cell content-type="checkbox" ng-if="params.multiple">
<bk-checkbox id="cb-{{single.name}}" ng-model="single.selected" ng-change="selectionChanged()" aria-labelledby="lbl-{{single.name}}"></bk-checkbox>
<bk-checkbox-label empty="true" for="cb-{{single.name}}"></bk-checkbox-label>
</td>
Expand All @@ -104,7 +105,7 @@
{{ single.name }}
</div>
</td>
<td bk-table-cell fit-content="true" style="text-align: right">
<td ng-if="!params.readOnly" bk-table-cell fit-content="true" style="text-align: right">
<bk-popover>
<bk-popover-control>
<bk-button glyph="sap-icon--overflow" state="transparent" aria-label="{{'documents:aria.rowMenu' | t:{ 'type': isFolder(single) ? '$t(folder)' : '$t(file)' } }}"></bk-button>
Expand All @@ -127,14 +128,14 @@
</tr>
</tbody>
</table>
<div ng-show="showDropZone" class="drop-zone">
<div ng-if="!params.readOnly" ng-show="showDropZone" class="drop-zone">
<bk-message-page glyph="sap-icon--upload-to-cloud" style="pointer-events: none">
<bk-message-page-title>{{'documents:dropFiles' | t:'Drop files here'}}</bk-message-page-title>
</bk-message-page>
</div>
</bk-scrollbar>
</split-pane>
<split-pane size="50">
<split-pane size="50" ng-if="params.container !== 'window'">
<div class="bk-fill-parent" bk-scrollbar ng-show="selectedFile && canPreview && !previewLoading && previewType === 'csv'">
<table bk-table display-mode="compact" outer-borders="bottom">
<thead bk-table-header interactive="false" sticky="true">
Expand All @@ -158,6 +159,16 @@
</split-pane>
</split>
</div>
<bk-bar bar-design="footer" ng-if="params.container === 'window'">
<bk-bar-right>
<bk-bar-element>
<bk-button label="{{'select' | t:'Select'}}" state="emphasized" compact="true" ng-click="closeDialog()"></bk-button>
</bk-bar-element>
<bk-bar-element>
<bk-button label="{{'cancel' | t:'Cancel'}}" state="transparent" compact="true" ng-click="closeDialog(false)"></bk-button>
</bk-bar-element>
</bk-bar-right>
</bk-bar>
<theme></theme>
</body>

Expand Down
63 changes: 50 additions & 13 deletions ...urces/resources-documents/src/main/resources/META-INF/dirigible/documents/js/documents.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ class HistoryStack {
this.history.idx++;
}
}
documents.controller('DocumentsController', ($scope, $http, $timeout, $element, $document, ButtonStates, FileUploader, LocaleService) => {
documents.controller('DocumentsController', ($scope, $http, $timeout, $element, $document, ButtonStates, FileUploader, LocaleService, ViewParameters) => {
const dialogHub = new DialogHub();
const notificationHub = new NotificationHub();
const statusBarHub = new StatusBarHub();
Expand All @@ -74,19 +74,27 @@ documents.controller('DocumentsController', ($scope, $http, $timeout, $element,

let iframe;

angular.element($document[0]).ready(() => {
iframe = $document[0].getElementById('preview-iframe');
iframe.onload = () => $scope.$evalAsync(() => {
$scope.previewLoading = false;
});
iframe.onerror = () => $scope.$evalAsync(() => {
console.error(`Error while loading preview for ${$scope.selectedFile.name}`);
$scope.previewLoading = false;
$scope.params = {
multiple: true,
readOnly: false,
...ViewParameters.get()
};

if ($scope.params.container !== 'window') {
angular.element($document[0]).ready(() => {
iframe = $document[0].getElementById('preview-iframe');
iframe.onload = () => $scope.$evalAsync(() => {
$scope.previewLoading = false;
});
iframe.onerror = () => $scope.$evalAsync(() => {
console.error(`Error while loading preview for ${$scope.selectedFile.name}`);
$scope.previewLoading = false;
});
});
});
}

$scope.loading = false;
$scope.canPreview = true;
$scope.canPreview = $scope.params.container !== 'window';
$scope.previewType = 'web';
$scope.csvData = {
headers: [],
Expand Down Expand Up @@ -147,6 +155,30 @@ documents.controller('DocumentsController', ($scope, $http, $timeout, $element,
$scope.goBack = () => $scope.history.goBack(path => loadFolder(path));
$scope.goForward = () => $scope.history.goForward(path => loadFolder(path));

function getAllSelectedFilePaths() {
let paths = [];
for (let i = 0; i < $scope.folder.children.length; i++) {
if ($scope.folder.children[i].selected) {
paths.push($scope.folder.children[i].path);
}
}
return paths;
};

$scope.closeDialog = (sendSelected = true) => {
if ($scope.params.topic) {
if (sendSelected) {
dialogHub.postMessage({
topic: $scope.params.topic,
data: $scope.params.multiple ? getAllSelectedFilePaths() : [$scope.selectedFile['path']]
});
} else {
dialogHub.triggerEvent($scope.params.topic);
}
}
dialogHub.closeWindow({ id: viewData.id });
};

$scope.getFullPath = (itemName) => {
const path = $scope.folder.path ? ($scope.folder.path + '/' + itemName) : itemName;
return path.replace(/\/\//g, '/');
Expand All @@ -167,6 +199,7 @@ documents.controller('DocumentsController', ($scope, $http, $timeout, $element,
if ($scope.isFolder(cmisObject)) {
openFolder($scope.getFullPath(cmisObject.name));
} else {
$scope.clearSelection();
setSelectedFile(cmisObject);
}
};
Expand Down Expand Up @@ -518,9 +551,13 @@ documents.controller('DocumentsController', ($scope, $http, $timeout, $element,

function setSelectedFile(selectedFile) {
if (selectedFile === null) $scope.selectedFile = selectedFile;
else if ($scope.canPreviewFile(selectedFile.name)) {
else {
$scope.selectedFile = selectedFile;
setPreviewer();
if ($scope.params.container === 'window') {
$scope.selectedFile.selected = true;
} else if ($scope.canPreviewFile(selectedFile.name)) {
setPreviewer();
}
}
};

Expand Down
1 change: 1 addition & 0 deletions ...ale/src/main/resources/META-INF/dirigible/resources-locale/translations/en-US/common.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@
"yes": "Yes",
"no": "No",
"ok": "OK",
"select": "Select",
"cancel": "Cancel",
"add": "Add",
"edit": "Edit",
Expand Down
45 changes: 44 additions & 1 deletion ...in/resources/META-INF/dirigible/template-form-builder-angularjs/ui/controller.js.template
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,31 @@ angular.module('forms', ['blimpKit', 'platformView', 'platformLocale', 'platform
return new Date(value);
});
}
})).directive('modelArrayToString', () => ({
require: 'ngModel',
link: (_scope, _element, _attrs, ngModel) => {
ngModel.${dollar}formatters.push((value) => {
if (Array.isArray(value)) return `"${value.join('", "')}"`;
return value;
});
}
})).constant('Dialogs', new DialogHub()).controller('FormController', ($scope, $http, Dialogs, LocaleService, ViewParameters) => {
$scope._is_view = ViewParameters.get().container !== undefined;
$scope._stepIndicators = {};
${dollar}scope._selectFromDocuments = (modelKey, multiple, uploadEnabled) => {
Dialogs.showWindow({id: 'documentStorage', params: { readOnly: !uploadEnabled, multiple: multiple, topic: '${projectName}.doc.select' } });
const docSelectListener = Dialogs.addMessageListener({
topic: '${projectName}.doc.select',
handler: (data) => {
if (data) {
${dollar}scope.$evalAsync(() => {
${dollar}scope.model[modelKey] = data.length > 1 ? data : data[0];
});
}
Dialogs.removeMessageListener(docSelectListener);
}
});
};
$scope.forms = {
form: {}
};
Expand Down Expand Up @@ -59,7 +82,27 @@ angular.module('forms', ['blimpKit', 'platformView', 'platformLocale', 'platform
$scope.model = {};
#macro(formWidgets $elements)
#foreach($element in $elements)
#if($element.controlId == "input-number")
#if($element.controlId == "stepIndicator" && $element.staticData)
${dollar}scope._stepIndicators['$element.id'] = [];
LocaleService.onInit(() => {
${dollar}scope._stepIndicators['$element.id'].push(
#foreach($step in $element.steps)
{
label: LocaleService.t('$projectName:${tprefix}.$step.translation', '$step.label'),
#if($step.secondaryLabel)
secondaryLabel: '$step.secondaryLabel',
#end
#if($step.glyph)
glyph: '$step.glyph',
#end
#if($step.svg)
svg: '$step.svg',
#end
},
#end
);
});
#elseif($element.controlId == "input-number")
$scope.model.$element.model = 0;
#elseif($element.controlId == "input-checkbox")
$scope.model.$element.model = false;
Expand Down
30 changes: 29 additions & 1 deletion .../main/resources/META-INF/dirigible/template-form-builder-angularjs/ui/index.html.template
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,28 @@ $result##
#else
<img class="bk-contain-image bk-border-box #getPaddingClass($element.padding $element.side)"#if($element.width) width="$element.width"#end#if($element.height) height="$element.height"#end src="$element.imageLink" alt="$element.desc"/>
#end
#elseif($element.controlId == "input-documents")
<bk-form-item horizontal="$element.horizontal">
<bk-form-label colon="true" #if($element.required)ng-required="true"#end for="$element.id">{{ '$projectName:${tprefix}.t.$element.translation' | t:'$element.label' }}</bk-form-label>
<div class="fd-file-uploader" style="flex: 1">
<div class="fd-file-uploader__container">
<bk-input id="$element.id" name="$element.id" class="fd-file-uploader__input" type="text" ng-model="model.$element.model" state="{{ !forms.form['$element.id'].$valid ? 'error' : '' }}"
ng-click="_selectFromDocuments('$element.model', $element.multiple, $element.uploadEnabled)"
model-array-to-string
#if($element.required)
ng-required="true"
#end
#if($element.readonly)
ng-readonly="true"
#end
#if($element.isCompact)
compact="true"
#end>
</bk-input>
<bk-button type="button" #if($element.isCompact)compact="true"#end label="{{'select' | t:'Select'}}" #if($element.readonly)ng-disabled="true"#end ng-click="_selectFromDocuments('$element.model', $element.multiple, $element.uploadEnabled)"></bk-button>
</div>
</div>
</bk-form-item>
#elseif($element.controlId == "input-textarea")
<bk-form-item horizontal="$element.horizontal">
<bk-form-label colon="true" ng-required="$element.required" for="$element.id">{{ '$projectName:${tprefix}.t.$element.translation' | t:'$element.label' }}</bk-form-label>
Expand Down Expand Up @@ -293,15 +315,21 @@ $result##
</tr>
</tbody>
</table>
#elseif($element.controlId == "stepIndicator")
<bk-form-item>
<bk-step-indicator#if($element.staticData) steps="_stepIndicators['$element.id']" current-step="$element.currentStep"#else steps="$element.stepsVar" current-step="$element.stepVar"#end #if($element.iconOnly)icon-only="true"#end></bk-step-indicator>
</bk-form-item>
#elseif($element.controlId == "button")
<bk-button#if($element.isSubmit) type="submit" ng-disabled="!forms.form.$valid"#else type="button"#end label="{{ '$projectName:${tprefix}.t.$element.translation' | t:'$element.label' }}" compact="$element.isCompact"#if($element.type) state="$element.type"#end #if($element.callback) ng-click="$element.callback"#elseif($element.isSubmit && $metadata.url) ng-click="_submit()"#end></bk-button>
#elseif($element.controlId == "paragraph")
<#getPTag($element.format) class="fd-text#if($element.format) bk-pre-wrap#end#if($element.subtitle) bk-text--subtitle#end#if($element.ellipsis) bk-scroll-hidden bk-text--ellipsis#end#if($element.italic) bk-font--italic#end#if($element.fontSize == 'sm') bk-font--small#end#if($element.fontSize == 'lg') bk-font--large#end #getPaddingClass($element.padding $element.side)">#if($element.model){{ model.$element.model }}#else$element.text#end</#getPTag($element.format)>
#elseif($element.controlId == "progress")
<bk-progress-indicator#if($element.variable) current-value="$element.variable"#else current-value="$element.value"#end state="{{$element.state}}" label="{{$element.label}}" aria-label="{{$element.ariaLabel}}"></bk-progress-indicator>
#elseif($element.controlId == "line")
<div class="#if($element.orientation == "h")bk-border--top#else bk-border--left#end" role="presentation"></div>
#elseif($element.controlId == "link")
<bk-form-item>
<bk-link#if($element.variable) ng-href="{{$element.variable}}"#elseif($element.href) href="$element.href"#else href="#"#end#if($element.newTab) target="_blank"#else target="_top"#end>$element.label</bk-link>
<bk-link class="#getPaddingClass($element.padding $element.side)"#if($element.variable) ng-href="{{$element.variable}}"#elseif($element.href) href="$element.href"#else href="#"#end#if($element.newTab) target="_blank"#else target="_top"#end>$element.label</bk-link>
</bk-form-item>
#elseif($element.controlId == "spacer")
<div#if($element.stretch) class="bk-stretch"#else style="#if($element.width)width: ${element.width.intValue()}px;#end#if($element.height)height: ${element.height.intValue()}px#end"#end aria-hidden="true"></div>
Expand Down
Loading
Loading