14.0.0: formio upgrade

backend/app/gzac/src/dev/resources/config/case/formio-test/1-0-0/case-definition-process-link/formio-test.case-definition-process-link.json

@@ -0,0 +1,6 @@
+[
+    {
+        "processDefinitionKey": "document-upload",
+        "linkType": "DOCUMENT_UPLOAD"
+    }
+]

backend/app/gzac/src/dev/resources/config/case/formio-test/1-0-0/form/valtimo-file-uploader-test.form.json

@@ -22,7 +22,7 @@
             "validateWhenHidden": false,
             "truncateMultipleSpaces": false,
             "validate": {
-                "required": true
+                "required": false
             }
         },
         {

documentation/SUMMARY.md

@@ -171,6 +171,8 @@
 ## Release notes
 
 * [Release notes](release-notes/release-notes.md)
+* [14.x.x](release-notes/14.x.x/README.md)
+  * [14.0.0](release-notes/14.x.x/14.0.0/README.md)
 * [13.x.x](release-notes/13.x.x/README.md)
   * [13.18.0](release-notes/13.x.x/13.18.0/README.md)
   * [13.17.0](release-notes/13.x.x/13.17.0/README.md)

documentation/fundamentals/getting-started/compatibility-matrix.md

@@ -10,6 +10,13 @@ Follow the instructions [on this page](https://update.angular.io/) for upgrading
 Mixing versions is not recommended. Valtimo is always tested according to the matrix. Hotfixes are supported on all versions.
 {% endhint %}
 
+## Major 14
+
+| Valtimo backend libraries | Valtimo frontend libraries | Java | Kotlin | Spring Boot | Node   | Operaton     | Angular                                                                        |
+|---------------------------|----------------------------|------|--------|-------------|--------|--------------|--------------------------------------------------------------------------------|
+| 14.0.0                    | 14.0.0                     | 21   | 2.1.20 | 3.4.5       | 20 LTS | 1.0.0-beta-4 | 19 ([browser support](https://angular.dev/reference/versions#browser-support)) |
+
+
 ## Major 13
 
 | Valtimo backend libraries | Valtimo frontend libraries | Java | Kotlin | Spring Boot | Node   | Operaton     | Angular                                                                        |

documentation/release-notes/14.x.x/14.0.0/README.md

@@ -0,0 +1,19 @@
+# 14.0.0
+
+{% hint style="info" %}
+**Release date 00-00-YYYY**
+{% endhint %}
+
+## New Features
+
+* **New feature title**
+
+  New feature explanation.
+
+## Enhancements
+
+* **Upgraded Form.io to version 5**
+
+  Valtimo has upgraded its Form.io implementation to `@formio/js` v5.3.0 and `@formio/angular` v9.0.2.
+
+  **Main change:** The core Form.io library has been renamed from `formiojs` to `@formio/js`.

documentation/release-notes/14.x.x/14.0.0/back-end-migration.md

@@ -0,0 +1 @@
+# Back-end migration

documentation/release-notes/14.x.x/14.0.0/front-end-migration.md

@@ -0,0 +1,2 @@
+# Front-end migration
+

documentation/release-notes/14.x.x/README.md

@@ -0,0 +1 @@
+# Major 14

frontend/package.json

@@ -218,7 +218,7 @@
     "@carbon/icons": "11.59.0",
     "@carbon/styles": "1.80.0",
     "@carbon/themes": "11.51.0",
-    "@formio/angular": "7.0.0",
+    "@formio/angular": "9.0.2",
     "@foxythemes/bootstrap-datetime-picker-bs4": "2.3.5",
     "@mdi/font": "7.4.47",
     "@ng-bootstrap/ng-bootstrap": "11.0.1",
@@ -247,7 +247,7 @@
     "dmn-js": "17.2.0",
     "dropzone": "6.0.0-beta.2",
     "flatpickr": "4.6.13",
-    "formiojs": "4.19.5",
+    "@formio/js": "5.3.0",
     "hammerjs": "2.0.8",
     "heatmap.js-fixed": "2.0.2",
     "ids": "^3.0.1",

frontend/projects/valtimo/components/ng-package.json

@@ -30,7 +30,7 @@
     "flatpickr",
     "lodash",
     "jwt-decode",
-    "formiojs",
+    "@formio/js",
     "deepmerge-ts",
     "@carbon/charts-angular",
     "@types/topojson",

frontend/projects/valtimo/components/package.json

@@ -16,8 +16,8 @@
     "@ngx-translate/core": "16.0.4",
     "@ngx-translate/http-loader": "16.0.1",
     "@ng-bootstrap/ng-bootstrap": "11.0.1",
-    "@formio/angular": "7.0.0",
-    "formiojs": "4.19.5",
+    "@formio/angular": "9.0.2",
+    "@formio/js": "5.3.0",
     "monaco-editor": "0.50.0",
     "ngx-spinner": "19.0.0",
     "tslib": "2.8.1",

frontend/projects/valtimo/components/src/lib/components/form-io/components/form-io-builder/form-io-builder.component.ts

@@ -15,17 +15,16 @@
  */
 
 import {Component, EventEmitter, Injector, Input, OnInit, Output} from '@angular/core';
-import {Components} from 'formiojs';
+import {Components} from '@formio/js';
 import {distinctUntilChanged, map, switchMap, tap} from 'rxjs/operators';
 import {TranslateService} from '@ngx-translate/core';
-import {FormioOptions} from '@formio/angular/';
 import {FormIoStateService} from '../../services/form-io-state.service';
 import {BehaviorSubject, combineLatest, Observable, startWith} from 'rxjs';
 import {
   addValueResolverSelectorToEditform,
   modifyEditFormApiKeyInput,
 } from './form-io-builder.utils';
-import {FormioContextParams, ValtimoFormioOptions} from '../../../../models';
+import {FormioContextParams, FormioOptions, ValtimoFormioOptions} from '../../../../models';
 import {deepmerge} from 'deepmerge-ts';
 import {isEqual} from 'lodash';
 import {

frontend/projects/valtimo/components/src/lib/components/form-io/components/form-io-currency/currency-edit-form.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {Components} from 'formiojs';
+import {Components} from '@formio/js';
 
 const TextFieldEditForm = Components.components.textfield.editForm;
 

frontend/projects/valtimo/components/src/lib/components/form-io/components/form-io-current-user/form-io-current-user-edit-form.ts

@@ -14,53 +14,11 @@
  * limitations under the License.
  */
 
-export const formIoCurrentUserEditForm = () => ({
-  components: [
-    {
-      key: 'type',
-      type: 'hidden',
-    },
-    {
-      key: 'label',
-      type: 'textfield',
-      input: true,
-      label: 'Label',
-      placeholder: 'Label',
-      defaultValue: 'Valtimo Current User',
-      validate: {
-        required: true,
-      },
-    },
-    {
-      key: 'key',
-      type: 'textfield',
-      input: true,
-      label: 'Property Name',
-      placeholder: 'Property Name',
-      tooltip: 'The name of this field in the API endpoint.',
-      validate: {
-        required: true,
-      },
-    },
-    {
-      key: 'tableView',
-      type: 'checkbox',
-      label: 'Table View',
-      tooltip: 'If checked, this value will show up in the table view of the submissions list.',
-    },
-    {
-      key: 'hideLabel',
-      type: 'checkbox',
-      label: 'Hide Label',
-      tooltip:
-        'Hide the label of this component. This setting will display the label in the form builder, but hide the label when the form is rendered.',
-    },
-    {
-      key: 'hidden',
-      type: 'checkbox',
-      label: 'Hidden',
-      tooltip:
-        'A hidden field is still a part of the form JSON, but is hidden when viewing the form is rendererd.',
-    },
-  ],
-});
+import {Components} from '@formio/js';
+
+const TextfieldEditForm = Components.components.textfield.editForm;
+
+export const formIoCurrentUserEditForm = () => {
+  const editForm = TextfieldEditForm();
+  return editForm;
+};

frontend/projects/valtimo/components/src/lib/components/form-io/components/form-io-resource-selector/form-io-resource-selector.formio.ts

@@ -15,7 +15,7 @@
  */
 
 import {Injector} from '@angular/core';
-import {Components, Formio} from 'formiojs';
+import {Components, Formio} from '@formio/js';
 import {UploadProviderService} from '@valtimo/resource';
 import {FormIoStateService} from '../../services/form-io-state.service';
 import {take} from 'rxjs/operators';

frontend/projects/valtimo/components/src/lib/components/form-io/components/form-io-uploader/form-io-uploader-edit-form.ts

@@ -14,47 +14,22 @@
  * limitations under the License.
  */
 
-export const formIoUploaderEditForm = () => ({
-  components: [
-    {key: 'type', type: 'hidden'},
-    {
-      type: 'textfield',
-      input: true,
-      key: 'label',
-      label: 'Label',
-      placeholder: 'Label',
-      validate: {
-        required: true,
-      },
-    },
-    {
-      type: 'checkbox',
-      input: true,
-      inputType: 'checkbox',
-      key: 'validate.required',
-      label: 'Required',
-      validate: {
-        required: false,
-      },
-    },
-    {
-      type: 'textfield',
-      input: true,
-      key: 'key',
-      label: 'Property Name',
-      placeholder: 'Property Name',
-      tooltip: 'The name of this field in the API endpoint.',
-      validate: {
-        required: true,
-      },
-    },
+import {Components} from '@formio/js';
+
+const TextfieldEditForm = Components.components.textfield.editForm;
+
+export const formIoUploaderEditForm = () => {
+  const editForm = TextfieldEditForm();
+
+  const customComponents = [
     {
       type: 'textfield',
       input: true,
       key: 'customOptions.title',
       label: 'Title',
       placeholder: 'Title',
       tooltip: 'Leave empty to use the default title',
+      weight: 10,
       validate: {
         required: false,
       },
@@ -65,6 +40,7 @@ export const formIoUploaderEditForm = () => ({
       inputType: 'checkbox',
       key: 'customOptions.hideTitle',
       label: 'Hide title',
+      weight: 11,
       validate: {
         required: false,
       },
@@ -76,6 +52,7 @@ export const formIoUploaderEditForm = () => ({
       label: 'Subtitle',
       placeholder: 'Title',
       tooltip: 'Leave empty to hide subtitle',
+      weight: 12,
       validate: {
         required: false,
       },
@@ -87,6 +64,7 @@ export const formIoUploaderEditForm = () => ({
       label: 'Maximum file size',
       placeholder: 'Maximum file size',
       defaultValue: 5,
+      weight: 13,
       validate: {
         required: true,
       },
@@ -97,6 +75,7 @@ export const formIoUploaderEditForm = () => ({
       inputType: 'checkbox',
       key: 'customOptions.hideMaxFileSize',
       label: 'Hide maximum file size',
+      weight: 14,
       validate: {
         required: false,
       },
@@ -107,9 +86,20 @@ export const formIoUploaderEditForm = () => ({
       inputType: 'checkbox',
       key: 'customOptions.camera',
       label: 'Allow camera uploads',
+      weight: 15,
       validate: {
         required: false,
       },
     },
-  ],
-});
+  ];
+
+  const tabsComponent = editForm.components.find(component => component.key === 'tabs');
+  if (tabsComponent) {
+    const displayTab = tabsComponent.components.find(tab => tab.key === 'display');
+    if (displayTab) {
+      displayTab.components.unshift(...customComponents);
+    }
+  }
+
+  return editForm;
+};

frontend/projects/valtimo/components/src/lib/components/form-io/components/form-io/form-io.component.ts

@@ -26,13 +26,12 @@ import {
   Output,
   SimpleChanges,
 } from '@angular/core';
-import {ValtimoFormioOptions} from '../../../../models';
+import {FormioOptions, ValtimoFormioOptions} from '../../../../models';
 import {ValtimoModalService} from '../../../../services';
 import {UserProviderService} from '@valtimo/security';
 import {
   FormioComponent as FormIoSourceComponent,
   FormioForm,
-  FormioOptions,
   FormioRefreshValue,
   FormioSubmission,
 } from '@formio/angular';
@@ -45,7 +44,7 @@ import {TranslateService} from '@ngx-translate/core';
 import {deepmerge} from 'deepmerge-ts';
 import {ConfigService, ValtimoConfig} from '@valtimo/shared';
 import {isEqual} from 'lodash';
-import {Formio} from 'formiojs';
+import {Formio} from '@formio/js';
 import {
   FormIoLocalStorageService,
   FormIoStateService,

frontend/projects/valtimo/components/src/lib/components/form-io/components/formio-value-resolver-selector/formio-value-resolver-selector-edit-form.ts

@@ -14,6 +14,11 @@
  * limitations under the License.
  */
 
-export const formioValueResolverSelectorEditForm = () => ({
-  components: [{key: 'type', type: 'hidden'}],
-});
+import {Components} from '@formio/js';
+
+const TextfieldEditForm = Components.components.textfield.editForm;
+
+export const formioValueResolverSelectorEditForm = () => {
+  const editForm = TextfieldEditForm();
+  return editForm;
+};

frontend/projects/valtimo/components/src/lib/components/form-io/components/formio-value-resolver-selector/formio-value-resolver-selector.component.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright 2015-2025 Ritense BV, the Netherlands.
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.

frontend/projects/valtimo/components/src/lib/components/form-io/form-io.module.ts

@@ -18,7 +18,7 @@ import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {FormioComponent} from './components/form-io/form-io.component';
 import {FormioBuilderComponent} from './components/form-io-builder/form-io-builder.component';
-import {FormioAppConfig, FormioModule} from '@formio/angular';
+import {Formio, FormioAppConfig, FormioModule} from '@formio/angular';
 import {getFormioAppConfig} from './formio-config';
 import {FormIoUploaderComponent} from './components/form-io-uploader/form-io-uploader.component';
 import {DropzoneModule} from '../dropzone/dropzone.module';
@@ -35,6 +35,7 @@ import {FormioValueResolverSelectorComponent} from './components/formio-value-re
 import {FormioDummyComponent} from './components/form-io-dummy/dummy.component';
 import {LayerModule} from 'carbon-components-angular';
 import {FormIoCurrencyComponent} from './components/form-io-currency/currency.component';
+import bootstrap4 from '@formio/bootstrap/bootstrap4';
 
 @NgModule({
   imports: [
@@ -76,4 +77,8 @@ import {FormIoCurrencyComponent} from './components/form-io-currency/currency.co
     },
   ],
 })
-export class FormIoModule {}
+export class FormIoModule {
+  constructor() {
+    Formio.use((bootstrap4 as any)?.default ?? bootstrap4);
+  }
+}