From 2d8418132964d8df4979e93335d0e57acdf48f5c Mon Sep 17 00:00:00 2001
From: mbritense <79840403+mbritense@users.noreply.github.com>
Date: Tue, 7 Jan 2025 13:49:24 +0100
Subject: [PATCH] story: merge next-minor into next-major (#1316)

* Story/129861 widget field ellipsis (#1296)

* fix config for personal dashboard

* 128341 Can use process variable or document property in verloop tijd in dagen field.

* Add handler for array of strings (#1299)

* Bugfix/130515 boolean resolver (#1300)

* story/fix-fvm-updating fix form view model not updating (#1301)

* #57: Configurable Documenten API Upload fields (#1298)

doc: It is now possible to configure the fields that are needed when uploading to the Documenten API

* doc: fix: Linking a form to a user-task without selecting the task-display-type will no longer result in an error (#1303)

* Add fix for ellipsis cutting one character short (#1307)

* Story/130613 reset form value (#1308)

* Add form display configuration

* Remove code

* Add no access page for case details

* Remove no access page for case details

* Reset form value when submitting the start process form

* fix error (#1309)

* story: value selector in multi input (#1306)

* refactor

* abstract keyvalue to separate component

* abstract singlevalue

* abstract key dropdown value

* abstract arbitrary amount

* working value path selector in multi input

* fix verzoek ui

* add value path selector value

* wip

* small fixes

* final fixes

* Update projects/valtimo/components/src/lib/components/multi-input/carbon-multi-input.component.ts

Co-authored-by: teodor-ritense <135605531+teodor-ritense@users.noreply.github.com>

* pr comment

---------

Co-authored-by: teodor-ritense <135605531+teodor-ritense@users.noreply.github.com>

* Story/124923 widget resolver (#1310)

* Story/fix fvm translations (#1311)

* story/fix-fvm-updating fix form view model not updating

* story/fix-fvm-translations fix translations

* story: value path selector on dashboard widget data source config (#1312)

* value path selecter dropdown

* add to case counts

* Update projects/valtimo/dashboard/src/lib/data-sources/case-group-by/components/case-group-by-configuration/case-group-by-configuration.component.scss

Co-authored-by: teodor-ritense <135605531+teodor-ritense@users.noreply.github.com>

* pr suggestion

---------

Co-authored-by: teodor-ritense <135605531+teodor-ritense@users.noreply.github.com>

* story: task data source for dashboard (#1305)

* wip

* fix fe helper text

* pr comments

---------

Co-authored-by: teodor-ritense <135605531+teodor-ritense@users.noreply.github.com>
Co-authored-by: jarred-ritense <jarred.mac.intosh@ritense.com>
Co-authored-by: jarred-ritense <144021115+jarred-ritense@users.noreply.github.com>
Co-authored-by: floris-thijssen-ritense <floris.thijssen@ritense.com>
Co-authored-by: Klaas Schuijtemaker <94360980+Klaas-Ritense@users.noreply.github.com>
Co-authored-by: Sofia <131170700+sofiaIvarsRitense@users.noreply.github.com>
---
 .../carbon-list/carbon-list.component.ts      |  10 +-
 .../carbon-list/carbon-list.module.ts         |   2 +
 .../carbon-multi-input.component.html         | 211 ++++-----
 .../carbon-multi-input.component.scss         |  48 +-
 .../carbon-multi-input.component.ts           | 134 +++---
 .../multi-input/carbon-multi-input.module.ts  |  16 +
 .../arbitrary-amount-value.component.html     |  34 ++
 .../arbitrary-amount-value.component.scss     |  25 ++
 .../arbitrary-amount-value.component.ts       |  61 +++
 .../arbitrary-amount-value/index.ts           |  17 +
 .../multi-input/components/index.ts           |  23 +
 .../components/key-dropdown-value/index.ts    |  17 +
 .../key-dropdown-value.component.html         |  53 +++
 .../key-dropdown-value.component.scss         |  25 ++
 .../key-dropdown-value.component.ts           |  50 +++
 .../key-value-path-selector/index.ts          |  17 +
 .../key-value-path-selector.component.html    |  42 ++
 .../key-value-path-selector.component.scss    |  29 ++
 .../key-value-path-selector.component.ts      |  65 +++
 .../multi-input/components/key-value/index.ts |  17 +
 .../key-value/key-value.component.html        |  39 ++
 .../key-value/key-value.component.scss        |  25 ++
 .../key-value/key-value.component.ts          |  47 ++
 .../components/single-value/index.ts          |  17 +
 .../single-value/single-value.component.html  |  24 +
 .../single-value/single-value.component.scss  |  25 ++
 .../single-value/single-value.component.ts    |  42 ++
 .../index.ts                                  |  17 +
 ...ath-selector-dropdown-value.component.html |  56 +++
 ...ath-selector-dropdown-value.component.scss |  24 +
 ...-path-selector-dropdown-value.component.ts |  69 +++
 .../value-path-selector-value/index.ts        |  17 +
 .../value-path-selector-value.component.html  |  42 ++
 .../value-path-selector-value.component.scss  |  29 ++
 .../value-path-selector-value.component.ts    |  65 +++
 .../components/value-path-selector/index.ts   |  17 +
 .../value-path-selector.component.html        |  29 +-
 .../value-path-selector.component.scss        |   1 +
 .../value-path-selector.component.ts          | 141 ++++--
 .../type-converters/booleanTypeConverter.ts   |   2 +-
 .../type-converters/stringTypeConverter.ts    |   8 +
 .../src/lib/models/multi-input.model.ts       |  12 +-
 .../lib/models/value-path-selector.model.ts   |  46 +-
 .../components/src/lib/pipes/ellipsis.pipe.ts |  10 +
 .../valtimo/components/src/lib/pipes/index.ts |   1 +
 .../src/lib/services/valtimo-modal.service.ts |   5 +-
 .../services/value-path-selector.service.ts   | 145 +++++-
 projects/valtimo/config/assets/core/de.json   |  57 ++-
 projects/valtimo/config/assets/core/en.json   |  57 ++-
 projects/valtimo/config/assets/core/nl.json   |  57 ++-
 .../edit-dashboard-modal.html                 |   7 +-
 .../widget-modal/widget-modal.component.html  |   2 +-
 .../src/lib/dashboard-management.module.ts    |   4 +
 .../case-count/case-count.specification.ts    |  10 +-
 .../case-count-configuration.component.html   |   6 +-
 .../case-count-configuration.component.ts     |  15 +-
 .../case-counts/case-counts.specification.ts  |  10 +-
 .../case-counts-configuration.component.html  |  11 +-
 .../case-counts-configuration.component.ts    |  17 +-
 .../case-group-by/case-group-by.module.ts     |   3 +-
 .../case-group-by.specification.ts            |  10 +-
 ...case-group-by-configuration.component.html |  15 +-
 ...case-group-by-configuration.component.scss |   7 +
 .../case-group-by-configuration.component.ts  |  16 +-
 .../lib/data-sources/data-sources.module.ts   |   8 +-
 .../dashboard/src/lib/data-sources/index.ts   |   1 +
 .../src/lib/data-sources/shared/conditions.ts |  26 ++
 .../src/lib/data-sources/shared/index.ts      |  17 +
 .../task-count/components/index.ts            |  17 +
 .../task-count-configuration/index.ts         |  17 +
 .../task-count-configuration.component.html   |  43 ++
 .../task-count-configuration.component.scss   |  25 ++
 .../task-count-configuration.component.ts     | 152 +++++++
 .../src/lib/data-sources/task-count/index.ts  |  20 +
 .../data-sources/task-count/models/index.ts   |  17 +
 .../task-count/models/task-count.model.ts     |  23 +
 .../task-count/task-count.module.ts           |  40 ++
 .../task-count/task-count.specification.ts    |  71 +++
 ...anagement-widget-collection.component.html |  36 +-
 ...anagement-widget-collection.component.scss |   9 +-
 ...-management-widget-collection.component.ts |  20 +-
 ...gement-widget-fields-column.component.html |  79 +++-
 ...gement-widget-fields-column.component.scss |   9 +-
 ...nagement-widget-fields-column.component.ts |  56 ++-
 ...er-management-widget-fields.component.html |   1 +
 ...sier-management-widget-fields.component.ts |   7 +-
 ...ier-management-widget-table.component.html |  18 +-
 ...ier-management-widget-table.component.scss |  13 +-
 ...ssier-management-widget-table.component.ts |  20 +-
 .../src/lib/services/widget-fields.service.ts |   1 +
 .../dossier-detail.component.html             |  27 +-
 .../field/widget-field.component.html         |  12 +-
 .../field/widget-field.component.scss         |  19 +
 .../field/widget-field.component.ts           |  64 +--
 .../widget-block/widget-block.component.ts    |   1 -
 ...upporting-process-start-modal.component.ts |   1 +
 .../lib/models/case-widget-content.model.ts   |   2 +-
 .../lib/models/case-widget-display.model.ts   |  11 +-
 .../src/lib/models/case-widget.model.ts       |   1 +
 .../form-view-model.component.html            |   1 +
 .../form-view-model.component.ts              |  16 +-
 .../plugin-configure.component.html           |   1 +
 .../plugin-edit/plugin-edit.component.html    |   1 +
 .../src/lib/plugin-management.module.ts       |   2 +
 .../create-portal-task.component.html         |  21 +-
 .../create-portal-task.component.ts           |   4 +-
 ...rate-document-configuration.component.html |  11 +-
 ...nerate-document-configuration.component.ts |  12 +-
 .../verzoek-configuration.component.html      |  48 +-
 .../verzoek-configuration.component.scss      |   6 +
 .../verzoek-configuration.component.ts        |  13 +
 .../process-link-modal.component.html         |   2 +-
 .../src/lib/process-link.module.ts            |   2 +
 .../src/lib/services/process-link.service.ts  |  37 +-
 .../lib/services/open-zaak-upload.service.ts  |   4 +-
 .../task-detail-content.component.ts          |   3 +-
 .../dossier-management-zgw.component.ts       |  15 +-
 .../models/dossier-management-zgw.model.ts    |   1 +
 .../documenten-api-documents.component.html   |  20 +-
 .../documenten-api-documents.component.ts     |  48 ++
 ...cumenten-api-metadata-modal.component.html | 414 +++++++++---------
 ...documenten-api-metadata-modal.component.ts | 171 +++++---
 .../documenten-api-tags.component.ts          |   2 -
 ...nten-api-upload-field-modal.component.html | 115 +++++
 ...nten-api-upload-field-modal.component.scss |  21 +
 ...menten-api-upload-field-modal.component.ts | 241 ++++++++++
 ...ocumenten-api-upload-fields.component.html |  45 ++
 ...ocumenten-api-upload-fields.component.scss |  19 +
 .../documenten-api-upload-fields.component.ts | 163 +++++++
 .../documenten-api/components/index.ts        |   4 +-
 .../documenten-api-uploader-edit-form.ts      | 336 +++++++++++---
 .../documenten-api-uploader.component.html    |  11 +-
 .../documenten-api-uploader.component.ts      | 123 +++++-
 .../models/documenten-api-metadata.model.ts   |  37 +-
 .../documenten-api-upload-field.model.ts      |  69 +++
 .../documenten-api-document.service.ts        |  27 ++
 136 files changed, 4256 insertions(+), 849 deletions(-)
 create mode 100644 projects/valtimo/components/src/lib/components/multi-input/components/arbitrary-amount-value/arbitrary-amount-value.component.html
 create mode 100644 projects/valtimo/components/src/lib/components/multi-input/components/arbitrary-amount-value/arbitrary-amount-value.component.scss
 create mode 100644 projects/valtimo/components/src/lib/components/multi-input/components/arbitrary-amount-value/arbitrary-amount-value.component.ts
 create mode 100644 projects/valtimo/components/src/lib/components/multi-input/components/arbitrary-amount-value/index.ts
 create mode 100644 projects/valtimo/components/src/lib/components/multi-input/components/index.ts
 create mode 100644 projects/valtimo/components/src/lib/components/multi-input/components/key-dropdown-value/index.ts
 create mode 100644 projects/valtimo/components/src/lib/components/multi-input/components/key-dropdown-value/key-dropdown-value.component.html
 create mode 100644 projects/valtimo/components/src/lib/components/multi-input/components/key-dropdown-value/key-dropdown-value.component.scss
 create mode 100644 projects/valtimo/components/src/lib/components/multi-input/components/key-dropdown-value/key-dropdown-value.component.ts
 create mode 100644 projects/valtimo/components/src/lib/components/multi-input/components/key-value-path-selector/index.ts
 create mode 100644 projects/valtimo/components/src/lib/components/multi-input/components/key-value-path-selector/key-value-path-selector.component.html
 create mode 100644 projects/valtimo/components/src/lib/components/multi-input/components/key-value-path-selector/key-value-path-selector.component.scss
 create mode 100644 projects/valtimo/components/src/lib/components/multi-input/components/key-value-path-selector/key-value-path-selector.component.ts
 create mode 100644 projects/valtimo/components/src/lib/components/multi-input/components/key-value/index.ts
 create mode 100644 projects/valtimo/components/src/lib/components/multi-input/components/key-value/key-value.component.html
 create mode 100644 projects/valtimo/components/src/lib/components/multi-input/components/key-value/key-value.component.scss
 create mode 100644 projects/valtimo/components/src/lib/components/multi-input/components/key-value/key-value.component.ts
 create mode 100644 projects/valtimo/components/src/lib/components/multi-input/components/single-value/index.ts
 create mode 100644 projects/valtimo/components/src/lib/components/multi-input/components/single-value/single-value.component.html
 create mode 100644 projects/valtimo/components/src/lib/components/multi-input/components/single-value/single-value.component.scss
 create mode 100644 projects/valtimo/components/src/lib/components/multi-input/components/single-value/single-value.component.ts
 create mode 100644 projects/valtimo/components/src/lib/components/multi-input/components/value-path-selector-dropdown-value/index.ts
 create mode 100644 projects/valtimo/components/src/lib/components/multi-input/components/value-path-selector-dropdown-value/value-path-selector-dropdown-value.component.html
 create mode 100644 projects/valtimo/components/src/lib/components/multi-input/components/value-path-selector-dropdown-value/value-path-selector-dropdown-value.component.scss
 create mode 100644 projects/valtimo/components/src/lib/components/multi-input/components/value-path-selector-dropdown-value/value-path-selector-dropdown-value.component.ts
 create mode 100644 projects/valtimo/components/src/lib/components/multi-input/components/value-path-selector-value/index.ts
 create mode 100644 projects/valtimo/components/src/lib/components/multi-input/components/value-path-selector-value/value-path-selector-value.component.html
 create mode 100644 projects/valtimo/components/src/lib/components/multi-input/components/value-path-selector-value/value-path-selector-value.component.scss
 create mode 100644 projects/valtimo/components/src/lib/components/multi-input/components/value-path-selector-value/value-path-selector-value.component.ts
 create mode 100644 projects/valtimo/components/src/lib/components/value-path-selector/index.ts
 create mode 100644 projects/valtimo/components/src/lib/pipes/ellipsis.pipe.ts
 create mode 100644 projects/valtimo/dashboard/src/lib/data-sources/shared/conditions.ts
 create mode 100644 projects/valtimo/dashboard/src/lib/data-sources/shared/index.ts
 create mode 100644 projects/valtimo/dashboard/src/lib/data-sources/task-count/components/index.ts
 create mode 100644 projects/valtimo/dashboard/src/lib/data-sources/task-count/components/task-count-configuration/index.ts
 create mode 100644 projects/valtimo/dashboard/src/lib/data-sources/task-count/components/task-count-configuration/task-count-configuration.component.html
 create mode 100644 projects/valtimo/dashboard/src/lib/data-sources/task-count/components/task-count-configuration/task-count-configuration.component.scss
 create mode 100644 projects/valtimo/dashboard/src/lib/data-sources/task-count/components/task-count-configuration/task-count-configuration.component.ts
 create mode 100644 projects/valtimo/dashboard/src/lib/data-sources/task-count/index.ts
 create mode 100644 projects/valtimo/dashboard/src/lib/data-sources/task-count/models/index.ts
 create mode 100644 projects/valtimo/dashboard/src/lib/data-sources/task-count/models/task-count.model.ts
 create mode 100644 projects/valtimo/dashboard/src/lib/data-sources/task-count/task-count.module.ts
 create mode 100644 projects/valtimo/dashboard/src/lib/data-sources/task-count/task-count.specification.ts
 create mode 100644 projects/valtimo/zgw/src/lib/modules/documenten-api/components/documenten-api-upload-field-model/documenten-api-upload-field-modal.component.html
 create mode 100644 projects/valtimo/zgw/src/lib/modules/documenten-api/components/documenten-api-upload-field-model/documenten-api-upload-field-modal.component.scss
 create mode 100644 projects/valtimo/zgw/src/lib/modules/documenten-api/components/documenten-api-upload-field-model/documenten-api-upload-field-modal.component.ts
 create mode 100644 projects/valtimo/zgw/src/lib/modules/documenten-api/components/documenten-api-upload-fields/documenten-api-upload-fields.component.html
 create mode 100644 projects/valtimo/zgw/src/lib/modules/documenten-api/components/documenten-api-upload-fields/documenten-api-upload-fields.component.scss
 create mode 100644 projects/valtimo/zgw/src/lib/modules/documenten-api/components/documenten-api-upload-fields/documenten-api-upload-fields.component.ts
 create mode 100644 projects/valtimo/zgw/src/lib/modules/documenten-api/models/documenten-api-upload-field.model.ts

diff --git a/projects/valtimo/components/src/lib/components/carbon-list/carbon-list.component.ts b/projects/valtimo/components/src/lib/components/carbon-list/carbon-list.component.ts
index 25086d022..20045bfba 100644
--- a/projects/valtimo/components/src/lib/components/carbon-list/carbon-list.component.ts
+++ b/projects/valtimo/components/src/lib/components/carbon-list/carbon-list.component.ts
@@ -72,6 +72,7 @@ import {
   TAG_ELLIPSIS_LIMIT,
   ViewType,
 } from '../../models';
+import {EllipsisPipe} from '../../pipes';
 import {KeyStateService} from '../../services/key-state.service';
 import {ViewContentService} from '../view-content/view-content.service';
 import {CarbonListFilterPipe} from './CarbonListFilterPipe.directive';
@@ -256,6 +257,7 @@ export class CarbonListComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   constructor(
+    private readonly ellipsisPipe: EllipsisPipe,
     private readonly filterPipe: CarbonListFilterPipe,
     private readonly iconService: IconService,
     private readonly logger: NGXLogger,
@@ -461,7 +463,7 @@ export class CarbonListComponent implements OnInit, AfterViewInit, OnDestroy {
                 title: resolvedObject ?? '-',
                 data:
                   (field.tooltipCharLimit
-                    ? this.transformContentEllipsis(resolvedObject, field.tooltipCharLimit)
+                    ? this.ellipsisPipe.transform(resolvedObject, field.tooltipCharLimit)
                     : resolvedObject) ?? '-',
                 template: this.defaultTemplate,
                 item,
@@ -702,7 +704,7 @@ export class CarbonListComponent implements OnInit, AfterViewInit, OnDestroy {
 
     const tags = itemTags.map((tag: CarbonTag, index: number) =>
       index === 0
-        ? {...tag, ellipsisContent: this.transformContentEllipsis(tag.content, TAG_ELLIPSIS_LIMIT)}
+        ? {...tag, ellipsisContent: this.ellipsisPipe.transform(tag.content, TAG_ELLIPSIS_LIMIT)}
         : tag
     );
 
@@ -711,8 +713,4 @@ export class CarbonListComponent implements OnInit, AfterViewInit, OnDestroy {
       template: this.tagTemplate,
     });
   }
-
-  private transformContentEllipsis(content: string, limit: number): string {
-    return content.substring(0, limit - 1) + (content.length > limit ? '...' : '');
-  }
 }
diff --git a/projects/valtimo/components/src/lib/components/carbon-list/carbon-list.module.ts b/projects/valtimo/components/src/lib/components/carbon-list/carbon-list.module.ts
index 35e969f20..bb6010346 100644
--- a/projects/valtimo/components/src/lib/components/carbon-list/carbon-list.module.ts
+++ b/projects/valtimo/components/src/lib/components/carbon-list/carbon-list.module.ts
@@ -29,6 +29,7 @@ import {
   TagModule,
 } from 'carbon-components-angular';
 import {ValtimoCdsModalDirectiveModule} from '../../directives/valtimo-cds-modal/valtimo-cds-modal-directive.module';
+import {EllipsisPipe} from '../../pipes';
 import {CardModule} from '../card/card.module';
 import {ViewContentModule} from '../view-content/view-content.module';
 import {CarbonListComponent} from './carbon-list.component';
@@ -63,5 +64,6 @@ import {CarbonTagsModalComponent} from './tags-modal/tags-modal.component';
     ViewContentModule,
   ],
   exports: [CarbonListComponent, CarbonListFilterPipe, CarbonNoResultsComponent],
+  providers: [EllipsisPipe],
 })
 export class CarbonListModule {}
diff --git a/projects/valtimo/components/src/lib/components/multi-input/carbon-multi-input.component.html b/projects/valtimo/components/src/lib/components/multi-input/carbon-multi-input.component.html
index a47265e90..11e17d7c0 100644
--- a/projects/valtimo/components/src/lib/components/multi-input/carbon-multi-input.component.html
+++ b/projects/valtimo/components/src/lib/components/multi-input/carbon-multi-input.component.html
@@ -47,27 +47,102 @@
       *ngFor="let value of values$ | async as values; trackBy: trackByFn; index as i"
       class="v-multi-input__row"
     >
-      <ng-container *ngIf="type === 'value'">
-        <ng-container *ngTemplateOutlet="singleValue; context: {value: value}"></ng-container>
-      </ng-container>
-
-      <ng-container *ngIf="type === 'keyValue'">
-        <ng-container
-          *ngTemplateOutlet="keyValue; context: {value: value, index: i}"
-        ></ng-container>
-      </ng-container>
-
-      <ng-container *ngIf="type === 'keyDropdownValue'">
-        <ng-container
-          *ngTemplateOutlet="keyDropdownValue; context: {value: value, index: i}"
-        ></ng-container>
-      </ng-container>
-
-      <ng-container *ngIf="type === 'arbitraryAmount'">
-        <ng-container
-          *ngTemplateOutlet="arbitraryAmountValue; context: {value: value, index: i}"
-        ></ng-container>
-      </ng-container>
+      @switch (type) {
+        @case ('value') {
+          <valtimo-single-value
+            [value]="value"
+            [fullWidth]="fullWidth"
+            [disabled]="disabled"
+            (valueChange)="onValueChange($event.value, $event.inputValue, 'value')"
+          ></valtimo-single-value>
+        }
+        @case ('keyValue') {
+          <valtimo-key-value
+            [keyColumnTitle]="keyColumnTitle"
+            [valueColumnTitle]="valueColumnTitle"
+            [index]="i"
+            [value]="value"
+            [fullWidth]="fullWidth"
+            [disabled]="disabled"
+            (valueChange)="onValueChange($event.value, $event.inputValue, $event.type)"
+          ></valtimo-key-value>
+        }
+        @case ('keyDropdownValue') {
+          <valtimo-key-dropdown-value
+            [keyColumnTitle]="keyColumnTitle"
+            [valueColumnTitle]="valueColumnTitle"
+            [dropdownColumnTitle]="dropdownColumnTitle"
+            [index]="i"
+            [value]="value"
+            [dropdownItems$]="getDropdownItemsForRow(i)"
+            [dropdownWidth]="dropdownWidth"
+            [fullWidth]="fullWidth"
+            [disabled]="disabled"
+            (valueChange)="onValueChange($event.value, $event.inputValue, $event.type)"
+          ></valtimo-key-dropdown-value>
+        }
+        @case ('arbitraryAmount') {
+          <valtimo-arbitrary-amount-value
+            [index]="i"
+            [value]="value"
+            [fullWidth]="fullWidth"
+            [disabled]="disabled"
+            [arbitraryAmountTitles]="arbitraryAmountTitles"
+            [amountOfArbitraryValuesArray$]="amountOfArbitraryValuesArray$"
+            (valueChange)="
+              onValueChange($event.value, $event.inputValue, $event.type, $event.arbitraryIndex)
+            "
+          ></valtimo-arbitrary-amount-value>
+        }
+        @case ('keyValuePathSelector') {
+          <valtimo-key-value-path-selector
+            [keyColumnTitle]="keyColumnTitle"
+            [valueColumnTitle]="valueColumnTitle"
+            [index]="i"
+            [value]="value"
+            [fullWidth]="fullWidth"
+            [disabled]="disabled"
+            [documentDefinitionName]="valuePathSelectorDocumentDefinitionName"
+            [prefixes]="valuePathSelectorPrefixes"
+            [showDocumentDefinitionSelector]="valuePathSelectorShowDocumentDefinitionSelector"
+            [notation]="valuePathSelectorNotation"
+            (valueChange)="onValueChange($event.value, $event.inputValue, $event.type)"
+          ></valtimo-key-value-path-selector>
+        }
+        @case ('valuePathSelectorValue') {
+          <valtimo-value-path-selector-value
+            [keyColumnTitle]="keyColumnTitle"
+            [valueColumnTitle]="valueColumnTitle"
+            [index]="i"
+            [value]="value"
+            [fullWidth]="fullWidth"
+            [disabled]="disabled"
+            [documentDefinitionName]="valuePathSelectorDocumentDefinitionName"
+            [prefixes]="valuePathSelectorPrefixes"
+            [showDocumentDefinitionSelector]="valuePathSelectorShowDocumentDefinitionSelector"
+            [notation]="valuePathSelectorNotation"
+            (valueChange)="onValueChange($event.value, $event.inputValue, $event.type)"
+          ></valtimo-value-path-selector-value>
+        }
+        @case ('valuePathSelectorDropdownValue') {
+          <valtimo-value-path-selector-dropdown-value
+            [keyColumnTitle]="keyColumnTitle"
+            [dropdownColumnTitle]="dropdownColumnTitle"
+            [valueColumnTitle]="valueColumnTitle"
+            [index]="i"
+            [value]="value"
+            [fullWidth]="fullWidth"
+            [disabled]="disabled"
+            [documentDefinitionName]="valuePathSelectorDocumentDefinitionName"
+            [prefixes]="valuePathSelectorPrefixes"
+            [dropdownItems$]="getDropdownItemsForRow(i)"
+            [dropdownWidth]="dropdownWidth"
+            [showDocumentDefinitionSelector]="valuePathSelectorShowDocumentDefinitionSelector"
+            [notation]="valuePathSelectorNotation"
+            (valueChange)="onValueChange($event.value, $event.inputValue, $event.type)"
+          ></valtimo-value-path-selector-dropdown-value>
+        }
+      }
 
       <button
         *ngIf="!hideDeleteButton"
@@ -97,97 +172,3 @@
     </div>
   </div>
 </div>
-
-<ng-template #singleValue let-value="value">
-  <div class="v-multi-input__input" [ngClass]="{'--full-width': fullWidth}">
-    <input
-      cdsText
-      [defaultValue]="value.value"
-      [disabled]="disabled"
-      (change)="onValueChange(value, $event.target.value, 'value')"
-    />
-  </div>
-</ng-template>
-
-<ng-template #keyValue let-value="value" let-index="index">
-  <div class="v-multi-input__input" [ngClass]="{'--full-width': fullWidth}">
-    <cds-label *ngIf="index === 0 && keyColumnTitle && valueColumnTitle">{{
-      keyColumnTitle
-    }}</cds-label>
-
-    <input
-      cdsText
-      [defaultValue]="value.key"
-      [disabled]="disabled"
-      (input)="onValueChange(value, $event.target.value, 'key')"
-    />
-  </div>
-  <div class="v-multi-input__input" [ngClass]="{'--full-width': fullWidth}">
-    <cds-label *ngIf="index === 0 && keyColumnTitle && valueColumnTitle">{{
-      valueColumnTitle
-    }}</cds-label>
-    <input
-      cdsText
-      [defaultValue]="value.value"
-      [disabled]="disabled"
-      (input)="onValueChange(value, $event.target.value, 'value')"
-    />
-  </div>
-</ng-template>
-
-<ng-template #arbitraryAmountValue let-value="value" let-index="index">
-  <div
-    class="v-multi-input__input"
-    [ngClass]="{'--full-width': fullWidth}"
-    *ngFor="let _ of amountOfArbitraryValuesArray$ | async; index as i"
-  >
-    <cds-label *ngIf="index === 0">{{
-      arbitraryAmountTitles ? arbitraryAmountTitles[i] : ''
-    }}</cds-label>
-
-    <input
-      cdsText
-      [defaultValue]="value ? value['' + i] : ''"
-      [disabled]="disabled"
-      (input)="onValueChange(value, $event.target.value, 'arbitrary', i)"
-    />
-  </div>
-</ng-template>
-
-<ng-template #keyDropdownValue let-value="value" let-index="index">
-  <div [ngClass]="{'--full-width': fullWidth}" class="v-multi-input__input">
-    <cds-label *ngIf="index === 0 && keyColumnTitle">{{ keyColumnTitle }}</cds-label>
-
-    <input
-      cdsText
-      [defaultValue]="value.key"
-      [disabled]="disabled"
-      (input)="onValueChange(value, $event.target.value, 'key')"
-    />
-  </div>
-
-  <div [style.minWidth.px]="dropdownWidth" class="v-multi-input__input">
-    <cds-label *ngIf="index === 0 && dropdownColumnTitle">{{ dropdownColumnTitle }}</cds-label>
-
-    <cds-dropdown
-      (selected)="onValueChange(value, $event.item.id, 'dropdown')"
-      [appendInline]="true"
-    >
-      <cds-dropdown-list
-        [items]="getDropdownItemsForRow(index) | async"
-        type="multi"
-      ></cds-dropdown-list>
-    </cds-dropdown>
-  </div>
-
-  <div [ngClass]="{'--full-width': fullWidth}" class="v-multi-input__input">
-    <cds-label *ngIf="index === 0 && valueColumnTitle">{{ valueColumnTitle }}</cds-label>
-
-    <input
-      cdsText
-      [defaultValue]="value.value"
-      [disabled]="disabled"
-      (input)="onValueChange(value, $event.target.value, 'value')"
-    />
-  </div>
-</ng-template>
diff --git a/projects/valtimo/components/src/lib/components/multi-input/carbon-multi-input.component.scss b/projects/valtimo/components/src/lib/components/multi-input/carbon-multi-input.component.scss
index 96e4e95ef..85d669bb6 100644
--- a/projects/valtimo/components/src/lib/components/multi-input/carbon-multi-input.component.scss
+++ b/projects/valtimo/components/src/lib/components/multi-input/carbon-multi-input.component.scss
@@ -14,25 +14,41 @@
  * limitations under the License.
  */
 
-.v-multi-input--margin {
-  margin-block-end: var(--v-input-margin);
-}
+.v-multi-input {
+  &--margin {
+    margin-block-end: var(--v-input-margin);
+  }
 
-.v-multi-input__row {
-  display: flex;
-  flex-direction: row;
-  align-items: flex-end;
-  margin-block-end: var(--v-multi-input-row-spacing-block);
-}
+  &__row {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end;
+    margin-block-end: var(--v-multi-input-row-spacing-block);
+  }
 
-.v-multi-input__input {
-  margin-inline-end: var(--v-multi-input-input-spacing-inline);
+  &__input {
+    margin-inline-end: var(--v-multi-input-input-spacing-inline);
 
-  &.--full-width {
-    width: 100%;
+    &.--full-width {
+      flex: 1;
+    }
   }
-}
 
-.v-multi-input--no-delete-button .v-multi-input__input:last-child {
-  margin-inline-end: 0;
+  &__separator {
+    height: 40px;
+    width: 12px;
+    display: flex;
+    justify-content: flex-start;
+
+    &::before {
+      content: '';
+      height: 100%;
+      width: 1px;
+      background-color: var(--cds-border-subtle-selected);
+    }
+  }
+
+  &--no-delete-button &__input:last-child {
+    margin-inline-end: 0;
+  }
 }
diff --git a/projects/valtimo/components/src/lib/components/multi-input/carbon-multi-input.component.ts b/projects/valtimo/components/src/lib/components/multi-input/carbon-multi-input.component.ts
index dd97b7963..23862d54b 100644
--- a/projects/valtimo/components/src/lib/components/multi-input/carbon-multi-input.component.ts
+++ b/projects/valtimo/components/src/lib/components/multi-input/carbon-multi-input.component.ts
@@ -14,14 +14,25 @@
  * limitations under the License.
  */
 
-import {Component, EventEmitter, Input, OnDestroy, OnInit, Output} from '@angular/core';
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnDestroy,
+  OnInit,
+  Output,
+  ViewEncapsulation,
+} from '@angular/core';
 import {
   ArbitraryInputTitles,
   ListItemWithId,
+  MultiInputChangeEventType,
   MultiInputKeyValue,
   MultiInputOutput,
   MultiInputType,
   MultiInputValues,
+  ValuePathSelectorNotation,
+  ValuePathSelectorPrefix,
 } from '../../models';
 import {BehaviorSubject, combineLatest, Observable, Subscription} from 'rxjs';
 import {map, take} from 'rxjs/operators';
@@ -31,40 +42,45 @@ import {v4 as uuidv4} from 'uuid';
   selector: 'valtimo-carbon-multi-input',
   templateUrl: './carbon-multi-input.component.html',
   styleUrls: ['./carbon-multi-input.component.scss'],
+  encapsulation: ViewEncapsulation.None,
 })
 export class CarbonMultiInputComponent implements OnInit, OnDestroy {
-  @Input() public name = '';
-  @Input() public title = '';
-  @Input() public titleTranslationKey = '';
-  @Input() public type: MultiInputType = 'value';
+  @Input() public addRowText = '';
+  @Input() public addRowTranslationKey = '';
+  @Input() public arbitraryAmountTitles!: ArbitraryInputTitles;
   @Input() public set arbitraryValueAmount(value: number) {
     this._amountOfArbitraryValues = value;
     this.amountOfArbitraryValuesArray$.next(this.getArrayOfXLength(value));
   }
-  @Input() public arbitraryAmountTitles!: ArbitraryInputTitles;
-  @Input() public initialAmountOfRows = 1;
-  @Input() public minimumAmountOfRows = 1;
-  @Input() public maxRows = null;
-  @Input() public addRowText = '';
-  @Input() public addRowTranslationKey = '';
+  @Input() public defaultValues!: MultiInputValues;
   @Input() public deleteRowText = '';
   @Input() public deleteRowTranslationKey = '';
   @Input() public disabled = false;
-  @Input() public defaultValues!: MultiInputValues;
-  @Input() public margin = false;
-  @Input() public tooltip = '';
-  @Input() public required = false;
-  @Input() public keyColumnTitle = '';
-  @Input() public valueColumnTitle = '';
   @Input() public dropdownColumnTitle = '';
-  @Input() public hideDeleteButton = false;
-  @Input() public hideAddButton = false;
   @Input() public set dropdownItems(value: Array<ListItemWithId>) {
     this.dropdownItems$.next(value);
   }
   @Input() public dropdownWidth = 250;
   @Input() public fullWidth = false;
-  @Input() public carbonTheme = 'g10';
+  @Input() public hideAddButton = false;
+  @Input() public hideDeleteButton = false;
+  @Input() public initialAmountOfRows = 1;
+  @Input() public keyColumnTitle = '';
+  @Input() public margin = false;
+  @Input() public maxRows = null;
+  @Input() public minimumAmountOfRows = 1;
+  @Input() public name = '';
+  @Input() public required = false;
+  @Input() public title = '';
+  @Input() public titleTranslationKey = '';
+  @Input() public tooltip = '';
+  @Input() public type: MultiInputType = 'value';
+  @Input() public valueColumnTitle = '';
+
+  @Input() public readonly valuePathSelectorDocumentDefinitionName = '';
+  @Input() public readonly valuePathSelectorPrefixes: ValuePathSelectorPrefix[] = [];
+  @Input() public readonly valuePathSelectorShowDocumentDefinitionSelector = false;
+  @Input() public readonly valuePathSelectorNotation: ValuePathSelectorNotation = 'dots';
 
   @Output() public valueChange: EventEmitter<MultiInputOutput> = new EventEmitter();
   @Output() public allValuesValidEvent: EventEmitter<boolean> = new EventEmitter();
@@ -74,30 +90,7 @@ export class CarbonMultiInputComponent implements OnInit, OnDestroy {
 
   public readonly values$ = new BehaviorSubject<MultiInputValues>([]);
   public readonly mappedValues$: Observable<MultiInputOutput> = this.values$.pipe(
-    map(
-      values =>
-        values
-          .map(value => this.getMappedValue(value))
-          .filter(value => {
-            switch (this.type) {
-              case 'value':
-                return value;
-              case 'keyValue':
-                return (value as MultiInputKeyValue).value || (value as MultiInputKeyValue).key;
-              case 'keyDropdownValue':
-                return (
-                  (value as MultiInputKeyValue).value &&
-                  (value as MultiInputKeyValue).key &&
-                  (value as MultiInputKeyValue).dropdown
-                );
-              case 'arbitraryAmount':
-                const objectValues = Object.values(value as MultiInputKeyValue);
-                const positiveValuesAmount = objectValues.filter(objectValue => !!objectValue);
-
-                return objectValues.length === positiveValuesAmount.length;
-            }
-          }) as MultiInputOutput
-    )
+    map(values => this.filterAndMapValues(values))
   );
   public readonly addRowEnabled$: Observable<boolean> = this.values$.pipe(
     map(values => !!(this.maxRows === null || values.length < this.maxRows))
@@ -105,7 +98,7 @@ export class CarbonMultiInputComponent implements OnInit, OnDestroy {
 
   public readonly dropdownItems$ = new BehaviorSubject<Array<ListItemWithId>>([]);
 
-  private _valuesSubscription!: Subscription;
+  private readonly _subscriptions = new Subscription();
 
   public ngOnInit(): void {
     this.values$.next(this.getInitialRows());
@@ -113,7 +106,7 @@ export class CarbonMultiInputComponent implements OnInit, OnDestroy {
   }
 
   public ngOnDestroy(): void {
-    this._valuesSubscription?.unsubscribe();
+    this._subscriptions.unsubscribe();
   }
 
   public addRow(): void {
@@ -134,7 +127,7 @@ export class CarbonMultiInputComponent implements OnInit, OnDestroy {
     });
   }
 
-  public trackByFn(index: number, value: MultiInputKeyValue): string {
+  public trackByFn(_: number, value: MultiInputKeyValue): string {
     return value.uuid as string;
   }
 
@@ -154,7 +147,7 @@ export class CarbonMultiInputComponent implements OnInit, OnDestroy {
   public onValueChange(
     templateValue: MultiInputKeyValue,
     inputValue: string,
-    change: 'key' | 'value' | 'dropdown' | 'arbitrary',
+    change: MultiInputChangeEventType,
     arbitraryIndex?: number
   ): void {
     this.values$.pipe(take(1)).subscribe(values => {
@@ -180,10 +173,10 @@ export class CarbonMultiInputComponent implements OnInit, OnDestroy {
   private getInitialRows(): MultiInputValues {
     const minimumRows = this.minimumAmountOfRows;
     const initialRows = this.initialAmountOfRows;
-    const amountOfInitalRows = Math.max(minimumRows, initialRows);
+    const amountOfInitialRows = Math.max(minimumRows, initialRows);
 
     if (!this.defaultValues) {
-      return new Array(amountOfInitalRows).fill(this.getEmptyValue());
+      return new Array(amountOfInitialRows).fill(this.getEmptyValue());
     }
 
     return this.defaultValues.map(defaultValue => ({...defaultValue, uuid: uuidv4()}));
@@ -211,9 +204,9 @@ export class CarbonMultiInputComponent implements OnInit, OnDestroy {
   }
 
   private getMappedValue(valueToMap: MultiInputKeyValue): MultiInputKeyValue | string {
-    if (this.type === 'keyValue') {
+    if (this.type === 'keyValue' || this.type === 'keyValuePathSelector') {
       return {key: valueToMap.key, value: valueToMap.value};
-    } else if (this.type === 'keyDropdownValue') {
+    } else if (this.type === 'keyDropdownValue' || this.type === 'valuePathSelectorDropdownValue') {
       return {key: valueToMap.key, value: valueToMap.value, dropdown: valueToMap.dropdown};
     } else if (this.type === 'arbitraryAmount') {
       const objCopy = {...valueToMap};
@@ -225,15 +218,44 @@ export class CarbonMultiInputComponent implements OnInit, OnDestroy {
   }
 
   private openValuesSubscription(): void {
-    this._valuesSubscription = combineLatest([this.values$, this.mappedValues$]).subscribe(
-      ([values, mappedValues]) => {
+    this._subscriptions.add(
+      combineLatest([this.values$, this.mappedValues$]).subscribe(([values, mappedValues]) => {
         this.valueChange.emit(mappedValues);
         this.allValuesValidEvent.emit(values.length === mappedValues.length);
-      }
+      })
     );
   }
 
-  private getArrayOfXLength(length: number): Array<0> {
+  private getArrayOfXLength(length: number): 0[] {
     return Array(length).fill(0);
   }
+
+  private filterAndMapValues(values: MultiInputValues): MultiInputOutput {
+    return values
+      .map(value => this.getMappedValue(value))
+      .filter(value => this.isValueValid(value)) as MultiInputOutput;
+  }
+
+  private isValueValid(value: MultiInputKeyValue | string): boolean {
+    switch (this.type) {
+      case 'value':
+        return !!value;
+      case 'keyValue':
+      case 'keyValuePathSelector':
+        return !!((value as MultiInputKeyValue).value || (value as MultiInputKeyValue).key);
+      case 'keyDropdownValue':
+      case 'valuePathSelectorDropdownValue':
+        return !!(
+          (value as MultiInputKeyValue).value &&
+          (value as MultiInputKeyValue).key &&
+          (value as MultiInputKeyValue).dropdown
+        );
+      case 'arbitraryAmount':
+        const objectValues = Object.values(value as MultiInputKeyValue);
+        const positiveValuesAmount = objectValues.filter(objectValue => !!objectValue);
+        return objectValues.length === positiveValuesAmount.length;
+      default:
+        return false;
+    }
+  }
 }
diff --git a/projects/valtimo/components/src/lib/components/multi-input/carbon-multi-input.module.ts b/projects/valtimo/components/src/lib/components/multi-input/carbon-multi-input.module.ts
index c6aa334d7..06cf279c6 100644
--- a/projects/valtimo/components/src/lib/components/multi-input/carbon-multi-input.module.ts
+++ b/projects/valtimo/components/src/lib/components/multi-input/carbon-multi-input.module.ts
@@ -27,6 +27,15 @@ import {
 import {ButtonModule} from '../button/button.module';
 import {InputLabelModule} from '../input-label/input-label.module';
 import {InputModule} from '../input/input.module';
+import {
+  ArbitraryAmountValueComponent,
+  KeyDropdownValueComponent,
+  KeyValueComponent,
+  KeyValuePathSelectorComponent,
+  SingleValueComponent,
+  ValuePathSelectorDropdownValueComponent,
+  ValuePathSelectorValueComponent,
+} from './components';
 
 @NgModule({
   declarations: [CarbonMultiInputComponent],
@@ -40,6 +49,13 @@ import {InputModule} from '../input/input.module';
     IconModule,
     CarbonInputModule,
     DropdownModule,
+    KeyValueComponent,
+    SingleValueComponent,
+    KeyDropdownValueComponent,
+    ArbitraryAmountValueComponent,
+    KeyValuePathSelectorComponent,
+    ValuePathSelectorValueComponent,
+    ValuePathSelectorDropdownValueComponent,
   ],
   exports: [CarbonMultiInputComponent],
 })
diff --git a/projects/valtimo/components/src/lib/components/multi-input/components/arbitrary-amount-value/arbitrary-amount-value.component.html b/projects/valtimo/components/src/lib/components/multi-input/components/arbitrary-amount-value/arbitrary-amount-value.component.html
new file mode 100644
index 000000000..620a90ee5
--- /dev/null
+++ b/projects/valtimo/components/src/lib/components/multi-input/components/arbitrary-amount-value/arbitrary-amount-value.component.html
@@ -0,0 +1,34 @@
+<!--
+  ~ Copyright 2015-2024 Ritense BV, the Netherlands.
+  ~
+  ~ Licensed under EUPL, Version 1.2 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" basis,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+
+@for (_ of amountOfArbitraryValuesArray$ | async; let i = $index; track i) {
+  <div class="v-multi-input__input" [ngClass]="{'--full-width': fullWidth}">
+    <cds-label *ngIf="index === 0">{{
+      arbitraryAmountTitles ? arbitraryAmountTitles[i] : ''
+    }}</cds-label>
+
+    <input
+      cdsText
+      [defaultValue]="value ? value['' + i] : ''"
+      [disabled]="disabled"
+      (input)="onInputChange(i, $event.target.value)"
+    />
+  </div>
+
+  @if (((amountOfArbitraryValuesArray$ | async) || []).length - 1 !== i) {
+    <div class="v-multi-input__separator"></div>
+  }
+}
diff --git a/projects/valtimo/components/src/lib/components/multi-input/components/arbitrary-amount-value/arbitrary-amount-value.component.scss b/projects/valtimo/components/src/lib/components/multi-input/components/arbitrary-amount-value/arbitrary-amount-value.component.scss
new file mode 100644
index 000000000..df54a0a80
--- /dev/null
+++ b/projects/valtimo/components/src/lib/components/multi-input/components/arbitrary-amount-value/arbitrary-amount-value.component.scss
@@ -0,0 +1,25 @@
+/*!
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+:host {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+
+  &.--full-width {
+    width: 100%;
+  }
+}
diff --git a/projects/valtimo/components/src/lib/components/multi-input/components/arbitrary-amount-value/arbitrary-amount-value.component.ts b/projects/valtimo/components/src/lib/components/multi-input/components/arbitrary-amount-value/arbitrary-amount-value.component.ts
new file mode 100644
index 000000000..271334cca
--- /dev/null
+++ b/projects/valtimo/components/src/lib/components/multi-input/components/arbitrary-amount-value/arbitrary-amount-value.component.ts
@@ -0,0 +1,61 @@
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {Component, EventEmitter, HostBinding, Input, Output} from '@angular/core';
+import {
+  ArbitraryInputTitles,
+  MultiInputChangeEventType,
+  MultiInputKeyValue,
+} from '../../../../models';
+import {CommonModule} from '@angular/common';
+import {InputModule} from 'carbon-components-angular';
+import {Observable} from 'rxjs';
+
+@Component({
+  selector: 'valtimo-arbitrary-amount-value',
+  templateUrl: './arbitrary-amount-value.component.html',
+  styleUrls: ['./arbitrary-amount-value.component.scss'],
+  standalone: true,
+  imports: [CommonModule, InputModule],
+})
+export class ArbitraryAmountValueComponent {
+  @Input() public readonly index!: number;
+  @Input() public readonly value!: MultiInputKeyValue;
+  @Input() public readonly fullWidth = false;
+  @Input() public readonly disabled = false;
+  @Input() public readonly arbitraryAmountTitles!: ArbitraryInputTitles;
+  @Input() public readonly amountOfArbitraryValuesArray$!: Observable<0[]>;
+
+  @Output() public readonly valueChange: EventEmitter<{
+    value: MultiInputKeyValue;
+    inputValue: string;
+    type: MultiInputChangeEventType;
+    arbitraryIndex: number;
+  }> = new EventEmitter();
+
+  @HostBinding('class.--full-width') get isFullWidth(): boolean {
+    return this.fullWidth;
+  }
+
+  public onInputChange(arbitraryIndex: number, inputValue: string): void {
+    this.valueChange.emit({
+      value: this.value,
+      inputValue,
+      type: 'arbitrary',
+      arbitraryIndex,
+    });
+  }
+}
diff --git a/projects/valtimo/components/src/lib/components/multi-input/components/arbitrary-amount-value/index.ts b/projects/valtimo/components/src/lib/components/multi-input/components/arbitrary-amount-value/index.ts
new file mode 100644
index 000000000..ee3461739
--- /dev/null
+++ b/projects/valtimo/components/src/lib/components/multi-input/components/arbitrary-amount-value/index.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export * from './arbitrary-amount-value.component';
diff --git a/projects/valtimo/components/src/lib/components/multi-input/components/index.ts b/projects/valtimo/components/src/lib/components/multi-input/components/index.ts
new file mode 100644
index 000000000..0a8f942b3
--- /dev/null
+++ b/projects/valtimo/components/src/lib/components/multi-input/components/index.ts
@@ -0,0 +1,23 @@
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export * from './key-value';
+export * from './single-value';
+export * from './key-dropdown-value';
+export * from './arbitrary-amount-value';
+export * from './key-value-path-selector';
+export * from './value-path-selector-value';
+export * from './value-path-selector-dropdown-value';
diff --git a/projects/valtimo/components/src/lib/components/multi-input/components/key-dropdown-value/index.ts b/projects/valtimo/components/src/lib/components/multi-input/components/key-dropdown-value/index.ts
new file mode 100644
index 000000000..4c57c0113
--- /dev/null
+++ b/projects/valtimo/components/src/lib/components/multi-input/components/key-dropdown-value/index.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export * from './key-dropdown-value.component';
diff --git a/projects/valtimo/components/src/lib/components/multi-input/components/key-dropdown-value/key-dropdown-value.component.html b/projects/valtimo/components/src/lib/components/multi-input/components/key-dropdown-value/key-dropdown-value.component.html
new file mode 100644
index 000000000..0f9ca7892
--- /dev/null
+++ b/projects/valtimo/components/src/lib/components/multi-input/components/key-dropdown-value/key-dropdown-value.component.html
@@ -0,0 +1,53 @@
+<!--
+  ~ Copyright 2015-2024 Ritense BV, the Netherlands.
+  ~
+  ~ Licensed under EUPL, Version 1.2 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" basis,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+
+<div class="v-multi-input__input" [ngClass]="{'--full-width': fullWidth}">
+  <cds-label *ngIf="index === 0 && keyColumnTitle">{{ keyColumnTitle }}</cds-label>
+
+  <input
+    cdsText
+    [defaultValue]="value.key"
+    [disabled]="disabled"
+    (input)="onInputChange('key', $event.target.value)"
+  />
+</div>
+
+<div class="v-multi-input__separator"></div>
+
+<div
+  class="v-multi-input__input"
+  [ngClass]="{'--full-width': fullWidth}"
+  [style.minWidth.px]="dropdownWidth"
+>
+  <cds-label *ngIf="index === 0 && dropdownColumnTitle">{{ dropdownColumnTitle }}</cds-label>
+
+  <cds-dropdown (selected)="onInputChange('dropdown', $event.item.id)" [appendInline]="true">
+    <cds-dropdown-list [items]="dropdownItems$ | async" type="multi"></cds-dropdown-list>
+  </cds-dropdown>
+</div>
+
+<div class="v-multi-input__separator"></div>
+
+<div class="v-multi-input__input" [ngClass]="{'--full-width': fullWidth}">
+  <cds-label *ngIf="index === 0 && valueColumnTitle">{{ valueColumnTitle }}</cds-label>
+
+  <input
+    cdsText
+    [defaultValue]="value.value"
+    [disabled]="disabled"
+    (input)="onInputChange('value', $event.target.value)"
+  />
+</div>
diff --git a/projects/valtimo/components/src/lib/components/multi-input/components/key-dropdown-value/key-dropdown-value.component.scss b/projects/valtimo/components/src/lib/components/multi-input/components/key-dropdown-value/key-dropdown-value.component.scss
new file mode 100644
index 000000000..df54a0a80
--- /dev/null
+++ b/projects/valtimo/components/src/lib/components/multi-input/components/key-dropdown-value/key-dropdown-value.component.scss
@@ -0,0 +1,25 @@
+/*!
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+:host {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+
+  &.--full-width {
+    width: 100%;
+  }
+}
diff --git a/projects/valtimo/components/src/lib/components/multi-input/components/key-dropdown-value/key-dropdown-value.component.ts b/projects/valtimo/components/src/lib/components/multi-input/components/key-dropdown-value/key-dropdown-value.component.ts
new file mode 100644
index 000000000..b2ed77dcc
--- /dev/null
+++ b/projects/valtimo/components/src/lib/components/multi-input/components/key-dropdown-value/key-dropdown-value.component.ts
@@ -0,0 +1,50 @@
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {Component, EventEmitter, HostBinding, Input, Output} from '@angular/core';
+import {ListItemWithId, MultiInputChangeEventType, MultiInputKeyValue} from '../../../../models';
+import {CommonModule} from '@angular/common';
+import {DropdownModule, InputModule} from 'carbon-components-angular';
+import {Observable} from 'rxjs';
+
+@Component({
+  selector: 'valtimo-key-dropdown-value',
+  templateUrl: './key-dropdown-value.component.html',
+  styleUrls: ['./key-dropdown-value.component.scss'],
+  standalone: true,
+  imports: [CommonModule, InputModule, DropdownModule],
+})
+export class KeyDropdownValueComponent {
+  @Input() public readonly keyColumnTitle!: string;
+  @Input() public readonly valueColumnTitle!: string;
+  @Input() public readonly dropdownColumnTitle!: string;
+  @Input() public readonly index!: number;
+  @Input() public readonly value!: MultiInputKeyValue;
+  @Input() public readonly dropdownItems$!: Observable<Array<ListItemWithId>>;
+  @Input() public readonly dropdownWidth = 250;
+  @Input() @HostBinding('class.--full-width') public readonly fullWidth = false;
+  @Input() public readonly disabled = false;
+
+  @Output() public readonly valueChange: EventEmitter<{
+    value: MultiInputKeyValue;
+    inputValue: string;
+    type: MultiInputChangeEventType;
+  }> = new EventEmitter();
+
+  public onInputChange(type: MultiInputChangeEventType, inputValue: string): void {
+    this.valueChange.emit({value: this.value, inputValue, type});
+  }
+}
diff --git a/projects/valtimo/components/src/lib/components/multi-input/components/key-value-path-selector/index.ts b/projects/valtimo/components/src/lib/components/multi-input/components/key-value-path-selector/index.ts
new file mode 100644
index 000000000..6b602983e
--- /dev/null
+++ b/projects/valtimo/components/src/lib/components/multi-input/components/key-value-path-selector/index.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export * from './key-value-path-selector.component';
diff --git a/projects/valtimo/components/src/lib/components/multi-input/components/key-value-path-selector/key-value-path-selector.component.html b/projects/valtimo/components/src/lib/components/multi-input/components/key-value-path-selector/key-value-path-selector.component.html
new file mode 100644
index 000000000..7a0fbe8ec
--- /dev/null
+++ b/projects/valtimo/components/src/lib/components/multi-input/components/key-value-path-selector/key-value-path-selector.component.html
@@ -0,0 +1,42 @@
+<!--
+  ~ Copyright 2015-2024 Ritense BV, the Netherlands.
+  ~
+  ~ Licensed under EUPL, Version 1.2 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" basis,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+
+<div class="v-multi-input__input key" [ngClass]="{'--full-width': fullWidth}">
+  <cds-label *ngIf="index === 0 && keyColumnTitle">{{ keyColumnTitle }}</cds-label>
+
+  <input
+    cdsText
+    [defaultValue]="value.key"
+    [disabled]="disabled"
+    (input)="onInputChange('key', $event.target.value)"
+  />
+</div>
+
+<div class="v-multi-input__separator"></div>
+
+<div class="v-multi-input__input path-selector" [ngClass]="{'--full-width': fullWidth}">
+  <cds-label *ngIf="index === 0 && valueColumnTitle">{{ valueColumnTitle }}</cds-label>
+
+  <valtimo-value-path-selector
+    [documentDefinitionName]="documentDefinitionName"
+    [prefixes]="prefixes"
+    [showDocumentDefinitionSelector]="showDocumentDefinitionSelector"
+    [disabled]="disabled"
+    [defaultValue]="value?.value"
+    [notation]="notation"
+    (valueChangeEvent)="onInputChange('value', $event)"
+  ></valtimo-value-path-selector>
+</div>
diff --git a/projects/valtimo/components/src/lib/components/multi-input/components/key-value-path-selector/key-value-path-selector.component.scss b/projects/valtimo/components/src/lib/components/multi-input/components/key-value-path-selector/key-value-path-selector.component.scss
new file mode 100644
index 000000000..15f287714
--- /dev/null
+++ b/projects/valtimo/components/src/lib/components/multi-input/components/key-value-path-selector/key-value-path-selector.component.scss
@@ -0,0 +1,29 @@
+/*!
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+:host {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+
+  &.--full-width {
+    width: 100%;
+  }
+
+  .path-selector {
+    flex: 2;
+  }
+}
diff --git a/projects/valtimo/components/src/lib/components/multi-input/components/key-value-path-selector/key-value-path-selector.component.ts b/projects/valtimo/components/src/lib/components/multi-input/components/key-value-path-selector/key-value-path-selector.component.ts
new file mode 100644
index 000000000..7b8e34639
--- /dev/null
+++ b/projects/valtimo/components/src/lib/components/multi-input/components/key-value-path-selector/key-value-path-selector.component.ts
@@ -0,0 +1,65 @@
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHimport { LabelModule } from 'carbon-components-angular';
+OUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {Component, EventEmitter, HostBinding, Input, Output} from '@angular/core';
+import {
+  MultiInputChangeEventType,
+  MultiInputKeyValue,
+  ValuePathSelectorNotation,
+  ValuePathSelectorPrefix,
+} from '../../../../models';
+import {CommonModule} from '@angular/common';
+import {InputModule} from 'carbon-components-angular';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {ValuePathSelectorComponent} from '../../../value-path-selector';
+
+@Component({
+  selector: 'valtimo-key-value-path-selector',
+  templateUrl: './key-value-path-selector.component.html',
+  styleUrls: ['key-value-path-selector.component.scss'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    InputModule,
+    ValuePathSelectorComponent,
+    FormsModule,
+    ReactiveFormsModule,
+  ],
+})
+export class KeyValuePathSelectorComponent {
+  @Input() public readonly keyColumnTitle!: string;
+  @Input() public readonly valueColumnTitle!: string;
+  @Input() public readonly index!: number;
+  @Input() public readonly value!: MultiInputKeyValue;
+  @Input() @HostBinding('class.--full-width') public readonly fullWidth = false;
+  @Input() public readonly disabled = false;
+
+  @Input() public readonly documentDefinitionName = '';
+  @Input() public readonly prefixes: ValuePathSelectorPrefix[] = [];
+  @Input() public readonly showDocumentDefinitionSelector = false;
+  @Input() public readonly notation: ValuePathSelectorNotation = 'dots';
+
+  @Output() public readonly valueChange: EventEmitter<{
+    value: MultiInputKeyValue;
+    inputValue: string;
+    type: MultiInputChangeEventType;
+  }> = new EventEmitter();
+
+  public onInputChange(type: MultiInputChangeEventType, inputValue: string): void {
+    this.valueChange.emit({value: this.value, inputValue, type});
+  }
+}
diff --git a/projects/valtimo/components/src/lib/components/multi-input/components/key-value/index.ts b/projects/valtimo/components/src/lib/components/multi-input/components/key-value/index.ts
new file mode 100644
index 000000000..aeb083273
--- /dev/null
+++ b/projects/valtimo/components/src/lib/components/multi-input/components/key-value/index.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export * from './key-value.component';
diff --git a/projects/valtimo/components/src/lib/components/multi-input/components/key-value/key-value.component.html b/projects/valtimo/components/src/lib/components/multi-input/components/key-value/key-value.component.html
new file mode 100644
index 000000000..708591ad4
--- /dev/null
+++ b/projects/valtimo/components/src/lib/components/multi-input/components/key-value/key-value.component.html
@@ -0,0 +1,39 @@
+<!--
+  ~ Copyright 2015-2024 Ritense BV, the Netherlands.
+  ~
+  ~ Licensed under EUPL, Version 1.2 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" basis,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+
+<div class="v-multi-input__input" [ngClass]="{'--full-width': fullWidth}">
+  <cds-label *ngIf="index === 0 && keyColumnTitle">{{ keyColumnTitle }}</cds-label>
+
+  <input
+    cdsText
+    [defaultValue]="value.key"
+    [disabled]="disabled"
+    (input)="onInputChange('key', $event.target.value)"
+  />
+</div>
+
+<div class="v-multi-input__separator"></div>
+
+<div class="v-multi-input__input" [ngClass]="{'--full-width': fullWidth}">
+  <cds-label *ngIf="index === 0 && valueColumnTitle">{{ valueColumnTitle }}</cds-label>
+
+  <input
+    cdsText
+    [defaultValue]="value.value"
+    [disabled]="disabled"
+    (input)="onInputChange('value', $event.target.value)"
+  />
+</div>
diff --git a/projects/valtimo/components/src/lib/components/multi-input/components/key-value/key-value.component.scss b/projects/valtimo/components/src/lib/components/multi-input/components/key-value/key-value.component.scss
new file mode 100644
index 000000000..df54a0a80
--- /dev/null
+++ b/projects/valtimo/components/src/lib/components/multi-input/components/key-value/key-value.component.scss
@@ -0,0 +1,25 @@
+/*!
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+:host {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+
+  &.--full-width {
+    width: 100%;
+  }
+}
diff --git a/projects/valtimo/components/src/lib/components/multi-input/components/key-value/key-value.component.ts b/projects/valtimo/components/src/lib/components/multi-input/components/key-value/key-value.component.ts
new file mode 100644
index 000000000..79852bf5f
--- /dev/null
+++ b/projects/valtimo/components/src/lib/components/multi-input/components/key-value/key-value.component.ts
@@ -0,0 +1,47 @@
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHimport { LabelModule } from 'carbon-components-angular';
+OUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {Component, EventEmitter, HostBinding, Input, Output} from '@angular/core';
+import {MultiInputChangeEventType, MultiInputKeyValue} from '../../../../models';
+import {CommonModule} from '@angular/common';
+import {InputModule} from 'carbon-components-angular';
+
+@Component({
+  selector: 'valtimo-key-value',
+  templateUrl: './key-value.component.html',
+  styleUrls: ['key-value.component.scss'],
+  standalone: true,
+  imports: [CommonModule, InputModule],
+})
+export class KeyValueComponent {
+  @Input() public readonly keyColumnTitle!: string;
+  @Input() public readonly valueColumnTitle!: string;
+  @Input() public readonly index!: number;
+  @Input() public readonly value!: MultiInputKeyValue;
+  @Input() @HostBinding('class.--full-width') public readonly fullWidth = false;
+  @Input() public readonly disabled = false;
+
+  @Output() public readonly valueChange: EventEmitter<{
+    value: MultiInputKeyValue;
+    inputValue: string;
+    type: MultiInputChangeEventType;
+  }> = new EventEmitter();
+
+  public onInputChange(type: MultiInputChangeEventType, inputValue: string): void {
+    this.valueChange.emit({value: this.value, inputValue, type});
+  }
+}
diff --git a/projects/valtimo/components/src/lib/components/multi-input/components/single-value/index.ts b/projects/valtimo/components/src/lib/components/multi-input/components/single-value/index.ts
new file mode 100644
index 000000000..68ceb524b
--- /dev/null
+++ b/projects/valtimo/components/src/lib/components/multi-input/components/single-value/index.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export * from './single-value.component';
diff --git a/projects/valtimo/components/src/lib/components/multi-input/components/single-value/single-value.component.html b/projects/valtimo/components/src/lib/components/multi-input/components/single-value/single-value.component.html
new file mode 100644
index 000000000..093000344
--- /dev/null
+++ b/projects/valtimo/components/src/lib/components/multi-input/components/single-value/single-value.component.html
@@ -0,0 +1,24 @@
+<!--
+  ~ Copyright 2015-2024 Ritense BV, the Netherlands.
+  ~
+  ~ Licensed under EUPL, Version 1.2 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" basis,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+
+<div class="v-multi-input__input" [ngClass]="{'--full-width': fullWidth}">
+  <input
+    cdsText
+    [defaultValue]="value?.value"
+    [disabled]="disabled"
+    (input)="onInputChange($event.target.value)"
+  />
+</div>
diff --git a/projects/valtimo/components/src/lib/components/multi-input/components/single-value/single-value.component.scss b/projects/valtimo/components/src/lib/components/multi-input/components/single-value/single-value.component.scss
new file mode 100644
index 000000000..df54a0a80
--- /dev/null
+++ b/projects/valtimo/components/src/lib/components/multi-input/components/single-value/single-value.component.scss
@@ -0,0 +1,25 @@
+/*!
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+:host {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+
+  &.--full-width {
+    width: 100%;
+  }
+}
diff --git a/projects/valtimo/components/src/lib/components/multi-input/components/single-value/single-value.component.ts b/projects/valtimo/components/src/lib/components/multi-input/components/single-value/single-value.component.ts
new file mode 100644
index 000000000..139e1adbe
--- /dev/null
+++ b/projects/valtimo/components/src/lib/components/multi-input/components/single-value/single-value.component.ts
@@ -0,0 +1,42 @@
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {Component, EventEmitter, HostBinding, Input, Output} from '@angular/core';
+import {MultiInputKeyValue} from '../../../../models';
+import {CommonModule} from '@angular/common';
+import {InputModule} from 'carbon-components-angular';
+
+@Component({
+  selector: 'valtimo-single-value',
+  templateUrl: './single-value.component.html',
+  styleUrls: ['./single-value.component.scss'],
+  standalone: true,
+  imports: [CommonModule, InputModule],
+})
+export class SingleValueComponent {
+  @Input() public readonly value!: MultiInputKeyValue;
+  @Input() @HostBinding('class.--full-width') public readonly fullWidth = false;
+  @Input() public readonly disabled = false;
+
+  @Output() public readonly valueChange: EventEmitter<{
+    value: MultiInputKeyValue;
+    inputValue: string;
+  }> = new EventEmitter();
+
+  public onInputChange(inputValue: string): void {
+    this.valueChange.emit({value: this.value, inputValue});
+  }
+}
diff --git a/projects/valtimo/components/src/lib/components/multi-input/components/value-path-selector-dropdown-value/index.ts b/projects/valtimo/components/src/lib/components/multi-input/components/value-path-selector-dropdown-value/index.ts
new file mode 100644
index 000000000..7480ae8db
--- /dev/null
+++ b/projects/valtimo/components/src/lib/components/multi-input/components/value-path-selector-dropdown-value/index.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export * from './value-path-selector-dropdown-value.component';
diff --git a/projects/valtimo/components/src/lib/components/multi-input/components/value-path-selector-dropdown-value/value-path-selector-dropdown-value.component.html b/projects/valtimo/components/src/lib/components/multi-input/components/value-path-selector-dropdown-value/value-path-selector-dropdown-value.component.html
new file mode 100644
index 000000000..fba5c559e
--- /dev/null
+++ b/projects/valtimo/components/src/lib/components/multi-input/components/value-path-selector-dropdown-value/value-path-selector-dropdown-value.component.html
@@ -0,0 +1,56 @@
+<!--
+  ~ Copyright 2015-2024 Ritense BV, the Netherlands.
+  ~
+  ~ Licensed under EUPL, Version 1.2 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" basis,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+
+<div class="v-multi-input__input path-selector" [ngClass]="{'--full-width': fullWidth}">
+  <cds-label *ngIf="index === 0 && keyColumnTitle">{{ keyColumnTitle }}</cds-label>
+
+  <valtimo-value-path-selector
+    [documentDefinitionName]="documentDefinitionName"
+    [prefixes]="prefixes"
+    [showDocumentDefinitionSelector]="showDocumentDefinitionSelector"
+    [disabled]="disabled"
+    [defaultValue]="value?.key"
+    [notation]="notation"
+    (valueChangeEvent)="onInputChange('key', $event)"
+  ></valtimo-value-path-selector>
+</div>
+
+<div class="v-multi-input__separator"></div>
+
+<div
+  class="v-multi-input__input"
+  [ngClass]="{'--full-width': fullWidth}"
+  [style.minWidth.px]="dropdownWidth"
+>
+  <cds-label *ngIf="index === 0 && dropdownColumnTitle">{{ dropdownColumnTitle }}</cds-label>
+
+  <cds-dropdown (selected)="onInputChange('dropdown', $event.item.id)" [appendInline]="true">
+    <cds-dropdown-list [items]="dropdownItems$ | async" type="multi"></cds-dropdown-list>
+  </cds-dropdown>
+</div>
+
+<div class="v-multi-input__separator"></div>
+
+<div class="v-multi-input__input" [ngClass]="{'--full-width': fullWidth}">
+  <cds-label *ngIf="index === 0 && valueColumnTitle">{{ valueColumnTitle }}</cds-label>
+
+  <input
+    cdsText
+    [defaultValue]="value.value"
+    [disabled]="disabled"
+    (input)="onInputChange('value', $event.target.value)"
+  />
+</div>
diff --git a/projects/valtimo/components/src/lib/components/multi-input/components/value-path-selector-dropdown-value/value-path-selector-dropdown-value.component.scss b/projects/valtimo/components/src/lib/components/multi-input/components/value-path-selector-dropdown-value/value-path-selector-dropdown-value.component.scss
new file mode 100644
index 000000000..b94be5c17
--- /dev/null
+++ b/projects/valtimo/components/src/lib/components/multi-input/components/value-path-selector-dropdown-value/value-path-selector-dropdown-value.component.scss
@@ -0,0 +1,24 @@
+/*!
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+:host {
+  display: flex;
+  align-items: flex-end;
+
+  &.--full-width {
+    width: 100%;
+  }
+}
diff --git a/projects/valtimo/components/src/lib/components/multi-input/components/value-path-selector-dropdown-value/value-path-selector-dropdown-value.component.ts b/projects/valtimo/components/src/lib/components/multi-input/components/value-path-selector-dropdown-value/value-path-selector-dropdown-value.component.ts
new file mode 100644
index 000000000..7d6b2c4db
--- /dev/null
+++ b/projects/valtimo/components/src/lib/components/multi-input/components/value-path-selector-dropdown-value/value-path-selector-dropdown-value.component.ts
@@ -0,0 +1,69 @@
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {Component, EventEmitter, HostBinding, Input, Output} from '@angular/core';
+import {
+  ListItemWithId,
+  MultiInputChangeEventType,
+  MultiInputKeyValue,
+  ValuePathSelectorNotation,
+  ValuePathSelectorPrefix,
+} from '../../../../models';
+import {CommonModule} from '@angular/common';
+import {DropdownModule, InputModule} from 'carbon-components-angular';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {ValuePathSelectorComponent} from '../../../value-path-selector';
+import {Observable} from 'rxjs';
+
+@Component({
+  selector: 'valtimo-value-path-selector-dropdown-value',
+  templateUrl: './value-path-selector-dropdown-value.component.html',
+  styleUrls: ['./value-path-selector-dropdown-value.component.scss'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    InputModule,
+    DropdownModule,
+    ValuePathSelectorComponent,
+    FormsModule,
+    ReactiveFormsModule,
+  ],
+})
+export class ValuePathSelectorDropdownValueComponent {
+  @Input() public readonly keyColumnTitle!: string;
+  @Input() public readonly valueColumnTitle!: string;
+  @Input() public readonly dropdownColumnTitle!: string;
+  @Input() public readonly index!: number;
+  @Input() public readonly value!: MultiInputKeyValue;
+  @Input() public readonly dropdownItems$!: Observable<Array<ListItemWithId>>;
+  @Input() public readonly documentDefinitionName = '';
+  @Input() public readonly prefixes: ValuePathSelectorPrefix[] = [];
+  @Input() public readonly showDocumentDefinitionSelector = false;
+  @Input() public readonly notation: ValuePathSelectorNotation = 'dots';
+  @Input() public readonly dropdownWidth = 250;
+  @Input() @HostBinding('class.--full-width') public readonly fullWidth = false;
+  @Input() public readonly disabled = false;
+
+  @Output() public readonly valueChange: EventEmitter<{
+    value: MultiInputKeyValue;
+    inputValue: string;
+    type: MultiInputChangeEventType;
+  }> = new EventEmitter();
+
+  public onInputChange(type: MultiInputChangeEventType, inputValue: string): void {
+    this.valueChange.emit({value: this.value, inputValue, type});
+  }
+}
diff --git a/projects/valtimo/components/src/lib/components/multi-input/components/value-path-selector-value/index.ts b/projects/valtimo/components/src/lib/components/multi-input/components/value-path-selector-value/index.ts
new file mode 100644
index 000000000..edd8f5d94
--- /dev/null
+++ b/projects/valtimo/components/src/lib/components/multi-input/components/value-path-selector-value/index.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export * from './value-path-selector-value.component';
diff --git a/projects/valtimo/components/src/lib/components/multi-input/components/value-path-selector-value/value-path-selector-value.component.html b/projects/valtimo/components/src/lib/components/multi-input/components/value-path-selector-value/value-path-selector-value.component.html
new file mode 100644
index 000000000..8e14b3945
--- /dev/null
+++ b/projects/valtimo/components/src/lib/components/multi-input/components/value-path-selector-value/value-path-selector-value.component.html
@@ -0,0 +1,42 @@
+<!--
+  ~ Copyright 2015-2024 Ritense BV, the Netherlands.
+  ~
+  ~ Licensed under EUPL, Version 1.2 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" basis,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+
+<div class="v-multi-input__input path-selector" [ngClass]="{'--full-width': fullWidth}">
+  <cds-label *ngIf="index === 0 && keyColumnTitle">{{ keyColumnTitle }}</cds-label>
+
+  <valtimo-value-path-selector
+    [documentDefinitionName]="documentDefinitionName"
+    [prefixes]="prefixes"
+    [showDocumentDefinitionSelector]="showDocumentDefinitionSelector"
+    [disabled]="disabled"
+    [defaultValue]="value?.key"
+    [notation]="notation"
+    (valueChangeEvent)="onInputChange('key', $event)"
+  ></valtimo-value-path-selector>
+</div>
+
+<div class="v-multi-input__separator"></div>
+
+<div class="v-multi-input__input" [ngClass]="{'--full-width': fullWidth}">
+  <cds-label *ngIf="index === 0 && valueColumnTitle">{{ valueColumnTitle }}</cds-label>
+
+  <input
+    cdsText
+    [defaultValue]="value.value"
+    [disabled]="disabled"
+    (input)="onInputChange('value', $event.target.value)"
+  />
+</div>
diff --git a/projects/valtimo/components/src/lib/components/multi-input/components/value-path-selector-value/value-path-selector-value.component.scss b/projects/valtimo/components/src/lib/components/multi-input/components/value-path-selector-value/value-path-selector-value.component.scss
new file mode 100644
index 000000000..15f287714
--- /dev/null
+++ b/projects/valtimo/components/src/lib/components/multi-input/components/value-path-selector-value/value-path-selector-value.component.scss
@@ -0,0 +1,29 @@
+/*!
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+:host {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+
+  &.--full-width {
+    width: 100%;
+  }
+
+  .path-selector {
+    flex: 2;
+  }
+}
diff --git a/projects/valtimo/components/src/lib/components/multi-input/components/value-path-selector-value/value-path-selector-value.component.ts b/projects/valtimo/components/src/lib/components/multi-input/components/value-path-selector-value/value-path-selector-value.component.ts
new file mode 100644
index 000000000..4d4c235c0
--- /dev/null
+++ b/projects/valtimo/components/src/lib/components/multi-input/components/value-path-selector-value/value-path-selector-value.component.ts
@@ -0,0 +1,65 @@
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHimport { LabelModule } from 'carbon-components-angular';
+OUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {Component, EventEmitter, HostBinding, Input, Output} from '@angular/core';
+import {
+  MultiInputChangeEventType,
+  MultiInputKeyValue,
+  ValuePathSelectorNotation,
+  ValuePathSelectorPrefix,
+} from '../../../../models';
+import {CommonModule} from '@angular/common';
+import {InputModule} from 'carbon-components-angular';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {ValuePathSelectorComponent} from '../../../value-path-selector';
+
+@Component({
+  selector: 'valtimo-value-path-selector-value',
+  templateUrl: './value-path-selector-value.component.html',
+  styleUrls: ['value-path-selector-value.component.scss'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    InputModule,
+    ValuePathSelectorComponent,
+    FormsModule,
+    ReactiveFormsModule,
+  ],
+})
+export class ValuePathSelectorValueComponent {
+  @Input() public readonly keyColumnTitle!: string;
+  @Input() public readonly valueColumnTitle!: string;
+  @Input() public readonly index!: number;
+  @Input() public readonly value!: MultiInputKeyValue;
+  @Input() @HostBinding('class.--full-width') public readonly fullWidth = false;
+  @Input() public readonly disabled = false;
+
+  @Input() public readonly documentDefinitionName = '';
+  @Input() public readonly prefixes: ValuePathSelectorPrefix[] = [];
+  @Input() public readonly showDocumentDefinitionSelector = false;
+  @Input() public readonly notation: ValuePathSelectorNotation = 'dots';
+
+  @Output() public readonly valueChange: EventEmitter<{
+    value: MultiInputKeyValue;
+    inputValue: string;
+    type: MultiInputChangeEventType;
+  }> = new EventEmitter();
+
+  public onInputChange(type: MultiInputChangeEventType, inputValue: string): void {
+    this.valueChange.emit({value: this.value, inputValue, type});
+  }
+}
diff --git a/projects/valtimo/components/src/lib/components/value-path-selector/index.ts b/projects/valtimo/components/src/lib/components/value-path-selector/index.ts
new file mode 100644
index 000000000..1ce41a4ab
--- /dev/null
+++ b/projects/valtimo/components/src/lib/components/value-path-selector/index.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export * from './value-path-selector.component';
diff --git a/projects/valtimo/components/src/lib/components/value-path-selector/value-path-selector.component.html b/projects/valtimo/components/src/lib/components/value-path-selector/value-path-selector.component.html
index eba705cc5..78d6bef11 100644
--- a/projects/valtimo/components/src/lib/components/value-path-selector/value-path-selector.component.html
+++ b/projects/valtimo/components/src/lib/components/value-path-selector/value-path-selector.component.html
@@ -25,6 +25,16 @@
   <v-input-label [required]="required" [title]="label" [tooltip]="tooltip"> </v-input-label>
 
   <form [formGroup]="formGroup" class="value-path-selector__form">
+    <cds-toggle
+      data-testid="value-path-selector-toggle"
+      size="sm"
+      [disabled]="obs.disabled"
+      [onText]="'valuePathSelector.dropdown' | translate"
+      [offText]="'valuePathSelector.manual' | translate"
+      [checked]="obs.inputModeIsDropdown"
+      (checkedChange)="onInputModeChange($event)"
+    ></cds-toggle>
+
     @if (obs.inputModeIsDropdown) {
       <ng-container
         *ngIf="
@@ -40,7 +50,8 @@
           [disabled]="
             obs.disabled ||
             docObs.loadingDocumentDefinitionItems ||
-            !docObs.documentDefinitionListItems
+            !docObs.documentDefinitionListItems ||
+            (docObs.documentDefinitionListItems || []).length === 0
           "
           (selected)="onDocumentDefinitionSelected($event)"
           [placeholder]="'valuePathSelector.selectDocDefPlaceholder' | translate"
@@ -52,7 +63,12 @@
       <cds-dropdown
         data-testid="value-path-selector-valuePath"
         [appendInline]="appendInline"
-        [disabled]="obs.disabled || obs.loadingValuePathItems || !obs.valuePathListItems"
+        [disabled]="
+          obs.disabled ||
+          obs.loadingValuePathItems ||
+          !obs.valuePathListItems ||
+          (obs.valuePathListItems || []).length === 0
+        "
         (selected)="onPathSelected($event)"
         [placeholder]="'valuePathSelector.placeholder' | translate"
       >
@@ -66,14 +82,5 @@
         formControlName="selectedPath"
       />
     }
-
-    <cds-toggle
-      data-testid="value-path-selector-toggle"
-      [disabled]="obs.disabled"
-      [onText]="'valuePathSelector.dropdown' | translate"
-      [offText]="'valuePathSelector.manual' | translate"
-      [checked]="obs.inputModeIsDropdown"
-      (checkedChange)="onInputModeChange($event)"
-    ></cds-toggle>
   </form>
 </ng-container>
diff --git a/projects/valtimo/components/src/lib/components/value-path-selector/value-path-selector.component.scss b/projects/valtimo/components/src/lib/components/value-path-selector/value-path-selector.component.scss
index d0159026f..cb06e3c3f 100644
--- a/projects/valtimo/components/src/lib/components/value-path-selector/value-path-selector.component.scss
+++ b/projects/valtimo/components/src/lib/components/value-path-selector/value-path-selector.component.scss
@@ -41,6 +41,7 @@
 
   ::ng-deep cds-dropdown {
     width: 100%;
+    min-width: 0;
   }
 
   ::ng-deep .cds--toggle__label-text {
diff --git a/projects/valtimo/components/src/lib/components/value-path-selector/value-path-selector.component.ts b/projects/valtimo/components/src/lib/components/value-path-selector/value-path-selector.component.ts
index 7e6ebcad0..40a7db4b1 100644
--- a/projects/valtimo/components/src/lib/components/value-path-selector/value-path-selector.component.ts
+++ b/projects/valtimo/components/src/lib/components/value-path-selector/value-path-selector.component.ts
@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
+import {CommonModule} from '@angular/common';
 import {
   Component,
   EventEmitter,
@@ -25,8 +25,23 @@ import {
   OnInit,
   Output,
 } from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {ValuePathSelectorService} from '../../services';
+import {
+  AbstractControl,
+  ControlValueAccessor,
+  FormBuilder,
+  FormControl,
+  NG_VALUE_ACCESSOR,
+  ReactiveFormsModule,
+} from '@angular/forms';
+import {TranslateModule} from '@ngx-translate/core';
+import {DocumentService} from '@valtimo/document';
+import {
+  DropdownModule,
+  InputModule,
+  ListItem,
+  LoadingModule,
+  ToggleModule,
+} from 'carbon-components-angular';
 import {
   BehaviorSubject,
   combineLatest,
@@ -39,30 +54,16 @@ import {
   switchMap,
   tap,
 } from 'rxjs';
+import {distinctUntilChanged} from 'rxjs/operators';
 import {
+  ValueCollectionPath,
   ValuePathSelectorInputMode,
   ValuePathSelectorNotation,
   ValuePathSelectorPrefix,
-} from '../../models/value-path-selector.model';
-import {
-  DropdownModule,
-  InputModule,
-  ListItem,
-  LoadingModule,
-  ToggleModule,
-} from 'carbon-components-angular';
-import {
-  AbstractControl,
-  ControlValueAccessor,
-  FormBuilder,
-  FormControl,
-  NG_VALUE_ACCESSOR,
-  ReactiveFormsModule,
-} from '@angular/forms';
+  ValueResolverOptionType,
+} from '../../models';
+import {ValuePathSelectorService} from '../../services';
 import {InputLabelModule} from '../input-label/input-label.module';
-import {TranslateModule} from '@ngx-translate/core';
-import {DocumentService} from '@valtimo/document';
-import {distinctUntilChanged} from 'rxjs/operators';
 
 @Component({
   selector: 'valtimo-value-path-selector',
@@ -154,12 +155,26 @@ export class ValuePathSelectorComponent implements OnInit, OnDestroy, ControlVal
     if (!value) return;
     this._prefixesSubject$.next(value);
   }
+  private readonly _valueType$ = new BehaviorSubject<ValueResolverOptionType>(
+    ValueResolverOptionType.FIELD
+  );
+  @Input() public set valueType(value: ValueResolverOptionType) {
+    this._valueType$.next(value);
+  }
   @Input() public label = '';
   @Input() public tooltip = '';
   @Input() public required = false;
   @Input() public showDocumentDefinitionSelector = false;
   @Input() public notation: ValuePathSelectorNotation = 'dots';
 
+  private readonly _selectedCollectionPath$ = new BehaviorSubject<ValueCollectionPath | null>(null);
+  @Input() public set selectedCollectionPath(value: ValueCollectionPath | null) {
+    this._selectedCollectionPath$.next(value);
+
+    if (!value) return;
+    this._inputMode$.next(ValuePathSelectorInputMode.DROPDOWN);
+  }
+
   @Input() public set defaultValue(value: string) {
     if (!value) return;
     this.selectedPath.setValue(value);
@@ -167,6 +182,8 @@ export class ValuePathSelectorComponent implements OnInit, OnDestroy, ControlVal
       this._inputMode$.next(ValuePathSelectorInputMode.MANUAL);
   }
   @Output() valueChangeEvent: EventEmitter<string> = new EventEmitter();
+  @Output() collectionPathSelected: EventEmitter<ValueCollectionPath | {content: string} | null> =
+    new EventEmitter();
 
   private readonly _documentDefinitionNameSubject$ = new BehaviorSubject<string>('');
   private get _documentDefinitionName$(): Observable<string> {
@@ -194,32 +211,63 @@ export class ValuePathSelectorComponent implements OnInit, OnDestroy, ControlVal
     this._documentDefinitionName$,
     this._prefixes$,
     this._version$,
+    this._valueType$,
+    this._selectedCollectionPath$,
   ]).pipe(
     tap(() => this.loadingValuePathItems$.next(true)),
-    switchMap(([documentDefinitionName, prefixes, version]) =>
-      typeof version === 'number'
-        ? this.valuePathSelectorService.getResolvableKeysPerPrefix(
-            prefixes,
-            documentDefinitionName,
-            version
+    switchMap(([documentDefinitionName, prefixes, version, valueType, selectedCollection]) =>
+      !selectedCollection
+        ? typeof version === 'number'
+          ? this.valuePathSelectorService.getResolvableKeysPerPrefix(
+              prefixes,
+              documentDefinitionName,
+              valueType,
+              version
+            )
+          : this.valuePathSelectorService.getResolvableKeysPerPrefix(
+              prefixes,
+              documentDefinitionName,
+              valueType
+            )
+        : of(
+            this.valuePathSelectorService.getCollectionPathCacheResult(
+              selectedCollection.prefix,
+              documentDefinitionName,
+              version ?? 'latest',
+              selectedCollection.unformattedPath
+            )
           )
-        : this.valuePathSelectorService.getResolvableKeysPerPrefix(prefixes, documentDefinitionName)
     ),
-    map(result =>
-      result.map(path => this.getFormattedPath(path)).sort((a, b) => a.localeCompare(b))
+    map((results: string[]) =>
+      results
+        .map(result => this.getFormattedPath(result))
+        .sort((a, b) => a.content.localeCompare(b.content))
     ),
-    tap(options => (this._cachedOptions = options)),
+    tap(options => (this._cachedOptions = options.map(option => option.content))),
     switchMap(options =>
       combineLatest([of(options), this._selectedPath$, this.inputModeIsDropdown$])
     ),
     tap(([options, selectedPath, inputModeIsDropdown]) => {
-      if (!options.includes(selectedPath) && !!selectedPath && inputModeIsDropdown)
+      if (
+        !options.map(option => option.content).includes(selectedPath) &&
+        !!selectedPath &&
+        inputModeIsDropdown
+      )
         this._inputMode$.next(ValuePathSelectorInputMode.MANUAL);
     }),
     map(([options, selectedPath]) =>
-      options.map(option => ({content: option, selected: option === selectedPath}))
+      options.map(option => ({
+        content: option.content,
+        selected: option.content === selectedPath,
+        prefix: option.prefix,
+        unformattedPath: option.unformattedPath,
+      }))
     ),
-    tap(() => this.loadingValuePathItems$.next(false))
+    tap((options: ListItem[]) => {
+      const option = options.find((option: ListItem) => option.selected);
+      if (!!option) this.onPathSelected({item: option});
+      this.loadingValuePathItems$.next(false);
+    })
   );
 
   public readonly loadingDocumentDefinitionItems$ = new BehaviorSubject<boolean>(true);
@@ -290,9 +338,14 @@ export class ValuePathSelectorComponent implements OnInit, OnDestroy, ControlVal
     }
   }
 
-  public onPathSelected(event: {item: {content: string}}): void {
+  public onPathSelected(event: {item: ValueCollectionPath | {content: string}}): void {
     const selectedPath = event?.item?.content;
+
+    if (this.collectionPathSelected.observed)
+      this.collectionPathSelected.emit(!!selectedPath ? event.item : null);
+
     if (!selectedPath) return;
+
     this.selectedPath.setValue(selectedPath);
   }
 
@@ -315,10 +368,18 @@ export class ValuePathSelectorComponent implements OnInit, OnDestroy, ControlVal
     );
   }
 
-  private getFormattedPath(unformattedPath: string): string {
+  private getFormattedPath(unformattedPath: string): ValueCollectionPath {
     const splitPathPrefix = unformattedPath.split(':');
     const prefix = splitPathPrefix[0];
     const remainingPath = splitPathPrefix[1];
+
+    if (!remainingPath)
+      return {
+        prefix,
+        unformattedPath,
+        content: unformattedPath,
+      };
+
     const requiredNotation = this.notation;
     const pathNotation: ValuePathSelectorNotation = remainingPath.includes('/')
       ? 'slashes'
@@ -333,6 +394,10 @@ export class ValuePathSelectorComponent implements OnInit, OnDestroy, ControlVal
       ''
     );
 
-    return `${prefix}:${requiredNotation === 'dots' ? formattedPath.substring(1) : formattedPath}`;
+    return {
+      prefix,
+      unformattedPath,
+      content: `${prefix}:${requiredNotation === 'dots' ? formattedPath.substring(1) : formattedPath}`,
+    };
   }
 }
diff --git a/projects/valtimo/components/src/lib/components/view-content/type-converters/booleanTypeConverter.ts b/projects/valtimo/components/src/lib/components/view-content/type-converters/booleanTypeConverter.ts
index 51637fd53..68ef4d7ea 100644
--- a/projects/valtimo/components/src/lib/components/view-content/type-converters/booleanTypeConverter.ts
+++ b/projects/valtimo/components/src/lib/components/view-content/type-converters/booleanTypeConverter.ts
@@ -27,7 +27,7 @@ export class BooleanTypeConverter implements TypeConverter {
   }
 
   public convert(value: any, definition: any): string {
-    if (!value) return '-';
+    if (value === null || value === undefined) return '-';
     const enumeration = definition?.enum;
 
     if (enumeration && Array.isArray(enumeration) && enumeration.length > 1) {
diff --git a/projects/valtimo/components/src/lib/components/view-content/type-converters/stringTypeConverter.ts b/projects/valtimo/components/src/lib/components/view-content/type-converters/stringTypeConverter.ts
index 1eb218c42..6dae9a3e4 100644
--- a/projects/valtimo/components/src/lib/components/view-content/type-converters/stringTypeConverter.ts
+++ b/projects/valtimo/components/src/lib/components/view-content/type-converters/stringTypeConverter.ts
@@ -22,6 +22,14 @@ export class StringTypeConverter implements TypeConverter {
   }
 
   public convert(value: any): string {
+    if (!value) return '-';
+
+    if (Array.isArray(value) && typeof value[0] === 'string')
+      return value.reduce(
+        (acc, curr, index) => `${acc}${index < value.length && index > 0 ? ', ' : ''}${curr}`,
+        ''
+      );
+
     return value;
   }
 }
diff --git a/projects/valtimo/components/src/lib/models/multi-input.model.ts b/projects/valtimo/components/src/lib/models/multi-input.model.ts
index 1b37d0ebb..ad3ac309c 100644
--- a/projects/valtimo/components/src/lib/models/multi-input.model.ts
+++ b/projects/valtimo/components/src/lib/models/multi-input.model.ts
@@ -17,7 +17,14 @@
 import {FormOutput} from '../models';
 import {ListItem} from 'carbon-components-angular';
 
-type MultiInputType = 'keyValue' | 'value' | 'keyDropdownValue' | 'arbitraryAmount';
+type MultiInputType =
+  | 'keyValue'
+  | 'value'
+  | 'keyDropdownValue'
+  | 'arbitraryAmount'
+  | 'keyValuePathSelector'
+  | 'valuePathSelectorValue'
+  | 'valuePathSelectorDropdownValue';
 
 interface MultiInputKeyValue {
   uuid?: string;
@@ -47,6 +54,8 @@ interface ArbitraryInputTitles {
   [indexKey: string]: string;
 }
 
+type MultiInputChangeEventType = 'key' | 'value' | 'dropdown' | 'arbitrary';
+
 export {
   MultiInputType,
   MultiInputValues,
@@ -56,4 +65,5 @@ export {
   MultiInputFormsValues,
   ListItemWithId,
   ArbitraryInputTitles,
+  MultiInputChangeEventType,
 };
diff --git a/projects/valtimo/components/src/lib/models/value-path-selector.model.ts b/projects/valtimo/components/src/lib/models/value-path-selector.model.ts
index 1d5cfeca6..b9d9dabbd 100644
--- a/projects/valtimo/components/src/lib/models/value-path-selector.model.ts
+++ b/projects/valtimo/components/src/lib/models/value-path-selector.model.ts
@@ -24,8 +24,37 @@ interface ValuePathSelectorCache {
   };
 }
 
+interface ValuePathCollectionCache {
+  [documentDefinitionName: string]: {
+    [version: string | number]: {
+    [prefix: string]: ValueCollectionCacheEntry;
+    };
+  };
+}
+
+interface ValueCollectionCacheEntry {
+  [collectionPath: string]: string[];
+}
+
+interface ValueCollectionPath {
+  content: string;
+  prefix: string;
+  unformattedPath: string;
+}
+
 type DocumentDefinitionItemsCache = ListItem[];
 
+interface ValueResolverOption {
+  prefixes: ValuePathSelectorPrefix[];
+  type: ValueResolverOptionType;
+}
+
+interface ValueResolverResult {
+  path: string;
+  type: ValueResolverOptionType;
+  children?: ValueResolverResult[];
+}
+
 enum ValuePathSelectorPrefix {
   DOC = 'doc',
   CASE = 'case',
@@ -35,6 +64,11 @@ enum ValuePathSelectorPrefix {
   ZAAK = 'zaak',
 }
 
+enum ValueResolverOptionType {
+  FIELD = 'FIELD',
+  COLLECTION = 'COLLECTION',
+}
+
 enum ValuePathSelectorInputMode {
   DROPDOWN,
   MANUAL,
@@ -45,10 +79,16 @@ type ValuePathSelectorNotation = 'dots' | 'slashes';
 type ValuePathVersionArgument = number | 'latest';
 
 export {
+  DocumentDefinitionItemsCache,
+  ValueCollectionCacheEntry,
+  ValueCollectionPath,
+  ValuePathCollectionCache,
   ValuePathSelectorCache,
-  ValuePathSelectorPrefix,
   ValuePathSelectorInputMode,
-  ValuePathVersionArgument,
-  DocumentDefinitionItemsCache,
   ValuePathSelectorNotation,
+  ValuePathSelectorPrefix,
+  ValuePathVersionArgument,
+  ValueResolverOption,
+  ValueResolverOptionType,
+  ValueResolverResult,
 };
diff --git a/projects/valtimo/components/src/lib/pipes/ellipsis.pipe.ts b/projects/valtimo/components/src/lib/pipes/ellipsis.pipe.ts
new file mode 100644
index 000000000..2308c1f53
--- /dev/null
+++ b/projects/valtimo/components/src/lib/pipes/ellipsis.pipe.ts
@@ -0,0 +1,10 @@
+import {Pipe, PipeTransform} from '@angular/core';
+
+@Pipe({name: 'valtimoEllipsis', standalone: true})
+export class EllipsisPipe implements PipeTransform {
+  public transform(content: string, limit?: number | null): string {
+    if (!limit) return content;
+
+    return content.substring(0, limit) + (content.length > limit ? '...' : '');
+  }
+}
diff --git a/projects/valtimo/components/src/lib/pipes/index.ts b/projects/valtimo/components/src/lib/pipes/index.ts
index 4185a4e93..ae59629da 100644
--- a/projects/valtimo/components/src/lib/pipes/index.ts
+++ b/projects/valtimo/components/src/lib/pipes/index.ts
@@ -18,3 +18,4 @@ export * from './menu-item-translation.pipe';
 export * from './components-pipes.module';
 export * from './case-count.pipe';
 export * from './is-array.pipe';
+export * from './ellipsis.pipe';
diff --git a/projects/valtimo/components/src/lib/services/valtimo-modal.service.ts b/projects/valtimo/components/src/lib/services/valtimo-modal.service.ts
index d298fd61c..f1b29af67 100644
--- a/projects/valtimo/components/src/lib/services/valtimo-modal.service.ts
+++ b/projects/valtimo/components/src/lib/services/valtimo-modal.service.ts
@@ -16,6 +16,7 @@
 
 import {Injectable} from '@angular/core';
 import {BehaviorSubject, Observable, Subject} from 'rxjs';
+import {filter, tap} from 'rxjs/operators';
 
 @Injectable({
   providedIn: 'root',
@@ -29,7 +30,9 @@ export class ValtimoModalService {
   }
 
   get documentDefinitionName$(): Observable<string> {
-    return this._documentDefinitionName$.asObservable();
+    return this._documentDefinitionName$.pipe(
+      filter(documentDefinitionName => !!documentDefinitionName)
+    );
   }
 
   scrollToTop(): void {
diff --git a/projects/valtimo/components/src/lib/services/value-path-selector.service.ts b/projects/valtimo/components/src/lib/services/value-path-selector.service.ts
index dce150046..8b272fc2d 100644
--- a/projects/valtimo/components/src/lib/services/value-path-selector.service.ts
+++ b/projects/valtimo/components/src/lib/services/value-path-selector.service.ts
@@ -29,7 +29,16 @@ import {
   switchMap,
   take,
 } from 'rxjs';
-import {ValuePathSelectorCache, ValuePathSelectorPrefix, ValuePathVersionArgument} from '../models';
+import {
+  ValueCollectionCacheEntry,
+  ValuePathCollectionCache,
+  ValuePathSelectorCache,
+  ValuePathSelectorPrefix,
+  ValuePathVersionArgument,
+  ValueResolverOption,
+  ValueResolverOptionType,
+  ValueResolverResult,
+} from '../models';
 import {deepmerge} from 'deepmerge-ts';
 import {DocumentDefinitions} from '@valtimo/document';
 import {isEqual} from 'lodash';
@@ -40,6 +49,7 @@ import {tap} from 'rxjs/operators';
 })
 export class ValuePathSelectorService extends BaseApiService implements OnDestroy {
   private _cache: ValuePathSelectorCache = {};
+  private _collectionCache: ValuePathCollectionCache = {};
   private _documentDefinitionCache$ = new BehaviorSubject<DocumentDefinitions | null>(null);
 
   private readonly _subscriptions = new Subscription();
@@ -55,6 +65,7 @@ export class ValuePathSelectorService extends BaseApiService implements OnDestro
   public getResolvableKeysPerPrefix(
     prefixes: ValuePathSelectorPrefix[],
     documentDefinitionName: string,
+    type: ValueResolverOptionType = ValueResolverOptionType.FIELD,
     version: ValuePathVersionArgument = 'latest'
   ): Observable<string[]> {
     return of(version).pipe(
@@ -66,26 +77,46 @@ export class ValuePathSelectorService extends BaseApiService implements OnDestro
           .map(prefix => this.getResultFromCache(prefix, documentDefinitionName, version))
           .reduce((acc, curr) => [...acc, ...curr], []);
         const prefixesWithoutCache = prefixes.filter(prefix => !prefixesWithCache.includes(prefix));
+        const reqBody: ValueResolverOption = {
+          prefixes,
+          type,
+        };
         const httpCall =
           typeof version !== 'number'
             ? this.httpClient
                 .post<
-                  string[]
-                >(this.getApiUrl(`/management/v1/value-resolver/document-definition/${documentDefinitionName}/keys`), prefixesWithoutCache)
+                  ValueResolverResult[]
+                >(this.getApiUrl(`/management/v2/value-resolver/document-definition/${documentDefinitionName}/keys`), reqBody)
                 .pipe(catchError(() => of([])))
             : this.httpClient
                 .post<
-                  string[]
-                >(this.getApiUrl(`/management/v1/value-resolver/document-definition/${documentDefinitionName}/version/${version}/keys`), prefixesWithoutCache)
+                  ValueResolverResult[]
+                >(this.getApiUrl(`/management/v2/value-resolver/document-definition/${documentDefinitionName}/version/${version}/keys`), reqBody)
                 .pipe(catchError(() => of([])));
 
         return combineLatest([
-          prefixesWithoutCache.length > 0 ? httpCall : of([]),
+          prefixesWithoutCache.length > 0
+            ? httpCall.pipe(
+                map((results: ValueResolverResult[]) => {
+                  if (type === ValueResolverOptionType.COLLECTION)
+                    this.cacheCollectionFieldPaths(
+                      results,
+                      prefixes,
+                      documentDefinitionName,
+                      version
+                    );
+
+                  return type === ValueResolverOptionType.FIELD
+                    ? results.map((result: ValueResolverResult) => result.path)
+                    : results.reduce((acc, curr) => [...acc, ...this.getCollectionPaths(curr)], []);
+                })
+              )
+            : of([]),
           of(resultsFromCache),
         ]);
       }),
-      tap(([result, resultsFromCache]) => {
-        const combinedResults = [...result, ...resultsFromCache];
+      tap(([results, resultsFromCache]) => {
+        const combinedResults = [...results, ...resultsFromCache];
         prefixes.forEach(prefix => {
           const prefixResults = combinedResults.filter(valuePath => valuePath.includes(prefix));
           this.cacheResult(prefix, documentDefinitionName, version, prefixResults);
@@ -109,6 +140,17 @@ export class ValuePathSelectorService extends BaseApiService implements OnDestro
     return this._documentDefinitionCache$.asObservable();
   }
 
+  public getCollectionPathCacheResult(
+    prefix: string,
+    documentDefinitionName: string,
+    version: ValuePathVersionArgument = 'latest',
+    collectionKey: string
+  ): string[] {
+    return (
+      this._collectionCache[documentDefinitionName]?.[version]?.[prefix]?.[collectionKey] || []
+    );
+  }
+
   private openClearCacheSubscription(): void {
     this._subscriptions.add(
       interval(60 * 1000).subscribe(() => {
@@ -144,4 +186,91 @@ export class ValuePathSelectorService extends BaseApiService implements OnDestro
       this._cache = deepmerge(this._cache, resultCacheObject);
     }
   }
+
+  private getCollectionPaths(result: ValueResolverResult): string[] {
+    if (result.type === ValueResolverOptionType.FIELD) return [];
+
+    if (
+      !result.children.some(
+        (child: ValueResolverResult) => child.type === ValueResolverOptionType.COLLECTION
+      )
+    )
+      return [result.path];
+
+    return result.children.reduce(
+      (acc, curr) => [
+        ...acc,
+        ...this.getCollectionPaths(curr).map(childPath => `${result.path}${childPath}`),
+      ],
+      []
+    );
+  }
+
+  private getCollectionCacheResult(
+    prefix: string,
+    documentDefinitionName: string,
+    version: ValuePathVersionArgument = 'latest'
+  ): ValueCollectionCacheEntry | null {
+    return this._collectionCache[documentDefinitionName]?.[version]?.[prefix] || null;
+  }
+
+  private cacheCollectionFieldPaths(
+    results: ValueResolverResult[],
+    prefixes,
+    documentDefinitionName,
+    version
+  ): void {
+    const prefixesWithResult = prefixes.filter((prefix: string) =>
+      results.some((result: ValueResolverResult) => result.path.includes(prefix))
+    );
+
+    const resultCacheObject: ValuePathCollectionCache = {
+      [documentDefinitionName]: {
+        [version]: {
+          ...prefixesWithResult.reduce(
+            (acc, curr) => ({
+              ...acc,
+              [curr]: {
+                ...results
+                  .filter((result: ValueResolverResult) => result.path.includes(curr))
+                  .reduce((acc, curr) => ({...acc, ...this.getChildrenField(curr)}), {}),
+              },
+            }),
+            {}
+          ),
+        },
+      },
+    };
+
+    if (
+      prefixesWithResult.some(
+        prefix => !this.getCollectionCacheResult(prefix, documentDefinitionName, version)
+      )
+    )
+      this._collectionCache = deepmerge(this._collectionCache, resultCacheObject);
+  }
+
+  private getChildrenField(
+    result: ValueResolverResult,
+    parentPath = ''
+  ): ValueCollectionCacheEntry {
+    const collectionChildren = result.children?.filter(
+      (child: ValueResolverResult) => child.type === ValueResolverOptionType.COLLECTION
+    );
+
+    if (!collectionChildren || collectionChildren.length === 0)
+      return {
+        [`${parentPath}${result.path}`]: result.children.map(
+          (child: ValueResolverResult) => child.path
+        ),
+      };
+
+    return collectionChildren.reduce(
+      (collectionEntries, collectionChild) => ({
+        ...collectionEntries,
+        ...this.getChildrenField(collectionChild, result.path),
+      }),
+      {}
+    );
+  }
 }
diff --git a/projects/valtimo/config/assets/core/de.json b/projects/valtimo/config/assets/core/de.json
index 792d8c8e5..d8db8a183 100644
--- a/projects/valtimo/config/assets/core/de.json
+++ b/projects/valtimo/config/assets/core/de.json
@@ -202,16 +202,16 @@
     "tagsPlaceholder": "Wählen Sie Tags aus",
     "format": "Datei Format",
     "trefwoorden": "Schlüsselwörter",
-    "filename": "Dateiname",
+    "filename": "Dateiname (optional)",
     "filenameTooltip": "Der Name der physischen Datei, in der der Inhalt des Dokuments erfasst wird, einschließlich Erweiterung",
     "filenamePlaceholder": "Dateinamen hinzufügen",
-    "confidentialityLevel": "Vertraulichkeitshinweis",
+    "confidentialityLevel": "Vertraulichkeitshinweis (optional)",
     "confidentialityLevelTooltip": "Angabe, inwieweit das Dokument für die Öffentlichkeit bestimmt ist",
     "confidentialityPlaceholder": "Wählen Sie Vertraulichkeit",
     "inputTitle": "Titel",
     "inputTitleTooltip": "Der Name, unter dem das Dokument offiziell bekannt ist",
     "inputTitlePlaceholder": "Titel hinzufügen",
-    "inputDescription": "Beschreibung",
+    "inputDescription": "Beschreibung (optional)",
     "inputDescriptionTooltip": "Eine allgemeine Beschreibung des Inhalts des Dokuments",
     "inputDescriptionPlaceholder": "Beschreibung hinzufügen",
     "openbaar": "Öffentlichkeit",
@@ -225,7 +225,7 @@
     "author": "Autor",
     "authorTooltip": "Der ursprüngliche Autor des Dokuments",
     "authorPlaceholder": "Autor hinzufügen",
-    "status": "Status",
+    "status": "Status (optional)",
     "statusTooltip": "Der aktuelle Status des Dokuments. 'In Bearbeitung': Das Dokument wird noch bearbeitet; 'Zu bestimmen': Das Dokument ist fertig, muss aber noch festgelegt werden; 'Final': Das Dokument wurde von einer autorisierten Person erstellt oder erhalten; 'Archiviert': Das Dokument wurde dauerhaft gespeichert.",
     "statusPlaceholder": "Wählen Sie den Status",
     "in_bewerking": "In Bearbeitung",
@@ -816,7 +816,10 @@
         "type": "Anzeigetyp",
         "typePlaceholder": "Wählen Sie Typ",
         "value": "Wert",
-        "valuePlaceholder": "Weg zum Wert"
+        "valuePlaceholder": "Weg zum Wert",
+        "ellipsisCharacterLimit": "Zeichenbeschränkung für Auslassungszeichen",
+        "ellipsisCharacterLimitTooltip": "Geben Sie die Anzahl der Zeichen ein, die angezeigt werden sollen, bevor Auslassungspunkte angezeigt werden",
+        "ellipsisCharacterLimitPlaceholder": "Wählen Sie eine Anzahl von Zeichen (optional)"
       },
       "displayType": {
         "text": "Text",
@@ -929,9 +932,51 @@
         "valueMaxLength": "Das Schlüsselwort ist zu lang. Die maximale Länge beträgt {{ maxlength }} Zeichen."
       }
     },
+    "uploadFields": {
+      "uploadField": "Upload-Feld",
+      "add": "Upload-Feld hinzufügen",
+      "deleteText": "Sind Sie sicher, dass Sie dieses Upload-Feld löschen möchten?",
+      "deleteMultipleText": "Sind Sie sicher, dass Sie diese Upload-Felder löschen möchten?",
+      "addModal": {
+        "header": "Upload-Feld hinzufügen"
+      },
+      "editModal": {
+        "header": "Upload-Feld bearbeiten"
+      },
+      "list": {
+        "noResultsTitle": "Keine Upload-Felder",
+        "noResultsDescription": "Fügen Sie ein Upload-Feld hinzu, um zu beginnen"
+      },
+      "search": {
+        "noResultsTitle": "Keine Ergebnisse",
+        "noResultsDescription": "Versuchen Sie, Ihre Suche oder Filteroptionen anzupassen, um das Gewünschte zu finden."
+      },
+      "fields": {
+        "field": "Schlüssel",
+        "defaultValue": "Standardwert",
+        "visible": "Sichtbar",
+        "readonly": "Schreibgeschützt"
+      },
+      "keys": {
+        "bestandsnaam": "Dateiname",
+        "titel": "Titel",
+        "auteur": "Autor",
+        "beschrijving": "Beschreibung",
+        "taal": "Sprache",
+        "vertrouwelijkheidaanduiding": "Vertraulichkeitskennzeichnung",
+        "creatiedatum": "Erstellungsdatum",
+        "informatieobjecttype": "Informationsobjekttyp",
+        "status": "Status",
+        "verzenddatum": "Versanddatum",
+        "ontvangstdatum": "Empfangsdatum",
+        "aanvullendeDatum": "Zusätzliches Datum",
+        "trefwoorden": "Schlüsselwörter"
+      }
+    },
     "tabs": {
       "documentColumns": "Dokumentspalten",
-      "documentTags": "Dokumentschlüsselwörter"
+      "documentTags": "Dokumentschlüsselwörter",
+      "documentUploadField": "Dokumentschlüsselwörter"
     }
   },
   "task-list": {
diff --git a/projects/valtimo/config/assets/core/en.json b/projects/valtimo/config/assets/core/en.json
index 5fc8f3462..f284c3f9d 100644
--- a/projects/valtimo/config/assets/core/en.json
+++ b/projects/valtimo/config/assets/core/en.json
@@ -202,16 +202,16 @@
     "tagsPlaceholder": "Choose tags",
     "format": "File format",
     "trefwoorden": "Keywords",
-    "filename": "Filename",
+    "filename": "Filename (optional)",
     "filenameTooltip": "The name of the physical file in which the content of the document is captured, including extension",
     "filenamePlaceholder": "Add filename",
-    "confidentialityLevel": "Confidentiality level",
+    "confidentialityLevel": "Confidentiality level (optional)",
     "confidentialityLevelTooltip": "Indication of the extent to which the document is intended for public access",
     "confidentialityPlaceholder": "Choose confidentiality",
     "inputTitle": "Title",
     "inputTitleTooltip": "The name by which the document is formally known",
     "inputTitlePlaceholder": "Add title",
-    "inputDescription": "Description",
+    "inputDescription": "Description (optional)",
     "inputDescriptionTooltip": "A generic description of the content of the document",
     "inputDescriptionPlaceholder": "Add description",
     "openbaar": "Public",
@@ -225,7 +225,7 @@
     "author": "Author",
     "authorTooltip": "The original author of the document",
     "authorPlaceholder": "Add author",
-    "status": "Status",
+    "status": "Status (optional)",
     "statusTooltip": "The current status of the document. 'In editing': the document is being worked on; 'To be confirmed': the document is finished but has yet to be confirmed; 'Definitive': the document has been received or confirmed by an authorized person; 'Archived': the document has been stored lastingly.",
     "statusPlaceholder": "Choose status",
     "in_bewerking": "In editing",
@@ -817,7 +817,10 @@
         "type": "Display type",
         "typePlaceholder": "Choose type",
         "value": "Value",
-        "valuePlaceholder": "Path to value"
+        "valuePlaceholder": "Path to value",
+        "ellipsisCharacterLimit": "Ellipsis character limit",
+        "ellipsisCharacterLimitTooltip": "Enter the number of characters that will display before an ellipsis is shown",
+        "ellipsisCharacterLimitPlaceholder": "Choose a number of characters (optional)"
       },
       "displayType": {
         "text": "Text",
@@ -932,9 +935,51 @@
         "valueMaxLength": "Tag is too long. Maximum length is {{ maxlength }} characters."
       }
     },
+    "uploadFields": {
+      "uploadField": "Upload field",
+      "add": "Add upload field",
+      "deleteText": "Are you sure you want to delete this upload field?",
+      "deleteMultipleText": "Are you sure you want to delete these upload fields?",
+      "addModal": {
+        "header": "Add upload field"
+      },
+      "editModal": {
+        "header": "Edit upload field"
+      },
+      "list": {
+        "noResultsTitle": "No upload fields",
+        "noResultsDescription": "Add a upload field to start"
+      },
+      "search": {
+        "noResultsTitle": "No results",
+        "noResultsDescription": "Try adjusting your search or filter options to find what you're looking for."
+      },
+      "fields": {
+        "field": "Field",
+        "defaultValue": "Default value",
+        "visible": "Visible",
+        "readonly": "Readonly"
+      },
+      "keys": {
+        "bestandsnaam": "File Name",
+        "titel": "Title",
+        "auteur": "Author",
+        "beschrijving": "Description",
+        "taal": "Language",
+        "vertrouwelijkheidaanduiding": "Confidentiality Indication",
+        "creatiedatum": "Creation Date",
+        "informatieobjecttype": "Information Object Type",
+        "status": "Status",
+        "verzenddatum": "Send Date",
+        "ontvangstdatum": "Receive Date",
+        "aanvullendeDatum": "Additional Date",
+        "trefwoorden": "Tags"
+      }
+    },
     "tabs": {
       "documentColumns": "Document columns",
-      "documentTags": "Document tags"
+      "documentTags": "Document tags",
+      "documentUploadFields": "Document upload fields"
     }
   },
   "task-list": {
diff --git a/projects/valtimo/config/assets/core/nl.json b/projects/valtimo/config/assets/core/nl.json
index ede40cf0d..c21b961ce 100644
--- a/projects/valtimo/config/assets/core/nl.json
+++ b/projects/valtimo/config/assets/core/nl.json
@@ -202,16 +202,16 @@
     "tagsPlaceholder": "Kies tags",
     "format": "Bestandsformaat",
     "trefwoorden": "Trefwoorden",
-    "filename": "Bestandsnaam",
+    "filename": "Bestandsnaam (optioneel)",
     "filenameTooltip": "De naam van het fysieke bestand waarin de inhoud van het document is vastgelegd, inclusief extensie",
     "filenamePlaceholder": "Bestandsnaam toevoegen",
-    "confidentialityLevel": "Vertrouwelijkheidsaanduiding",
+    "confidentialityLevel": "Vertrouwelijkheidsaanduiding (optioneel)",
     "confidentialityLevelTooltip": "Aanduiding van de mate waarin het document voor de openbaarheid bestemd is",
     "confidentialityPlaceholder": "Vertrouwelijkheidaanduiding kiezen",
     "inputTitle": "Titel",
     "inputTitleTooltip": "De naam waaronder het document formeel bekend is",
     "inputTitlePlaceholder": "Titel toevoegen",
-    "inputDescription": "Beschrijving",
+    "inputDescription": "Beschrijving (optioneel)",
     "inputDescriptionTooltip": "Een generieke beschrijving van de inhoud van het document",
     "inputDescriptionPlaceholder": "Beschrijving toevoegen",
     "openbaar": "Openbaar",
@@ -225,7 +225,7 @@
     "author": "Auteur",
     "authorTooltip": "De oorspronkelijke auteur van het document",
     "authorPlaceholder": "Voeg auteur toe",
-    "status": "Status",
+    "status": "Status (optioneel)",
     "statusTooltip": "De huidige status van het document. 'In bewerking': aan het document wordt nog gewerkt; 'Ter vaststelling': het document is gereed, maar moet nog vastgesteld worden; 'Definitief': het document is door een bevoegd persoon vastgesteld dan wel ontvangen; 'Gearchiveerd': het document is duurzaam bewaarbaar gemaakt.",
     "statusPlaceholder": "Kies status",
     "in_bewerking": "In bewerking",
@@ -816,7 +816,10 @@
         "type": "Weergavetype",
         "typePlaceholder": "Kies type",
         "value": "Waarde",
-        "valuePlaceholder": "Pad naar waarde"
+        "valuePlaceholder": "Pad naar waarde",
+        "ellipsisCharacterLimit": "Tekenlimiet met beletseltekens",
+        "ellipsisCharacterLimitTooltip": "Voer het aantal tekens in dat wordt weergegeven voordat er een weglatingsteken wordt weergegeven",
+        "ellipsisCharacterLimitPlaceholder": "Kies een aantal karakters (optioneel)"
       },
       "displayType": {
         "text": "Tekst",
@@ -931,9 +934,51 @@
         "valueMaxLength": "Trefwoord is te lang. Maximum lengte is {{ maxlength }} tekens."
       }
     },
+    "uploadFields": {
+      "uploadField": "Uploadveld",
+      "add": "Uploadveld toevoegen",
+      "deleteText": "Weet je zeker dat je dit uploadveld wilt verwijderen?",
+      "deleteMultipleText": "Weet je zeker dat je deze uploadvelden wilt verwijderen?",
+      "addModal": {
+        "header": "Uploadveld toevoegen"
+      },
+      "editModal": {
+        "header": "Uploadveld bewerken"
+      },
+      "list": {
+        "noResultsTitle": "Geen uploadvelden",
+        "noResultsDescription": "Voeg een uploadveld toe om te beginnen"
+      },
+      "search": {
+        "noResultsTitle": "Geen resultaten",
+        "noResultsDescription": "Probeer de zoekfilters aan te passen om te vinden wat je zoekt."
+      },
+      "fields": {
+        "field": "Veld",
+        "defaultValue": "Standaardwaarde",
+        "visible": "Zichtbaar",
+        "readonly": "Alleen lezen"
+      },
+      "keys": {
+        "bestandsnaam": "Bestandsnaam",
+        "titel": "Titel",
+        "auteur": "Auteur",
+        "beschrijving": "Beschrijving",
+        "taal": "Taal",
+        "vertrouwelijkheidaanduiding": "Vertrouwelijkheidaanduiding",
+        "creatiedatum": "Creatiedatum",
+        "informatieobjecttype": "Informatieobjecttype",
+        "status": "Status",
+        "verzenddatum": "Verzenddatum",
+        "ontvangstdatum": "Ontvangstdatum",
+        "aanvullendeDatum": "AanvullendeDatum",
+        "trefwoorden": "Trefwoorden"
+      }
+    },
     "tabs": {
       "documentColumns": "Document kolommen",
-      "documentTags": "Document trefwoorden"
+      "documentTags": "Document trefwoorden",
+      "documentUploadFields": "Document uploadvelden"
     }
   },
   "task-list": {
diff --git a/projects/valtimo/dashboard-management/src/lib/components/edit-dashboard-modal/edit-dashboard-modal.html b/projects/valtimo/dashboard-management/src/lib/components/edit-dashboard-modal/edit-dashboard-modal.html
index 42a8aa532..54f9e6934 100644
--- a/projects/valtimo/dashboard-management/src/lib/components/edit-dashboard-modal/edit-dashboard-modal.html
+++ b/projects/valtimo/dashboard-management/src/lib/components/edit-dashboard-modal/edit-dashboard-modal.html
@@ -36,7 +36,12 @@ <h3 cdsModalHeaderHeading>{{ 'dashboardManagement.widgets.editDashboard' | trans
 </cds-modal>
 
 <ng-template #editDashboardFormTemplate let-obs="obs">
-  <form *ngIf="editDashboardForm" [formGroup]="editDashboardForm" class="dashboard-modal__form">
+  <form
+    *ngIf="editDashboardForm"
+    [formGroup]="editDashboardForm"
+    class="dashboard-modal__form"
+    [cdsLayer]="1"
+  >
     <div class="form__element">
       <cds-label
         [disabled]="obs.disabled"
diff --git a/projects/valtimo/dashboard-management/src/lib/components/widget-modal/widget-modal.component.html b/projects/valtimo/dashboard-management/src/lib/components/widget-modal/widget-modal.component.html
index 40059b58b..3f81a1c3c 100644
--- a/projects/valtimo/dashboard-management/src/lib/components/widget-modal/widget-modal.component.html
+++ b/projects/valtimo/dashboard-management/src/lib/components/widget-modal/widget-modal.component.html
@@ -47,7 +47,7 @@ <h3 cdsModalHeaderHeading>
         </h3>
       </cds-modal-header>
 
-      <section cdsModalContent>
+      <section cdsModalContent [cdsLayer]="1">
         <ng-container *ngIf="vars.isDelete">
           {{ 'dashboardManagement.widgets.deleteDescription' | translate }}</ng-container
         >
diff --git a/projects/valtimo/dashboard-management/src/lib/dashboard-management.module.ts b/projects/valtimo/dashboard-management/src/lib/dashboard-management.module.ts
index 263b81e10..d335c87e3 100644
--- a/projects/valtimo/dashboard-management/src/lib/dashboard-management.module.ts
+++ b/projects/valtimo/dashboard-management/src/lib/dashboard-management.module.ts
@@ -23,12 +23,14 @@ import {
   ListModule,
   RenderInPageHeaderDirectiveModule,
   SpinnerModule,
+  ValtimoCdsModalDirectiveModule,
 } from '@valtimo/components';
 import {
   ButtonModule,
   DropdownModule,
   IconModule,
   InputModule,
+  LayerModule,
   ModalModule,
   NotificationModule,
 } from 'carbon-components-angular';
@@ -65,6 +67,8 @@ import {WidgetConfigurationContainerComponent} from './components/widget-configu
     IconModule,
     WidgetTranslatePipeModule,
     CarbonListModule,
+    LayerModule,
+    ValtimoCdsModalDirectiveModule,
   ],
   exports: [],
 })
diff --git a/projects/valtimo/dashboard/src/lib/data-sources/case-count/case-count.specification.ts b/projects/valtimo/dashboard/src/lib/data-sources/case-count/case-count.specification.ts
index 0e97c5035..a62eee7f0 100644
--- a/projects/valtimo/dashboard/src/lib/data-sources/case-count/case-count.specification.ts
+++ b/projects/valtimo/dashboard/src/lib/data-sources/case-count/case-count.specification.ts
@@ -16,6 +16,7 @@
 
 import {DataSourceSpecification} from '../../models';
 import {CaseCountConfigurationComponent} from './components';
+import {CONDITIONS_HELPER_TEXTS} from '../shared';
 
 export const caseCountDataSourceSpecification: DataSourceSpecification = {
   dataSourceKey: 'case-count',
@@ -35,8 +36,7 @@ export const caseCountDataSourceSpecification: DataSourceSpecification = {
       operator: 'Operator',
       value: 'Wert',
       conditions: 'Bedingungen',
-      conditionsHelperText:
-        "Geben Sie optionale Bedingungen zum Abrufen der Anzahl der Fälle für den ausgewählten Falltyp an. Zum Beispiel: 'case:createdBy', 'Gleich', 'test@test.com'. Zum Vergleichen mit leeren Werten kann als Wert '${null}' eingegeben werden. Zum Vergleichen mit dem aktuellen Datum kann als Wert '${localDateTimeNow}' eingegeben werden. Damit wird beispielsweise auch folgende Logik unterstützt: '${localDateTimeNow.minusWeeks(2)}'.",
+      conditionsHelperText: `Geben Sie optionale Bedingungen zum Abrufen der Anzahl der Fälle für den ausgewählten Falltyp an. ${CONDITIONS_HELPER_TEXTS.DE()}`,
       addCondition: 'Bedingung hinzufügen',
     },
     en: {
@@ -53,8 +53,7 @@ export const caseCountDataSourceSpecification: DataSourceSpecification = {
       operator: 'Operator',
       value: 'Value',
       conditions: 'Conditions',
-      conditionsHelperText:
-        "Specify optional conditions for retrieving the number of cases for the selected case type. For example: 'case:createdBy', 'Equal to', 'test@test.com'. To compare with empty values, '${null}' can be entered as a value. To compare with the current date, '${localDateTimeNow}' can be entered as a value. This also supports, for example, the following logic: '${localDateTimeNow.minusWeeks(2)}'.",
+      conditionsHelperText: `Specify optional conditions for retrieving the number of cases for the selected case type. ${CONDITIONS_HELPER_TEXTS.EN()}`,
       addCondition: 'Add condition',
     },
     nl: {
@@ -71,8 +70,7 @@ export const caseCountDataSourceSpecification: DataSourceSpecification = {
       operator: 'Operator',
       value: 'Waarde',
       conditions: 'Condities',
-      conditionsHelperText:
-        "Geef optionele condities op voor het ophalen van het aantal zaken voor het geselecteerde zaaktype. Bijvoorbeeld: 'case:createdBy', 'Gelijk aan', 'test@test.com'. Voor het vergelijken met lege waardes kan '${null}' ingevuld worden als waarde. Voor het vergelijken met de huidige datum kan '${localDateTimeNow}' ingevuld worden als waarde. Deze ondersteunt ook bijvoorbeeld de volgende logica: '${localDateTimeNow.minusWeeks(2)}'.",
+      conditionsHelperText: `Geef optionele condities op voor het ophalen van het aantal zaken voor het geselecteerde dossiertype. ${CONDITIONS_HELPER_TEXTS.NL()}}`,
       addCondition: 'Conditie toevoegen',
     },
   },
diff --git a/projects/valtimo/dashboard/src/lib/data-sources/case-count/components/case-count-configuration/case-count-configuration.component.html b/projects/valtimo/dashboard/src/lib/data-sources/case-count/components/case-count-configuration/case-count-configuration.component.html
index 2472daad4..72656fcd1 100644
--- a/projects/valtimo/dashboard/src/lib/data-sources/case-count/components/case-count-configuration/case-count-configuration.component.html
+++ b/projects/valtimo/dashboard/src/lib/data-sources/case-count/components/case-count-configuration/case-count-configuration.component.html
@@ -40,6 +40,7 @@
       >{{ 'conditions' | widgetTranslate: dataSourceKey | async }}</cds-label
     >
     <valtimo-carbon-multi-input
+      type="valuePathSelectorDropdownValue"
       [addRowText]="'addCondition' | widgetTranslate: dataSourceKey | async"
       [defaultValues]="defaultConditionValues$ | async"
       [dropdownColumnTitle]="'operator' | widgetTranslate: dataSourceKey | async"
@@ -49,9 +50,12 @@
       [keyColumnTitle]="'path' | widgetTranslate: dataSourceKey | async"
       [minimumAmountOfRows]="0"
       [valueColumnTitle]="'value' | widgetTranslate: dataSourceKey | async"
-      type="keyDropdownValue"
       (allValuesValidEvent)="onAllConditionsValid($event)"
       (valueChange)="conditionsValueChange($event)"
+      valuePathSelectorNotation="dots"
+      [valuePathSelectorPrefixes]="[ValuePathSelectorPrefix.DOC, ValuePathSelectorPrefix.CASE]"
+      [valuePathSelectorShowDocumentDefinitionSelector]="false"
+      [valuePathSelectorDocumentDefinitionName]="selectedDocumentDefinition$ | async"
     ></valtimo-carbon-multi-input>
   </div>
 </form>
diff --git a/projects/valtimo/dashboard/src/lib/data-sources/case-count/components/case-count-configuration/case-count-configuration.component.ts b/projects/valtimo/dashboard/src/lib/data-sources/case-count/components/case-count-configuration/case-count-configuration.component.ts
index eaa71a612..fb1392e8b 100644
--- a/projects/valtimo/dashboard/src/lib/data-sources/case-count/components/case-count-configuration/case-count-configuration.component.ts
+++ b/projects/valtimo/dashboard/src/lib/data-sources/case-count/components/case-count-configuration/case-count-configuration.component.ts
@@ -29,7 +29,12 @@ import {FormBuilder, Validators} from '@angular/forms';
 import {CaseCountConfiguration} from '../../models';
 import {DocumentService} from '@valtimo/document';
 import {ListItem} from 'carbon-components-angular';
-import {ListItemWithId, MultiInputKeyValue, MultiInputValues} from '@valtimo/components';
+import {
+  ListItemWithId,
+  MultiInputKeyValue,
+  MultiInputValues,
+  ValuePathSelectorPrefix,
+} from '@valtimo/components';
 import {TranslateService} from '@ngx-translate/core';
 import {WidgetTranslationService} from '../../../../services';
 
@@ -56,11 +61,11 @@ export class CaseCountConfigurationComponent
     }
   }
 
-  private readonly _selectedDocumentDefinition$ = new BehaviorSubject<string>('');
+  public readonly selectedDocumentDefinition$ = new BehaviorSubject<string>('');
 
   public readonly documentItems$: Observable<Array<ListItem>> = combineLatest([
     this.documentService.getAllDefinitions(),
-    this._selectedDocumentDefinition$,
+    this.selectedDocumentDefinition$,
   ]).pipe(
     map(([documentDefinitions, selectedDocumentDefintion]) =>
       documentDefinitions.content.map(definition => ({
@@ -123,6 +128,8 @@ export class CaseCountConfigurationComponent
     ConfigurationOutput<CaseCountConfiguration>
   >();
 
+  public readonly ValuePathSelectorPrefix = ValuePathSelectorPrefix;
+
   private _subscriptions = new Subscription();
 
   constructor(
@@ -145,7 +152,7 @@ export class CaseCountConfigurationComponent
       return;
     }
 
-    this._selectedDocumentDefinition$.next(documentDefinitionItem?.item?.content);
+    this.selectedDocumentDefinition$.next(documentDefinitionItem?.item?.content);
     this.documentDefinition.setValue(documentDefinitionItem?.item?.content);
   }
 
diff --git a/projects/valtimo/dashboard/src/lib/data-sources/case-counts/case-counts.specification.ts b/projects/valtimo/dashboard/src/lib/data-sources/case-counts/case-counts.specification.ts
index d81673c19..51164ca05 100644
--- a/projects/valtimo/dashboard/src/lib/data-sources/case-counts/case-counts.specification.ts
+++ b/projects/valtimo/dashboard/src/lib/data-sources/case-counts/case-counts.specification.ts
@@ -16,6 +16,7 @@
 
 import {DataSourceSpecification} from '../../models';
 import {CaseCountsConfigurationComponent} from './components';
+import {CONDITIONS_HELPER_TEXTS} from '../shared';
 
 export const caseCountsDataSourceSpecification: DataSourceSpecification = {
   dataSourceKey: 'case-counts',
@@ -35,8 +36,7 @@ export const caseCountsDataSourceSpecification: DataSourceSpecification = {
       operator: 'Operator',
       value: 'Wert',
       counts: 'Anzahllen',
-      countsHelperText:
-        "Geben Sie eine oder mehrere Bedingungen für mindestens zwei Anzahllen an. Zum Beispiel: 'case:createdBy', 'Gleich', 'test@test.com'. Zum Vergleichen mit leeren Werten kann als Wert '${null}' eingegeben werden. Zum Vergleichen mit dem aktuellen Datum kann als Wert '${localDateTimeNow}' eingegeben werden. Damit wird beispielsweise auch folgende Logik unterstützt: '${localDateTimeNow.minusWeeks(2)}'.",
+      countsHelperText: `Geben Sie eine oder mehrere Bedingungen für jede anzuzeigende Zählung an. Konfigurieren Sie mindestens zwei Zählungen und mindestens eine Bedingung pro Zählung. ${CONDITIONS_HELPER_TEXTS.DE()}`,
       addCondition: 'Bedingung hinzufügen',
       countTitle: 'Anzahltitel',
     },
@@ -54,8 +54,7 @@ export const caseCountsDataSourceSpecification: DataSourceSpecification = {
       operator: 'Operator',
       value: 'Value',
       counts: 'Counts',
-      countsHelperText:
-        "Specify one or more conditions for each count that should be displayed. For example: 'case:createdBy', 'Equal to', 'test@test.com'. Configure at least two counts and at least one condition per count.",
+      countsHelperText: `Specify one or more conditions for each count that should be displayed. Configure at least two counts and at least one condition per count. ${CONDITIONS_HELPER_TEXTS.EN()}`,
       addCondition: 'Add condition',
       countTitle: 'Count title',
     },
@@ -73,8 +72,7 @@ export const caseCountsDataSourceSpecification: DataSourceSpecification = {
       operator: 'Operator',
       value: 'Waarde',
       counts: 'Aantallen',
-      countsHelperText:
-        "Geef een of meer condities op voor een minimum van twee aantallen. Bijvoorbeeld: 'case:createdBy', 'Gelijk aan', 'test@test.com'. Voor het vergelijken met lege waardes kan '${null}' ingevuld worden als waarde. Voor het vergelijken met de huidige datum kan '${localDateTimeNow}' ingevuld worden als waarde. Deze ondersteunt ook bijvoorbeeld de volgende logica: '${localDateTimeNow.minusWeeks(2)}'.",
+      countsHelperText: `Geef een of meer condities op voor elk aantal dat moet worden weergegeven. Configureer minimaal twee aantallen en minimaal één conditie per aantal. ${CONDITIONS_HELPER_TEXTS.NL()}`,
       addCondition: 'Conditie toevoegen',
       countTitle: 'Aantaltitel',
     },
diff --git a/projects/valtimo/dashboard/src/lib/data-sources/case-counts/components/case-counts-configuration/case-counts-configuration.component.html b/projects/valtimo/dashboard/src/lib/data-sources/case-counts/components/case-counts-configuration/case-counts-configuration.component.html
index 7a5bf8650..b7280e49c 100644
--- a/projects/valtimo/dashboard/src/lib/data-sources/case-counts/components/case-counts-configuration/case-counts-configuration.component.html
+++ b/projects/valtimo/dashboard/src/lib/data-sources/case-counts/components/case-counts-configuration/case-counts-configuration.component.html
@@ -20,6 +20,7 @@
     documentItems: documentItems$ | async,
     operatorItems: operatorItems$,
     queryItemsValue: queryItemsValue$ | async,
+    selectedDocumentDefinition: selectedDocumentDefinition$ | async,
   } as obs"
   [formGroup]="form"
 >
@@ -46,8 +47,8 @@
   </p>
 
   @for (_ of queryItemsList$ | async; track $index; let i = $index) {
-    <cds-tile class="count-tile" cdsLayer="1">
-      <div class="count-tile__input">
+    <cds-tile class="count-tile" [cdsLayer]="1">
+      <div class="count-tile__input" [cdsLayer]="0">
         <v-input
           [title]="'countTitle' | widgetTranslate: dataSourceKey | async"
           [margin]="true"
@@ -60,6 +61,7 @@
         </v-input>
 
         <valtimo-carbon-multi-input
+          type="valuePathSelectorDropdownValue"
           [disabled]="formDisabled"
           [addRowText]="'addCondition' | widgetTranslate: dataSourceKey | async"
           [defaultValues]="obs.queryItemsValue[i]?.queryConditions"
@@ -70,7 +72,10 @@
           [keyColumnTitle]="'path' | widgetTranslate: dataSourceKey | async"
           [minimumAmountOfRows]="1"
           [valueColumnTitle]="'value' | widgetTranslate: dataSourceKey | async"
-          type="keyDropdownValue"
+          valuePathSelectorNotation="dots"
+          [valuePathSelectorPrefixes]="[ValuePathSelectorPrefix.DOC, ValuePathSelectorPrefix.CASE]"
+          [valuePathSelectorShowDocumentDefinitionSelector]="false"
+          [valuePathSelectorDocumentDefinitionName]="obs.selectedDocumentDefinition"
           (valueChange)="conditionsValueChange(i, $event)"
         ></valtimo-carbon-multi-input>
       </div>
diff --git a/projects/valtimo/dashboard/src/lib/data-sources/case-counts/components/case-counts-configuration/case-counts-configuration.component.ts b/projects/valtimo/dashboard/src/lib/data-sources/case-counts/components/case-counts-configuration/case-counts-configuration.component.ts
index f96ae09f6..4a48d770e 100644
--- a/projects/valtimo/dashboard/src/lib/data-sources/case-counts/components/case-counts-configuration/case-counts-configuration.component.ts
+++ b/projects/valtimo/dashboard/src/lib/data-sources/case-counts/components/case-counts-configuration/case-counts-configuration.component.ts
@@ -43,7 +43,7 @@ import {
 import {CaseCountsConfiguration, CaseCountsQueryItem, CaseCountsQueryItemForm} from '../../models';
 import {DocumentService} from '@valtimo/document';
 import {IconService, ListItem} from 'carbon-components-angular';
-import {ListItemWithId, MultiInputValues} from '@valtimo/components';
+import {ListItemWithId, MultiInputValues, ValuePathSelectorPrefix} from '@valtimo/components';
 import {TranslateService} from '@ngx-translate/core';
 import {WidgetTranslationService} from '../../../../services';
 import {isEqual} from 'lodash';
@@ -120,11 +120,11 @@ export class CaseCountsConfigurationComponent
     ConfigurationOutput<CaseCountsConfiguration>
   >();
 
-  private readonly _selectedDocumentDefinition$ = new BehaviorSubject<string>('');
+  public readonly selectedDocumentDefinition$ = new BehaviorSubject<string>('');
 
   public readonly documentItems$: Observable<Array<ListItem>> = combineLatest([
     this.documentService.getAllDefinitions(),
-    this._selectedDocumentDefinition$,
+    this.selectedDocumentDefinition$,
   ]).pipe(
     map(([documentDefinitions, selectedDocumentDefintion]) =>
       documentDefinitions.content.map(definition => ({
@@ -155,6 +155,8 @@ export class CaseCountsConfigurationComponent
       )
     );
 
+  public readonly ValuePathSelectorPrefix = ValuePathSelectorPrefix;
+
   private _subscriptions = new Subscription();
 
   constructor(
@@ -176,11 +178,14 @@ export class CaseCountsConfigurationComponent
   }
 
   public documentDefinitionSelected(documentDefinitionItem: ListItem): void {
-    if (!documentDefinitionItem) {
+    const documentDefinitionName = documentDefinitionItem?.item?.content;
+
+    if (!documentDefinitionName) {
       return;
     }
 
-    this._selectedDocumentDefinition$.next(documentDefinitionItem?.item?.content);
+    this.selectedDocumentDefinition$.next(documentDefinitionName);
+    this.documentDefinition.setValue(documentDefinitionName);
   }
 
   public conditionsValueChange(index: number, values: MultiInputValues): void {
@@ -223,7 +228,7 @@ export class CaseCountsConfigurationComponent
         this.configurationEvent.emit({
           valid: this.form.valid,
           data: {
-            documentDefinition: formValue?.documentDefinition?.content,
+            documentDefinition: formValue?.documentDefinition,
             queryItems: this.multiInputValuesToQueryItems(formValue.queryItems),
           } as CaseCountsConfiguration,
         });
diff --git a/projects/valtimo/dashboard/src/lib/data-sources/case-group-by/case-group-by.module.ts b/projects/valtimo/dashboard/src/lib/data-sources/case-group-by/case-group-by.module.ts
index ff1203f65..77febc9d6 100644
--- a/projects/valtimo/dashboard/src/lib/data-sources/case-group-by/case-group-by.module.ts
+++ b/projects/valtimo/dashboard/src/lib/data-sources/case-group-by/case-group-by.module.ts
@@ -22,7 +22,7 @@ import {CaseGroupByConfigurationComponent} from './components';
 import {ReactiveFormsModule} from '@angular/forms';
 import {WidgetTranslatePipeModule} from '../../pipes';
 import {DropdownModule, InputModule} from 'carbon-components-angular';
-import {CarbonMultiInputModule} from '@valtimo/components';
+import {CarbonMultiInputModule, ValuePathSelectorComponent} from '@valtimo/components';
 
 @NgModule({
   declarations: [CaseGroupByConfigurationComponent],
@@ -33,6 +33,7 @@ import {CarbonMultiInputModule} from '@valtimo/components';
     InputModule,
     DropdownModule,
     CarbonMultiInputModule,
+    ValuePathSelectorComponent,
   ],
   exports: [CaseGroupByConfigurationComponent],
   providers: [
diff --git a/projects/valtimo/dashboard/src/lib/data-sources/case-group-by/case-group-by.specification.ts b/projects/valtimo/dashboard/src/lib/data-sources/case-group-by/case-group-by.specification.ts
index 20e44f06a..9436898f3 100644
--- a/projects/valtimo/dashboard/src/lib/data-sources/case-group-by/case-group-by.specification.ts
+++ b/projects/valtimo/dashboard/src/lib/data-sources/case-group-by/case-group-by.specification.ts
@@ -16,6 +16,7 @@
 
 import {DataSourceSpecification} from '../../models';
 import {CaseGroupByConfigurationComponent} from './components';
+import {CONDITIONS_HELPER_TEXTS} from '../shared';
 
 export const caseGroupByDataSourceSpecification: DataSourceSpecification = {
   dataSourceKey: 'case-group-by',
@@ -36,8 +37,7 @@ export const caseGroupByDataSourceSpecification: DataSourceSpecification = {
       operator: 'Operator',
       value: 'Wert',
       conditions: 'Bedingungen',
-      conditionsHelperText:
-        "Geben Sie optionale Bedingungen zum Abrufen der Gruppierung für den ausgewählten Falltyp an. Zum Beispiel: 'case:createdBy', 'Nicht gleichzusetzen mit', 'test@test.com'.",
+      conditionsHelperText: `Geben Sie optionale Bedingungen an, um die Gruppierung für den ausgewählten Falltyp abzurufen. ${CONDITIONS_HELPER_TEXTS.DE()}`,
       addCondition: 'Bedingung hinzufügen',
       enum: 'Anzeige der Werte',
       enumHelperText:
@@ -60,8 +60,7 @@ export const caseGroupByDataSourceSpecification: DataSourceSpecification = {
       operator: 'Operator',
       value: 'Value',
       conditions: 'Conditions',
-      conditionsHelperText:
-        "Specify optional conditions for retrieving the grouping for the selected case type. For example: 'case:createdBy', 'Not equal to', 'test@test.com'. To compare with empty values, '${null}' can be entered as a value. To compare with the current date, '${localDateTimeNow}' can be entered as a value. This also supports, for example, the following logic: '${localDateTimeNow.minusWeeks(2)}'.",
+      conditionsHelperText: `Specify optional conditions for retrieving the grouping for the selected case type. ${CONDITIONS_HELPER_TEXTS.EN()}`,
       addCondition: 'Add condition',
       enum: 'Display of values',
       enumHelperText:
@@ -84,8 +83,7 @@ export const caseGroupByDataSourceSpecification: DataSourceSpecification = {
       operator: 'Operator',
       value: 'Waarde',
       conditions: 'Condities',
-      conditionsHelperText:
-        "Geef optionele condities op voor het ophalen van de groepering voor het geselecteerde dossiertype. Bijvoorbeeld: 'case:createdBy', 'Niet gelijk aan', 'test@test.com'. Voor het vergelijken met lege waardes kan '${null}' ingevuld worden als waarde. Voor het vergelijken met de huidige datum kan '${localDateTimeNow}' ingevuld worden als waarde. Deze ondersteunt ook bijvoorbeeld de volgende logica: '${localDateTimeNow.minusWeeks(2)}'.",
+      conditionsHelperText: `Geef optionele condities op voor het ophalen van de groepering voor het geselecteerde dossiertype. ${CONDITIONS_HELPER_TEXTS.NL()}`,
       addCondition: 'Conditie toevoegen',
       enum: 'Weergave van waardes',
       enumHelperText:
diff --git a/projects/valtimo/dashboard/src/lib/data-sources/case-group-by/components/case-group-by-configuration/case-group-by-configuration.component.html b/projects/valtimo/dashboard/src/lib/data-sources/case-group-by/components/case-group-by-configuration/case-group-by-configuration.component.html
index f8d75bcd5..542229965 100644
--- a/projects/valtimo/dashboard/src/lib/data-sources/case-group-by/components/case-group-by-configuration/case-group-by-configuration.component.html
+++ b/projects/valtimo/dashboard/src/lib/data-sources/case-group-by/components/case-group-by-configuration/case-group-by-configuration.component.html
@@ -19,6 +19,7 @@
   *ngIf="{
     documentItems: documentItems$ | async,
     operatorItems: operatorItems$,
+    selectedDocumentDefinition: selectedDocumentDefinition$ | async,
     formValue: formValue$ | async,
   } as obs"
   [formGroup]="form"
@@ -41,11 +42,15 @@
     <cds-label
       [helperText]="'pathHelperText' | widgetTranslate: dataSourceKey | async"
       [invalidText]="'pathHelperText' | widgetTranslate: dataSourceKey | async"
-      [invalid]="path.dirty && path.invalid"
+      class="full-width"
     >
       {{ 'path' | widgetTranslate: dataSourceKey | async }}
 
-      <input cdsText formControlName="path" [invalid]="path.dirty && path.invalid" />
+      <valtimo-value-path-selector
+        formControlName="path"
+        [documentDefinitionName]="obs.selectedDocumentDefinition"
+        [prefixes]="[ValuePathSelectorPrefix.DOC, ValuePathSelectorPrefix.CASE]"
+      ></valtimo-value-path-selector>
     </cds-label>
   </div>
 
@@ -56,6 +61,7 @@
       >{{ 'conditions' | widgetTranslate: dataSourceKey | async }}</cds-label
     >
     <valtimo-carbon-multi-input
+      type="valuePathSelectorDropdownValue"
       [addRowText]="'addCondition' | widgetTranslate: dataSourceKey | async"
       [defaultValues]="obs.formValue?.queryConditions"
       [dropdownColumnTitle]="'operator' | widgetTranslate: dataSourceKey | async"
@@ -65,7 +71,10 @@
       [keyColumnTitle]="'path' | widgetTranslate: dataSourceKey | async"
       [minimumAmountOfRows]="0"
       [valueColumnTitle]="'value' | widgetTranslate: dataSourceKey | async"
-      type="keyDropdownValue"
+      valuePathSelectorNotation="dots"
+      [valuePathSelectorPrefixes]="[ValuePathSelectorPrefix.DOC, ValuePathSelectorPrefix.CASE]"
+      [valuePathSelectorShowDocumentDefinitionSelector]="false"
+      [valuePathSelectorDocumentDefinitionName]="obs.selectedDocumentDefinition"
       (valueChange)="conditionsValueChange($event)"
     ></valtimo-carbon-multi-input>
   </div>
diff --git a/projects/valtimo/dashboard/src/lib/data-sources/case-group-by/components/case-group-by-configuration/case-group-by-configuration.component.scss b/projects/valtimo/dashboard/src/lib/data-sources/case-group-by/components/case-group-by-configuration/case-group-by-configuration.component.scss
index 4d37232b2..923be3bfb 100644
--- a/projects/valtimo/dashboard/src/lib/data-sources/case-group-by/components/case-group-by-configuration/case-group-by-configuration.component.scss
+++ b/projects/valtimo/dashboard/src/lib/data-sources/case-group-by/components/case-group-by-configuration/case-group-by-configuration.component.scss
@@ -22,4 +22,11 @@
   .conditions-multi-input .cds--form__helper-text {
     font-style: italic;
   }
+
+  .full-width {
+    &,
+    .cds--label {
+      width: 100%;
+    }
+  }
 }
diff --git a/projects/valtimo/dashboard/src/lib/data-sources/case-group-by/components/case-group-by-configuration/case-group-by-configuration.component.ts b/projects/valtimo/dashboard/src/lib/data-sources/case-group-by/components/case-group-by-configuration/case-group-by-configuration.component.ts
index 101c2ed78..1d7cabb2b 100644
--- a/projects/valtimo/dashboard/src/lib/data-sources/case-group-by/components/case-group-by-configuration/case-group-by-configuration.component.ts
+++ b/projects/valtimo/dashboard/src/lib/data-sources/case-group-by/components/case-group-by-configuration/case-group-by-configuration.component.ts
@@ -44,7 +44,7 @@ import {
 } from '../../models';
 import {DocumentService} from '@valtimo/document';
 import {ListItem} from 'carbon-components-angular';
-import {ListItemWithId, MultiInputValues} from '@valtimo/components';
+import {ListItemWithId, MultiInputValues, ValuePathSelectorPrefix} from '@valtimo/components';
 import {TranslateService} from '@ngx-translate/core';
 import {WidgetTranslationService} from '../../../../services';
 import {isEqual} from 'lodash';
@@ -98,11 +98,11 @@ export class CaseGroupByConfigurationComponent
     }
   }
 
-  private readonly _selectedDocumentDefinition$ = new BehaviorSubject<string>('');
+  public readonly selectedDocumentDefinition$ = new BehaviorSubject<string>('');
 
   public readonly documentItems$: Observable<Array<ListItem>> = combineLatest([
     this.documentService.getAllDefinitions(),
-    this._selectedDocumentDefinition$,
+    this.selectedDocumentDefinition$,
   ]).pipe(
     map(([documentDefinitions, selectedDocumentDefintion]) =>
       documentDefinitions.content.map(definition => ({
@@ -153,6 +153,8 @@ export class CaseGroupByConfigurationComponent
     ConfigurationOutput<CaseGroupByConfiguration>
   >();
 
+  public readonly ValuePathSelectorPrefix = ValuePathSelectorPrefix;
+
   private _subscriptions = new Subscription();
 
   constructor(
@@ -171,12 +173,14 @@ export class CaseGroupByConfigurationComponent
   }
 
   public documentDefinitionSelected(documentDefinitionItem: ListItem): void {
-    if (!documentDefinitionItem) {
+    const documentDefinitionName = documentDefinitionItem?.item?.content;
+
+    if (!documentDefinitionName) {
       return;
     }
 
-    this._selectedDocumentDefinition$.next(documentDefinitionItem?.item?.content);
-    this.documentDefinition.setValue(documentDefinitionItem?.item?.content);
+    this.selectedDocumentDefinition$.next(documentDefinitionName);
+    this.documentDefinition.setValue(documentDefinitionName);
   }
 
   public conditionsValueChange(values: MultiInputValues): void {
diff --git a/projects/valtimo/dashboard/src/lib/data-sources/data-sources.module.ts b/projects/valtimo/dashboard/src/lib/data-sources/data-sources.module.ts
index 08548c6aa..29162a2fc 100644
--- a/projects/valtimo/dashboard/src/lib/data-sources/data-sources.module.ts
+++ b/projects/valtimo/dashboard/src/lib/data-sources/data-sources.module.ts
@@ -2,8 +2,14 @@ import {NgModule} from '@angular/core';
 import {CaseCountDataSourceModule} from './case-count';
 import {CaseCountsDataSourceModule} from './case-counts';
 import {CaseGroupByDataSourceModule} from './case-group-by';
+import {TaskCountDataSourceModule} from './task-count';
 
 @NgModule({
-  imports: [CaseCountDataSourceModule, CaseCountsDataSourceModule, CaseGroupByDataSourceModule],
+  imports: [
+    CaseCountDataSourceModule,
+    CaseCountsDataSourceModule,
+    CaseGroupByDataSourceModule,
+    TaskCountDataSourceModule,
+  ],
 })
 export class DataSourcesModule {}
diff --git a/projects/valtimo/dashboard/src/lib/data-sources/index.ts b/projects/valtimo/dashboard/src/lib/data-sources/index.ts
index b60338af3..504aa3617 100644
--- a/projects/valtimo/dashboard/src/lib/data-sources/index.ts
+++ b/projects/valtimo/dashboard/src/lib/data-sources/index.ts
@@ -17,3 +17,4 @@
 export * from './case-count';
 export * from './case-counts';
 export * from './case-group-by';
+export * from './task-count';
diff --git a/projects/valtimo/dashboard/src/lib/data-sources/shared/conditions.ts b/projects/valtimo/dashboard/src/lib/data-sources/shared/conditions.ts
new file mode 100644
index 000000000..6647b0a61
--- /dev/null
+++ b/projects/valtimo/dashboard/src/lib/data-sources/shared/conditions.ts
@@ -0,0 +1,26 @@
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const CONDITIONS_HELPER_TEXTS = {
+  DE: (example = 'case:createdBy') =>
+    `Zum Beispiel: ‘${example}’, ‘Not equal to’, ‘test@test.com’. Um mit leeren Werten zu vergleichen, kann ‘\${null}’ als Wert verwendet werden. Um mit dem aktuellen Datum zu vergleichen, kann ‘\${localDateTimeNow}’ als Wert verwendet werden. Zusätzlich wird Logik wie ‘\${localDateTimeNow.minusWeeks(2)}’ unterstützt. Die Platzhalter ‘\${currentUserId}’, ‘\${currentUserEmail}’ und ‘\${currentUserIdentifier}’ ermöglichen die Anzeige personalisierter Informationen für den aktuellen Dashboard-Benutzer.`,
+  NL: (example = 'case:createdBy') =>
+    `Bijvoorbeeld: ‘${example}’, ‘Not equal to’, ‘test@test.com’. Om te vergelijken met lege waarden, kun je ‘\${null}’ gebruiken als waarde. Om te vergelijken met de huidige datum, gebruik je ‘\${localDateTimeNow}’ als waarde. Hier wordt logica zoals ‘\${localDateTimeNow.minusWeeks(2)}’ ondersteund. De placeholders ‘\${currentUserId}’, ‘\${currentUserEmail}’ en ‘\${currentUserIdentifier}’ maken het mogelijk om gepersonaliseerde informatie weer te geven voor de huidige dashboardgebruiker.`,
+  EN: (example = 'case:createdBy') =>
+    `For example: '${example}', 'Not equal to', 'test@test.com'. To compare against empty values, you can use '\${null}' as a value. To compare with the current date, use '\${localDateTimeNow}' as a value. Additionally, logic such as '\${localDateTimeNow.minusWeeks(2)}' is supported. The placeholders '\${currentUserId}', '\${currentUserEmail}', and '\${currentUserIdentifier}' enable the display of personalized information for the current dashboard user.`,
+};
+
+export {CONDITIONS_HELPER_TEXTS};
diff --git a/projects/valtimo/dashboard/src/lib/data-sources/shared/index.ts b/projects/valtimo/dashboard/src/lib/data-sources/shared/index.ts
new file mode 100644
index 000000000..4a52da05d
--- /dev/null
+++ b/projects/valtimo/dashboard/src/lib/data-sources/shared/index.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export * from './conditions';
diff --git a/projects/valtimo/dashboard/src/lib/data-sources/task-count/components/index.ts b/projects/valtimo/dashboard/src/lib/data-sources/task-count/components/index.ts
new file mode 100644
index 000000000..a1940c8f9
--- /dev/null
+++ b/projects/valtimo/dashboard/src/lib/data-sources/task-count/components/index.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export * from './task-count-configuration';
diff --git a/projects/valtimo/dashboard/src/lib/data-sources/task-count/components/task-count-configuration/index.ts b/projects/valtimo/dashboard/src/lib/data-sources/task-count/components/task-count-configuration/index.ts
new file mode 100644
index 000000000..c5052325b
--- /dev/null
+++ b/projects/valtimo/dashboard/src/lib/data-sources/task-count/components/task-count-configuration/index.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export * from './task-count-configuration.component';
diff --git a/projects/valtimo/dashboard/src/lib/data-sources/task-count/components/task-count-configuration/task-count-configuration.component.html b/projects/valtimo/dashboard/src/lib/data-sources/task-count/components/task-count-configuration/task-count-configuration.component.html
new file mode 100644
index 000000000..4319249c6
--- /dev/null
+++ b/projects/valtimo/dashboard/src/lib/data-sources/task-count/components/task-count-configuration/task-count-configuration.component.html
@@ -0,0 +1,43 @@
+<!--
+  ~ Copyright 2015-2024 Ritense BV, the Netherlands.
+  ~
+  ~ Licensed under EUPL, Version 1.2 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" basis,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+
+<form
+  class="task-count-configuration-form"
+  *ngIf="{operatorItems: operatorItems$} as obs"
+  [formGroup]="form"
+>
+  <div class="form__element conditions-multi-input">
+    <cds-label
+      [helperText]="'conditionsHelperText' | widgetTranslate: dataSourceKey | async"
+      class="conditions-label"
+      >{{ 'conditions' | widgetTranslate: dataSourceKey | async }}</cds-label
+    >
+    <valtimo-carbon-multi-input
+      [addRowText]="'addCondition' | widgetTranslate: dataSourceKey | async"
+      [defaultValues]="defaultConditionValues$ | async"
+      [dropdownColumnTitle]="'operator' | widgetTranslate: dataSourceKey | async"
+      [dropdownItems]="operatorItems$ | async"
+      [fullWidth]="true"
+      [initialAmountOfRows]="0"
+      [keyColumnTitle]="'path' | widgetTranslate: dataSourceKey | async"
+      [minimumAmountOfRows]="0"
+      [valueColumnTitle]="'value' | widgetTranslate: dataSourceKey | async"
+      type="keyDropdownValue"
+      (allValuesValidEvent)="onAllConditionsValid($event)"
+      (valueChange)="conditionsValueChange($event)"
+    ></valtimo-carbon-multi-input>
+  </div>
+</form>
diff --git a/projects/valtimo/dashboard/src/lib/data-sources/task-count/components/task-count-configuration/task-count-configuration.component.scss b/projects/valtimo/dashboard/src/lib/data-sources/task-count/components/task-count-configuration/task-count-configuration.component.scss
new file mode 100644
index 000000000..0effe6459
--- /dev/null
+++ b/projects/valtimo/dashboard/src/lib/data-sources/task-count/components/task-count-configuration/task-count-configuration.component.scss
@@ -0,0 +1,25 @@
+/*!
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+::ng-deep .task-count-configuration-form {
+  .conditions-label {
+    margin-bottom: 16px;
+  }
+
+  .conditions-multi-input .cds--form__helper-text {
+    font-style: italic;
+  }
+}
diff --git a/projects/valtimo/dashboard/src/lib/data-sources/task-count/components/task-count-configuration/task-count-configuration.component.ts b/projects/valtimo/dashboard/src/lib/data-sources/task-count/components/task-count-configuration/task-count-configuration.component.ts
new file mode 100644
index 000000000..d08bd9040
--- /dev/null
+++ b/projects/valtimo/dashboard/src/lib/data-sources/task-count/components/task-count-configuration/task-count-configuration.component.ts
@@ -0,0 +1,152 @@
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  OnDestroy,
+  OnInit,
+  Output,
+} from '@angular/core';
+import {
+  ConfigurationOutput,
+  DataSourceConfigurationComponent,
+  Operator,
+  QueryCondition,
+} from '../../../../models';
+import {BehaviorSubject, combineLatest, map, Observable, startWith, Subscription} from 'rxjs';
+import {AbstractControl, FormBuilder} from '@angular/forms';
+import {TaskCountConfiguration} from '../../models';
+import {ListItemWithId, MultiInputKeyValue, MultiInputValues} from '@valtimo/components';
+import {TranslateService} from '@ngx-translate/core';
+import {WidgetTranslationService} from '../../../../services';
+
+@Component({
+  templateUrl: './task-count-configuration.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  styleUrls: ['./task-count-configuration.component.scss'],
+})
+export class TaskCountConfigurationComponent
+  implements OnInit, OnDestroy, DataSourceConfigurationComponent
+{
+  @Input() public dataSourceKey: string;
+
+  public readonly form = this.fb.group({
+    queryConditions: this.fb.control(null),
+  });
+
+  @Input() public set disabled(disabledValue: boolean) {
+    if (disabledValue) {
+      this.form.disable();
+    } else {
+      this.form.enable();
+    }
+  }
+
+  private readonly _OPERATORS: Array<Operator> = [
+    Operator.NOT_EQUAL_TO,
+    Operator.EQUAL_TO,
+    Operator.GREATER_THAN,
+    Operator.GREATER_THAN_OR_EQUAL_TO,
+    Operator.LESS_THAN,
+    Operator.LESS_THAN_OR_EQUAL_TO,
+  ];
+
+  public readonly operatorItems$: Observable<Array<ListItemWithId>> = this.translateService
+    .stream('key')
+    .pipe(
+      map(() =>
+        this._OPERATORS.map(operator => ({
+          id: operator,
+          content: this.widgetTranslationService.instant(operator, this.dataSourceKey),
+          selected: false,
+        }))
+      )
+    );
+
+  public readonly defaultConditionValues$ = new BehaviorSubject<MultiInputValues | null>(null);
+  public readonly allConditionsValid$ = new BehaviorSubject<boolean>(true);
+
+  public get queryConditions(): AbstractControl<QueryCondition[]> {
+    return this.form.get('queryConditions');
+  }
+
+  @Input() set prefillConfiguration(configurationValue: TaskCountConfiguration) {
+    if (configurationValue) {
+      this.defaultConditionValues$.next(
+        configurationValue.queryConditions.map(condition => ({
+          key: condition.queryPath,
+          dropdown: condition.queryOperator,
+          value: condition.queryValue,
+        }))
+      );
+    }
+  }
+
+  @Output() public configurationEvent = new EventEmitter<
+    ConfigurationOutput<TaskCountConfiguration>
+  >();
+
+  private readonly _subscriptions = new Subscription();
+
+  constructor(
+    private readonly fb: FormBuilder,
+    private readonly translateService: TranslateService,
+    private readonly widgetTranslationService: WidgetTranslationService
+  ) {}
+
+  public ngOnInit(): void {
+    this.openFormSubscription();
+  }
+
+  public ngOnDestroy(): void {
+    this._subscriptions.unsubscribe();
+  }
+
+  public conditionsValueChange(values: Array<MultiInputKeyValue>): void {
+    if (values.length === 0) {
+      this.queryConditions.setValue(null);
+    } else {
+      this.queryConditions.setValue(
+        values.map(value => ({
+          queryPath: value.key,
+          queryOperator: value.dropdown,
+          queryValue: value.value,
+        }))
+      );
+    }
+  }
+
+  public onAllConditionsValid(allConditionsValid: boolean): void {
+    this.allConditionsValid$.next(allConditionsValid);
+  }
+
+  private openFormSubscription(): void {
+    this._subscriptions.add(
+      combineLatest([
+        this.form.valueChanges.pipe(startWith(this.form.value)),
+        this.allConditionsValid$,
+      ]).subscribe(([formValue, allConditionsValid]) => {
+        this.configurationEvent.emit({
+          valid: this.form.valid && allConditionsValid,
+          data: formValue as TaskCountConfiguration,
+        });
+      })
+    );
+  }
+}
diff --git a/projects/valtimo/dashboard/src/lib/data-sources/task-count/index.ts b/projects/valtimo/dashboard/src/lib/data-sources/task-count/index.ts
new file mode 100644
index 000000000..25bc7cb18
--- /dev/null
+++ b/projects/valtimo/dashboard/src/lib/data-sources/task-count/index.ts
@@ -0,0 +1,20 @@
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export * from './components';
+export * from './models';
+export * from './task-count.module';
+export * from './task-count.specification';
diff --git a/projects/valtimo/dashboard/src/lib/data-sources/task-count/models/index.ts b/projects/valtimo/dashboard/src/lib/data-sources/task-count/models/index.ts
new file mode 100644
index 000000000..176e027c4
--- /dev/null
+++ b/projects/valtimo/dashboard/src/lib/data-sources/task-count/models/index.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export * from './task-count.model';
diff --git a/projects/valtimo/dashboard/src/lib/data-sources/task-count/models/task-count.model.ts b/projects/valtimo/dashboard/src/lib/data-sources/task-count/models/task-count.model.ts
new file mode 100644
index 000000000..d6c8c58d6
--- /dev/null
+++ b/projects/valtimo/dashboard/src/lib/data-sources/task-count/models/task-count.model.ts
@@ -0,0 +1,23 @@
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {QueryCondition} from '../../../models';
+
+interface TaskCountConfiguration {
+  queryConditions: QueryCondition[];
+}
+
+export {TaskCountConfiguration};
diff --git a/projects/valtimo/dashboard/src/lib/data-sources/task-count/task-count.module.ts b/projects/valtimo/dashboard/src/lib/data-sources/task-count/task-count.module.ts
new file mode 100644
index 000000000..1562c4280
--- /dev/null
+++ b/projects/valtimo/dashboard/src/lib/data-sources/task-count/task-count.module.ts
@@ -0,0 +1,40 @@
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {DATA_SOURCE_TOKEN} from '../../constants';
+import {taskCountSpecification} from './task-count.specification';
+import {TaskCountConfigurationComponent} from './components';
+import {ReactiveFormsModule} from '@angular/forms';
+import {WidgetTranslatePipeModule} from '../../pipes';
+import {DropdownModule, InputModule} from 'carbon-components-angular';
+import {CarbonMultiInputModule} from '@valtimo/components';
+
+@NgModule({
+  declarations: [TaskCountConfigurationComponent],
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    WidgetTranslatePipeModule,
+    InputModule,
+    DropdownModule,
+    CarbonMultiInputModule,
+  ],
+  exports: [TaskCountConfigurationComponent],
+  providers: [{provide: DATA_SOURCE_TOKEN, useValue: taskCountSpecification, multi: true}],
+})
+export class TaskCountDataSourceModule {}
diff --git a/projects/valtimo/dashboard/src/lib/data-sources/task-count/task-count.specification.ts b/projects/valtimo/dashboard/src/lib/data-sources/task-count/task-count.specification.ts
new file mode 100644
index 000000000..ae06eed5c
--- /dev/null
+++ b/projects/valtimo/dashboard/src/lib/data-sources/task-count/task-count.specification.ts
@@ -0,0 +1,71 @@
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {DataSourceSpecification} from '../../models';
+import {CONDITIONS_HELPER_TEXTS} from '../shared';
+import {TaskCountConfigurationComponent} from './components';
+
+export const taskCountSpecification: DataSourceSpecification = {
+  dataSourceKey: 'task-count',
+  configurationComponent: TaskCountConfigurationComponent,
+  translations: {
+    de: {
+      title: 'Aufgabenanzahl',
+      '!=': 'Nicht gleichzusetzen mit',
+      '==': 'Gleich',
+      '>': 'Größer als',
+      '>=': 'Größer als oder gleich wie',
+      '<': 'Weniger als',
+      '<=': 'Gleich oder kleiner als',
+      path: 'Pfad',
+      operator: 'Operator',
+      value: 'Wert',
+      conditions: 'Bedingungen',
+      conditionsHelperText: `Geben Sie optionale Bedingungen zum Abrufen der Anzahl der Aufgaben. ${CONDITIONS_HELPER_TEXTS.DE('task:assignee')}`,
+      addCondition: 'Bedingung hinzufügen',
+    },
+    en: {
+      title: 'Task count',
+      '!=': 'Not equal to',
+      '==': 'Equal to',
+      '>': 'Greater than',
+      '>=': 'Greater than or equal to',
+      '<': 'Less than',
+      '<=': 'Less than or equal to',
+      path: 'Path (required)',
+      operator: 'Operator',
+      value: 'Value',
+      conditions: 'Conditions',
+      conditionsHelperText: `Specify optional conditions for retrieving the number of tasks. ${CONDITIONS_HELPER_TEXTS.EN('task:assignee')}`,
+      addCondition: 'Add condition',
+    },
+    nl: {
+      title: 'Aantal taken',
+      '!=': 'Niet gelijk aan',
+      '==': 'Gelijk aan',
+      '>': 'Groter dan',
+      '>=': 'Groter dan of gelijk aan',
+      '<': 'Minder dan',
+      '<=': 'Minder dan of gelijk aan',
+      path: 'Pad',
+      operator: 'Operator',
+      value: 'Waarde',
+      conditions: 'Condities',
+      conditionsHelperText: `Geef optionele condities op voor het ophalen van het aantal taken. ${CONDITIONS_HELPER_TEXTS.NL('task:assignee')}}`,
+      addCondition: 'Conditie toevoegen',
+    },
+  },
+};
diff --git a/projects/valtimo/dossier-management/src/lib/components/dossier-management-widget-configurators/collection/dossier-management-widget-collection.component.html b/projects/valtimo/dossier-management/src/lib/components/dossier-management-widget-configurators/collection/dossier-management-widget-collection.component.html
index 0947ce1eb..ab4bf3afe 100644
--- a/projects/valtimo/dossier-management/src/lib/components/dossier-management-widget-configurators/collection/dossier-management-widget-collection.component.html
+++ b/projects/valtimo/dossier-management/src/lib/components/dossier-management-widget-configurators/collection/dossier-management-widget-collection.component.html
@@ -48,20 +48,23 @@
       />
     </cds-text-label>
 
-    <cds-text-label [attr.data-carbon-theme]="obs.theme">
+    <div class="valtimo-dossier-management-widget-collection__path-selector">
       <v-input-label
         [title]="'widgetTabManagement.content.collection.collection' | translate"
         [tooltip]="'widgetTabManagement.content.collection.collectionTooltip' | translate"
       >
       </v-input-label>
 
-      <input
+      <valtimo-value-path-selector
         formControlName="collection"
-        cdsText
-        [placeholder]="'widgetTabManagement.content.collection.collectionPlaceholder' | translate"
-        type="text"
-      />
-    </cds-text-label>
+        name="cardCollection"
+        [attr.data-carbon-theme]="obs.theme"
+        [documentDefinitionName]="documentDefinitionName$ | async"
+        [prefixes]="[ValuePathSelectorPrefix.DOC, ValuePathSelectorPrefix.CASE]"
+        [valueType]="ValueResolverOptionType.COLLECTION"
+        (collectionPathSelected)="onCollectionPathSelected($event)"
+      ></valtimo-value-path-selector>
+    </div>
   </form>
 
   <span class="valtimo-dossier-management-widget-collection__subtitle">
@@ -70,20 +73,21 @@
 
   <form [formGroup]="cardForm" class="valtimo-dossier-management-widget-collection__card">
     <section class="valtimo-dossier-management-widget-collection__card-title">
-      <cds-text-label>
+      <div class="valtimo-dossier-management-widget-collection__path-selector">
         <v-input-label
           [title]="'widgetTabManagement.content.fields.value' | translate"
           [tooltip]="'widgetTabManagement.content.collection.valueTooltip' | translate"
         ></v-input-label>
 
-        <input
-          cdsText
-          [attr.data-carbon-theme]="obs.theme"
-          [placeholder]="'widgetTabManagement.content.fields.valuePlaceholder' | translate"
-          type="text"
+        <valtimo-value-path-selector
           formControlName="value"
-        />
-      </cds-text-label>
+          name="cardTitle"
+          [attr.data-carbon-theme]="obs.theme"
+          [documentDefinitionName]="documentDefinitionName$ | async"
+          [prefixes]="[ValuePathSelectorPrefix.DOC, ValuePathSelectorPrefix.CASE]"
+          [selectedCollectionPath]="selectedCollectionPath$ | async"
+        ></valtimo-value-path-selector>
+      </div>
 
       <cds-dropdown
         [attr.data-carbon-theme]="obs.theme"
@@ -306,6 +310,8 @@
   <valtimo-dossier-management-widget-fields-column
     [columnData]="content()?.fields"
     [fieldWidthDropdown]="fieldWidthDropdown"
+    [documentDefinitionName]="documentDefinitionName$ | async"
+    [selectedCollectionPath]="selectedCollectionPath$ | async"
     (columnUpdateEvent)="onColumnUpdateEvent($event)"
   >
   </valtimo-dossier-management-widget-fields-column>
diff --git a/projects/valtimo/dossier-management/src/lib/components/dossier-management-widget-configurators/collection/dossier-management-widget-collection.component.scss b/projects/valtimo/dossier-management/src/lib/components/dossier-management-widget-configurators/collection/dossier-management-widget-collection.component.scss
index 7b9af4180..a0ad2e2bf 100644
--- a/projects/valtimo/dossier-management/src/lib/components/dossier-management-widget-configurators/collection/dossier-management-widget-collection.component.scss
+++ b/projects/valtimo/dossier-management/src/lib/components/dossier-management-widget-configurators/collection/dossier-management-widget-collection.component.scss
@@ -20,8 +20,10 @@
   gap: 24px;
 
   &__form {
-    display: flex;
+    display: grid;
     gap: 16px;
+    grid-template-columns: repeat(3, 1fr);
+    align-items: flex-end;
   }
 
   &__subtitle {
@@ -30,6 +32,11 @@
     line-height: 22px;
   }
 
+  &__path-selector {
+    display: flex;
+    flex-direction: column;
+  }
+
   &__card {
     flex-direction: column;
     display: flex;
diff --git a/projects/valtimo/dossier-management/src/lib/components/dossier-management-widget-configurators/collection/dossier-management-widget-collection.component.ts b/projects/valtimo/dossier-management/src/lib/components/dossier-management-widget-configurators/collection/dossier-management-widget-collection.component.ts
index 04f2f702d..a21caf11c 100644
--- a/projects/valtimo/dossier-management/src/lib/components/dossier-management-widget-configurators/collection/dossier-management-widget-collection.component.ts
+++ b/projects/valtimo/dossier-management/src/lib/components/dossier-management-widget-configurators/collection/dossier-management-widget-collection.component.ts
@@ -40,6 +40,10 @@ import {
   CdsThemeService,
   CurrentCarbonTheme,
   InputLabelModule,
+  ValueCollectionPath,
+  ValuePathSelectorComponent,
+  ValuePathSelectorPrefix,
+  ValueResolverOptionType,
 } from '@valtimo/components';
 import {
   CaseWidgetCurrencyDisplayType,
@@ -59,11 +63,12 @@ import {
   InputModule,
   ListItem,
 } from 'carbon-components-angular';
-import {debounceTime, map, Observable, Subscription} from 'rxjs';
+import {BehaviorSubject, debounceTime, map, Observable, Subscription} from 'rxjs';
 
 import {WidgetContentComponent} from '../../../models';
 import {WidgetFieldsService, WidgetWizardService} from '../../../services';
 import {DossierManagementWidgetFieldsColumnComponent} from '../fields/column/dossier-management-widget-fields-column.component';
+import {ActivatedRoute, ParamMap} from '@angular/router';
 
 @Component({
   templateUrl: './dossier-management-widget-collection.component.html',
@@ -81,6 +86,7 @@ import {DossierManagementWidgetFieldsColumnComponent} from '../fields/column/dos
     ButtonModule,
     IconModule,
     InputLabelModule,
+    ValuePathSelectorComponent,
   ],
 })
 export class DossierManagementWidgetCollectionComponent
@@ -128,10 +134,17 @@ export class DossierManagementWidgetCollectionComponent
     )
   );
 
+  public readonly selectedCollectionPath$ = new BehaviorSubject<ValueCollectionPath | null>(null);
   public readonly CaseWidgetDisplayTypeKey = CaseWidgetDisplayTypeKey;
   public readonly content = this.widgetWizardService
     .widgetContent as WritableSignal<WidgetCollectionContent>;
   public readonly displayTypeItems: ListItem[] = this.widgetFieldsService.displayTypeItems;
+  public readonly ValuePathSelectorPrefix = ValuePathSelectorPrefix;
+  public readonly ValueResolverOptionType = ValueResolverOptionType;
+
+  public readonly documentDefinitionName$: Observable<string> = this.route.paramMap.pipe(
+    map((paramMap: ParamMap) => paramMap.get('name') ?? '')
+  );
 
   public WIDTH_ITEMS: ListItem[] = [
     {
@@ -152,6 +165,7 @@ export class DossierManagementWidgetCollectionComponent
   constructor(
     private readonly cdsThemeService: CdsThemeService,
     private readonly fb: FormBuilder,
+    private readonly route: ActivatedRoute,
     private readonly translateService: TranslateService,
     private readonly widgetWizardService: WidgetWizardService,
     private readonly widgetFieldsService: WidgetFieldsService
@@ -232,6 +246,10 @@ export class DossierManagementWidgetCollectionComponent
     );
   }
 
+  public onCollectionPathSelected(collectionPath: ValueCollectionPath): void {
+    this.selectedCollectionPath$.next(collectionPath);
+  }
+
   private initForm(): void {
     if (!this.widgetWizardService.widgetContent()) return;
 
diff --git a/projects/valtimo/dossier-management/src/lib/components/dossier-management-widget-configurators/fields/column/dossier-management-widget-fields-column.component.html b/projects/valtimo/dossier-management/src/lib/components/dossier-management-widget-configurators/fields/column/dossier-management-widget-fields-column.component.html
index e8456feb3..c9c6d0c2c 100644
--- a/projects/valtimo/dossier-management/src/lib/components/dossier-management-widget-configurators/fields/column/dossier-management-widget-fields-column.component.html
+++ b/projects/valtimo/dossier-management/src/lib/components/dossier-management-widget-configurators/fields/column/dossier-management-widget-fields-column.component.html
@@ -54,24 +54,6 @@
               />
             </cds-text-label>
 
-            <cds-text-label>
-              <v-input-label
-                [title]="'widgetTabManagement.content.fields.value' | translate"
-                [tooltip]="
-                  'widgetTabManagement.content.' + widgetType() + '.valueTooltip' | translate
-                "
-              >
-              </v-input-label>
-
-              <input
-                cdsText
-                [attr.data-carbon-theme]="inputTheme"
-                [placeholder]="'widgetTabManagement.content.fields.valuePlaceholder' | translate"
-                type="text"
-                formControlName="content"
-              />
-            </cds-text-label>
-
             <cds-dropdown
               [attr.data-carbon-theme]="inputTheme"
               [label]="'widgetTabManagement.content.fields.type' | translate"
@@ -86,6 +68,43 @@
             <ng-container
               *ngTemplateOutlet="fieldWidthDropdown; context: {index: $index}"
             ></ng-container>
+
+            @if (!documentDefinitionName) {
+              <cds-text-label>
+                <v-input-label
+                  [title]="'widgetTabManagement.content.fields.value' | translate"
+                  [tooltip]="
+                    'widgetTabManagement.content.' + widgetType() + '.valueTooltip' | translate
+                  "
+                >
+                </v-input-label>
+
+                <input
+                  cdsText
+                  [attr.data-carbon-theme]="inputTheme"
+                  [placeholder]="'widgetTabManagement.content.fields.valuePlaceholder' | translate"
+                  type="text"
+                  formControlName="content"
+                />
+              </cds-text-label>
+            } @else {
+              <div class="valtimo-dossier-management-widget-field-column__path-selector">
+                <v-input-label
+                  [title]="'widgetTabManagement.content.fields.value' | translate"
+                  [tooltip]="
+                    'widgetTabManagement.content.' + widgetType() + '.valueTooltip' | translate
+                  "
+                >
+                </v-input-label>
+
+                <valtimo-value-path-selector
+                  formControlName="content"
+                  [documentDefinitionName]="documentDefinitionName"
+                  [prefixes]="[ValuePathSelectorPrefix.DOC, ValuePathSelectorPrefix.CASE]"
+                  [selectedCollectionPath]="selectedCollectionPath"
+                ></valtimo-value-path-selector>
+              </div>
+            }
           </div>
 
           <div class="valtimo-dossier-management-widget-field-column__options">
@@ -306,6 +325,30 @@
                 </cds-text-label>
               }
             }
+
+            <cds-text-label
+              *ngIf="
+                formRow.get('type').value.id === CaseWidgetDisplayTypeKey.TEXT && isFieldWidget()
+              "
+            >
+              <v-input-label
+                [title]="'widgetTabManagement.content.fields.ellipsisCharacterLimit' | translate"
+                tooltip="{{
+                  'widgetTabManagement.content.fields.ellipsisCharacterLimitTooltip' | translate
+                }}"
+              >
+              </v-input-label>
+
+              <input
+                cdsText
+                [attr.data-carbon-theme]="inputTheme"
+                [placeholder]="
+                  'widgetTabManagement.content.fields.ellipsisCharacterLimitPlaceholder' | translate
+                "
+                type="text"
+                formControlName="ellipsisCharacterLimit"
+              />
+            </cds-text-label>
           </div>
         </form>
       </cds-accordion-item>
diff --git a/projects/valtimo/dossier-management/src/lib/components/dossier-management-widget-configurators/fields/column/dossier-management-widget-fields-column.component.scss b/projects/valtimo/dossier-management/src/lib/components/dossier-management-widget-configurators/fields/column/dossier-management-widget-fields-column.component.scss
index 661c0eed7..ac11e498e 100644
--- a/projects/valtimo/dossier-management/src/lib/components/dossier-management-widget-configurators/fields/column/dossier-management-widget-fields-column.component.scss
+++ b/projects/valtimo/dossier-management/src/lib/components/dossier-management-widget-configurators/fields/column/dossier-management-widget-fields-column.component.scss
@@ -35,12 +35,12 @@
 
   &__content {
     display: grid;
-    grid-template-columns: 1fr 1fr 180px;
+    grid-template-columns: 1fr 180px 1fr;
     align-items: flex-end;
     gap: 16px;
 
     &--collection {
-      grid-template-columns: 1fr 1fr 180px 180px;
+      grid-template-columns: 1fr 180px 180px 1fr;
     }
   }
 
@@ -64,6 +64,11 @@
     }
   }
 
+  &__path-selector {
+    display: flex;
+    flex-direction: column;
+  }
+
   &__options {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
diff --git a/projects/valtimo/dossier-management/src/lib/components/dossier-management-widget-configurators/fields/column/dossier-management-widget-fields-column.component.ts b/projects/valtimo/dossier-management/src/lib/components/dossier-management-widget-configurators/fields/column/dossier-management-widget-fields-column.component.ts
index 5e4522520..0b54baf38 100644
--- a/projects/valtimo/dossier-management/src/lib/components/dossier-management-widget-configurators/fields/column/dossier-management-widget-fields-column.component.ts
+++ b/projects/valtimo/dossier-management/src/lib/components/dossier-management-widget-configurators/fields/column/dossier-management-widget-fields-column.component.ts
@@ -39,7 +39,14 @@ import {
 } from '@angular/forms';
 import {TrashCan16} from '@carbon/icons';
 import {TranslateModule, TranslateService} from '@ngx-translate/core';
-import {CdsThemeService, CurrentCarbonTheme, InputLabelModule} from '@valtimo/components';
+import {
+  CdsThemeService,
+  CurrentCarbonTheme,
+  InputLabelModule,
+  ValueCollectionPath,
+  ValuePathSelectorComponent,
+  ValuePathSelectorPrefix,
+} from '@valtimo/components';
 import {
   CaseWidgetCurrencyDisplayType,
   CaseWidgetDateDisplayType,
@@ -47,6 +54,7 @@ import {
   CaseWidgetDisplayTypeKey,
   CaseWidgetEnumDisplayType,
   CaseWidgetNumberDisplayType,
+  CaseWidgetTextDisplayType,
   CaseWidgetType,
   FieldsCaseWidgetValue,
 } from '@valtimo/dossier';
@@ -80,13 +88,16 @@ import {WidgetFieldsService, WidgetWizardService} from '../../../../services';
     IconModule,
     AccordionModule,
     InputLabelModule,
+    ValuePathSelectorComponent,
   ],
 })
 export class DossierManagementWidgetFieldsColumnComponent implements OnInit, OnDestroy {
   @HostBinding('class') public readonly class = 'valtimo-dossier-management-widget-field-column';
   @Input({required: true}) public columnData: FieldsCaseWidgetValue[];
   @Input() public addTranslateKey = 'widgetTabManagement.content.fields.add';
+  @Input() public documentDefinitionName?: string | null = null;
   @Input() public fieldWidthDropdown?: TemplateRef<Dropdown>;
+  @Input() public selectedCollectionPath?: ValueCollectionPath | null;
 
   @Output() public columnUpdateEvent = new EventEmitter<{
     data: FieldsCaseWidgetValue[];
@@ -104,6 +115,7 @@ export class DossierManagementWidgetFieldsColumnComponent implements OnInit, OnD
   }
 
   public displayTypeItems: ListItem[] = this.widgetFieldsService.displayTypeItems;
+  public readonly ValuePathSelectorPrefix = ValuePathSelectorPrefix;
 
   public getDisplayItemsSelected(row: AbstractControl): ListItem[] {
     return this.widgetFieldsService.getDisplayItemsSelected(row);
@@ -113,6 +125,9 @@ export class DossierManagementWidgetFieldsColumnComponent implements OnInit, OnD
   public readonly widgetType: Signal<CaseWidgetType> = computed(
     () => this.widgetWizardService.selectedWidget()?.type ?? CaseWidgetType.FIELDS
   );
+  public readonly isFieldWidget: Signal<boolean> = computed(
+    () => this.widgetType() === CaseWidgetType.FIELDS
+  );
 
   public readonly inputTheme$: Observable<CurrentCarbonTheme> = this.cdsThemeService.currentTheme$;
 
@@ -151,6 +166,10 @@ export class DossierManagementWidgetFieldsColumnComponent implements OnInit, OnD
         ]),
         title: this.fb.control<string>('', Validators.required),
         content: this.fb.control<string>('', Validators.required),
+        ellipsisCharacterLimit: this.fb.control<number | null>(
+          null,
+          Validators.pattern('[1-9][0-9]*')
+        ),
       })
     );
   }
@@ -198,6 +217,13 @@ export class DossierManagementWidgetFieldsColumnComponent implements OnInit, OnD
       ),
       title: this.fb.control<string>(row.title, Validators.required),
       content: this.fb.control<string>(row.value, Validators.required),
+      ...((!row.displayProperties ||
+        row.displayProperties?.type === CaseWidgetDisplayTypeKey.TEXT) && {
+        ellipsisCharacterLimit: this.fb.control<number | null>(
+          (row.displayProperties as CaseWidgetTextDisplayType)?.ellipsisCharacterLimit ?? null,
+          Validators.pattern('[1-9][0-9]*')
+        ),
+      }),
       ...([CaseWidgetDisplayTypeKey.NUMBER, CaseWidgetDisplayTypeKey.PERCENT].includes(
         row.displayProperties?.type as CaseWidgetDisplayTypeKey
       ) && {
@@ -264,19 +290,21 @@ export class DossierManagementWidgetFieldsColumnComponent implements OnInit, OnD
           key: row.title.replace(/\W+/g, '-').replace(/\-$/, '').toLowerCase(),
           title: row.title,
           value: row.content,
-          ...(!!row?.type.id &&
-            row?.type.id !== CaseWidgetDisplayTypeKey.TEXT && {
-              displayProperties: {
-                type: row.type.id,
-                ...(!!row?.currencyCode && {currencyCode: row.currencyCode}),
-                ...(!!row?.display && {display: row.display}),
-                ...(!!row?.digitsInfo && {digitsInfo: row.digitsInfo}),
-                ...(!!row?.format && {format: row.format}),
-                ...(!!row?.values && {
-                  values: row.values?.reduce((acc, curr) => ({...acc, [curr.key]: curr.value}), {}),
-                }),
-              },
-            }),
+          ...(!!row?.type.id && {
+            displayProperties: {
+              type: row.type.id,
+              ...(!!row?.ellipsisCharacterLimit && {
+                ellipsisCharacterLimit: row.ellipsisCharacterLimit,
+              }),
+              ...(!!row?.currencyCode && {currencyCode: row.currencyCode}),
+              ...(!!row?.display && {display: row.display}),
+              ...(!!row?.digitsInfo && {digitsInfo: row.digitsInfo}),
+              ...(!!row?.format && {format: row.format}),
+              ...(!!row?.values && {
+                values: row.values?.reduce((acc, curr) => ({...acc, [curr.key]: curr.value}), {}),
+              }),
+            },
+          }),
         }));
         this.columnUpdateEvent.emit({data: mappedRows, valid: this.formGroup.valid});
       })
diff --git a/projects/valtimo/dossier-management/src/lib/components/dossier-management-widget-configurators/fields/dossier-management-widget-fields.component.html b/projects/valtimo/dossier-management/src/lib/components/dossier-management-widget-configurators/fields/dossier-management-widget-fields.component.html
index 2d96c604d..0eb2b9c0d 100644
--- a/projects/valtimo/dossier-management/src/lib/components/dossier-management-widget-configurators/fields/dossier-management-widget-fields.component.html
+++ b/projects/valtimo/dossier-management/src/lib/components/dossier-management-widget-configurators/fields/dossier-management-widget-fields.component.html
@@ -47,6 +47,7 @@
       <valtimo-dossier-management-widget-fields-column
         *ngIf="activeTab() === $index"
         [columnData]="selectedWidgetContent()?.[$index]"
+        [documentDefinitionName]="documentDefinitionName$ | async"
         (columnUpdateEvent)="onColumnUpdateEvent($event, $index)"
       ></valtimo-dossier-management-widget-fields-column>
     </cds-tab>
diff --git a/projects/valtimo/dossier-management/src/lib/components/dossier-management-widget-configurators/fields/dossier-management-widget-fields.component.ts b/projects/valtimo/dossier-management/src/lib/components/dossier-management-widget-configurators/fields/dossier-management-widget-fields.component.ts
index 2689e7ac3..6fa7cfde0 100644
--- a/projects/valtimo/dossier-management/src/lib/components/dossier-management-widget-configurators/fields/dossier-management-widget-fields.component.ts
+++ b/projects/valtimo/dossier-management/src/lib/components/dossier-management-widget-configurators/fields/dossier-management-widget-fields.component.ts
@@ -38,10 +38,11 @@ import {
 } from '@valtimo/components';
 import {FieldsCaseWidgetValue, WidgetFieldsContent} from '@valtimo/dossier';
 import {ButtonModule, IconModule, InputModule, Tab, TabsModule} from 'carbon-components-angular';
-import {debounceTime, map, Subscription} from 'rxjs';
+import {debounceTime, map, Observable, Subscription, tap} from 'rxjs';
 import {WidgetContentComponent} from '../../../models';
 import {WidgetWizardService} from '../../../services';
 import {DossierManagementWidgetFieldsColumnComponent} from './column/dossier-management-widget-fields-column.component';
+import {ActivatedRoute, ParamMap} from '@angular/router';
 
 @Component({
   templateUrl: './dossier-management-widget-fields.component.html',
@@ -90,6 +91,9 @@ export class DossierManagementWidgetFieldsComponent
     )
   );
   public readonly activeTab = signal<number>(0);
+  public readonly documentDefinitionName$: Observable<string> = this.route.paramMap.pipe(
+    map((paramMap: ParamMap) => paramMap.get('name') ?? '')
+  );
 
   private readonly _subscriptions = new Subscription();
   private readonly _contentValid = signal<boolean>(false);
@@ -97,6 +101,7 @@ export class DossierManagementWidgetFieldsComponent
   constructor(
     private readonly cdsThemeService: CdsThemeService,
     private readonly fb: FormBuilder,
+    private readonly route: ActivatedRoute,
     private readonly widgetWizardService: WidgetWizardService
   ) {}
 
diff --git a/projects/valtimo/dossier-management/src/lib/components/dossier-management-widget-configurators/table/dossier-management-widget-table.component.html b/projects/valtimo/dossier-management/src/lib/components/dossier-management-widget-configurators/table/dossier-management-widget-table.component.html
index 11c200810..484b9d066 100644
--- a/projects/valtimo/dossier-management/src/lib/components/dossier-management-widget-configurators/table/dossier-management-widget-table.component.html
+++ b/projects/valtimo/dossier-management/src/lib/components/dossier-management-widget-configurators/table/dossier-management-widget-table.component.html
@@ -49,20 +49,22 @@
     />
   </cds-text-label>
 
-  <cds-text-label [attr.data-carbon-theme]="obs.theme">
+  <div class="valtimo-dossier-management-widget-table__path-selector">
     <v-input-label
       [title]="'widgetTabManagement.content.table.collection' | translate"
       [tooltip]="'widgetTabManagement.content.table.collectionTooltip' | translate"
     >
     </v-input-label>
 
-    <input
+    <valtimo-value-path-selector
       formControlName="collection"
-      cdsText
-      [placeholder]="'widgetTabManagement.content.table.collectionPlaceholder' | translate"
-      type="text"
-    />
-  </cds-text-label>
+      [attr.data-carbon-theme]="obs.theme"
+      [documentDefinitionName]="documentDefinitionName$ | async"
+      [prefixes]="[ValuePathSelectorPrefix.DOC, ValuePathSelectorPrefix.CASE]"
+      [valueType]="ValueResolverOptionType.COLLECTION"
+      (collectionPathSelected)="onCollectionPathSelected($event)"
+    ></valtimo-value-path-selector>
+  </div>
 </form>
 
 <span class="valtimo-dossier-management-widget-table__subtitle">
@@ -72,6 +74,8 @@
 <valtimo-dossier-management-widget-fields-column
   [addTranslateKey]="'widgetTabManagement.content.table.addColumn'"
   [columnData]="content()?.columns"
+  [documentDefinitionName]="documentDefinitionName$ | async"
+  [selectedCollectionPath]="selectedCollectionPath$ | async"
   (columnUpdateEvent)="onColumnUpdateEvent($event)"
 ></valtimo-dossier-management-widget-fields-column>
 
diff --git a/projects/valtimo/dossier-management/src/lib/components/dossier-management-widget-configurators/table/dossier-management-widget-table.component.scss b/projects/valtimo/dossier-management/src/lib/components/dossier-management-widget-configurators/table/dossier-management-widget-table.component.scss
index a35b5ee30..b23e08cf4 100644
--- a/projects/valtimo/dossier-management/src/lib/components/dossier-management-widget-configurators/table/dossier-management-widget-table.component.scss
+++ b/projects/valtimo/dossier-management/src/lib/components/dossier-management-widget-configurators/table/dossier-management-widget-table.component.scss
@@ -19,12 +19,10 @@
   gap: 24px;
 
   &__form {
-    display: flex;
+    display: grid;
     gap: 16px;
-
-    // > * {
-    //   width: 100%;
-    // }
+    grid-template-columns: repeat(3, 1fr);
+    align-items: flex-end;
   }
 
   &__subtitle {
@@ -38,4 +36,9 @@
     flex-direction: column;
     gap: 8px;
   }
+
+  &__path-selector {
+    display: flex;
+    flex-direction: column;
+  }
 }
diff --git a/projects/valtimo/dossier-management/src/lib/components/dossier-management-widget-configurators/table/dossier-management-widget-table.component.ts b/projects/valtimo/dossier-management/src/lib/components/dossier-management-widget-configurators/table/dossier-management-widget-table.component.ts
index e280a73a4..b1fc21eaa 100644
--- a/projects/valtimo/dossier-management/src/lib/components/dossier-management-widget-configurators/table/dossier-management-widget-table.component.ts
+++ b/projects/valtimo/dossier-management/src/lib/components/dossier-management-widget-configurators/table/dossier-management-widget-table.component.ts
@@ -34,13 +34,18 @@ import {
   CdsThemeService,
   CurrentCarbonTheme,
   InputLabelModule,
+  ValueCollectionPath,
+  ValuePathSelectorComponent,
+  ValuePathSelectorPrefix,
+  ValueResolverOptionType,
 } from '@valtimo/components';
 import {FieldsCaseWidgetValue, WidgetContentProperties, WidgetTableContent} from '@valtimo/dossier';
 import {ButtonModule, InputModule, ToggleModule} from 'carbon-components-angular';
-import {debounceTime, map, Observable, Subscription} from 'rxjs';
+import {BehaviorSubject, debounceTime, map, Observable, Subscription} from 'rxjs';
 import {WidgetContentComponent} from '../../../models';
 import {WidgetWizardService} from '../../../services';
 import {DossierManagementWidgetFieldsColumnComponent} from '../fields/column/dossier-management-widget-fields-column.component';
+import {ActivatedRoute, ParamMap} from '@angular/router';
 
 @Component({
   templateUrl: './dossier-management-widget-table.component.html',
@@ -57,6 +62,7 @@ import {DossierManagementWidgetFieldsColumnComponent} from '../fields/column/dos
     ToggleModule,
     ButtonModule,
     InputLabelModule,
+    ValuePathSelectorComponent,
   ],
 })
 export class DossierManagementWidgetTableComponent
@@ -79,12 +85,17 @@ export class DossierManagementWidgetTableComponent
       Validators.required
     ),
   });
+  public readonly ValuePathSelectorPrefix = ValuePathSelectorPrefix;
+  public readonly ValueResolverOptionType = ValueResolverOptionType;
 
   public readonly theme$: Observable<CARBON_THEME> = this.cdsThemeService.currentTheme$.pipe(
     map((currentTheme: CurrentCarbonTheme) =>
       currentTheme === CurrentCarbonTheme.G10 ? CARBON_THEME.WHITE : CARBON_THEME.G90
     )
   );
+  public readonly documentDefinitionName$: Observable<string> = this.route.paramMap.pipe(
+    map((paramMap: ParamMap) => paramMap.get('name') ?? '')
+  );
 
   public readonly content = this.widgetWizardService
     .widgetContent as WritableSignal<WidgetTableContent>;
@@ -92,12 +103,15 @@ export class DossierManagementWidgetTableComponent
     () =>
       (this.widgetWizardService.widgetContent() as WidgetTableContent)?.firstColumnAsTitle || false
   );
+  public readonly selectedCollectionPath$ = new BehaviorSubject<ValueCollectionPath | null>(null);
+
   private readonly _contentValid = signal<boolean>(this.widgetWizardService.editMode());
   private readonly _subscriptions = new Subscription();
 
   constructor(
     private readonly cdsThemeService: CdsThemeService,
     private readonly fb: FormBuilder,
+    private readonly route: ActivatedRoute,
     private readonly widgetWizardService: WidgetWizardService
   ) {}
 
@@ -143,4 +157,8 @@ export class DossierManagementWidgetTableComponent
         ({...content, firstColumnAsTitle}) as WidgetTableContent
     );
   }
+
+  public onCollectionPathSelected(collectionPath: ValueCollectionPath): void {
+    this.selectedCollectionPath$.next(collectionPath);
+  }
 }
diff --git a/projects/valtimo/dossier-management/src/lib/services/widget-fields.service.ts b/projects/valtimo/dossier-management/src/lib/services/widget-fields.service.ts
index eacb9acb9..0dd6f7652 100644
--- a/projects/valtimo/dossier-management/src/lib/services/widget-fields.service.ts
+++ b/projects/valtimo/dossier-management/src/lib/services/widget-fields.service.ts
@@ -98,6 +98,7 @@ export class WidgetFieldsService {
       case CaseWidgetDisplayTypeKey.BOOLEAN:
         break;
       case CaseWidgetDisplayTypeKey.TEXT:
+        formGroup.addControl('ellipsisCharacterLimit', this.fb.control(''));
         break;
       case CaseWidgetDisplayTypeKey.CURRENCY:
         formGroup.addControl('currencyCode', this.fb.control(''));
diff --git a/projects/valtimo/dossier/src/lib/components/dossier-detail/dossier-detail.component.html b/projects/valtimo/dossier/src/lib/components/dossier-detail/dossier-detail.component.html
index f99bef33d..d4fc7b5dd 100644
--- a/projects/valtimo/dossier/src/lib/components/dossier-detail/dossier-detail.component.html
+++ b/projects/valtimo/dossier/src/lib/components/dossier-detail/dossier-detail.component.html
@@ -203,10 +203,10 @@
 
 <ng-template #deleteButton let-canDelete="canDelete">
   <cds-overflow-menu-option
-          *ngIf="canDelete"
-          [disabled]="(isDeleting$ | async)"
-          (click)="deleteDocument()"
-          type="danger"
+    *ngIf="canDelete"
+    [disabled]="isDeleting$ | async"
+    (click)="deleteDocument()"
+    type="danger"
   >
     {{ 'dossier.delete.delete' | translate }}
   </cds-overflow-menu-option>
@@ -226,12 +226,12 @@
 </ng-template>
 
 <valtimo-confirmation-modal
-        confirmButtonTextTranslationKey="dossier.delete.confirm"
-        confirmButtonType="danger"
-        contentTranslationKey="dossier.delete.description"
-        [showModalSubject$]="showDeleteModal$"
-        titleTranslationKey="dossier.delete.delete"
-        (confirmEvent)="onConfirmDelete()"
+  confirmButtonTextTranslationKey="dossier.delete.confirm"
+  confirmButtonType="danger"
+  contentTranslationKey="dossier.delete.description"
+  [showModalSubject$]="showDeleteModal$"
+  titleTranslationKey="dossier.delete.delete"
+  (confirmEvent)="onConfirmDelete()"
 ></valtimo-confirmation-modal>
 
 <ng-container renderInPageHeader [fullWidth]="true">
@@ -295,12 +295,7 @@
             "
           >
           </ng-container>
-          <ng-container
-            *ngTemplateOutlet="
-              deleteButton;
-              context: {canDelete: obs.canDelete}
-            "
-          >
+          <ng-container *ngTemplateOutlet="deleteButton; context: {canDelete: obs.canDelete}">
           </ng-container>
         </cds-overflow-menu>
 
diff --git a/projects/valtimo/dossier/src/lib/components/dossier-detail/tab/widgets/components/field/widget-field.component.html b/projects/valtimo/dossier/src/lib/components/dossier-detail/tab/widgets/components/field/widget-field.component.html
index 536013546..683ea0938 100644
--- a/projects/valtimo/dossier/src/lib/components/dossier-detail/tab/widgets/components/field/widget-field.component.html
+++ b/projects/valtimo/dossier/src/lib/components/dossier-detail/tab/widgets/components/field/widget-field.component.html
@@ -43,11 +43,15 @@ <h4 class="widget-field__title">{{ obs?.widgetConfiguration?.title }}</h4>
       @for (column of obs?.widgetPropertyValue; track column.key) {
         <div class="widget-field__column">
           @for (property of column; track property) {
-            <cds-label>
-              <span [attr.title]="property?.title"> {{ property?.title }}</span>
+            <div class="widget-field__field">
+              <label class="widget-field__field-label" [attr.title]="property?.title">
+                {{ property?.title }}</label
+              >
 
-              <input cdsText [value]="property?.value" [readonly]="true" />
-            </cds-label>
+              <div [attr.title]="property?.value" class="widget-field__field-value">
+                {{ property?.value | valtimoEllipsis: property?.ellipsisCharacterLimit }}
+              </div>
+            </div>
           }
         </div>
       }
diff --git a/projects/valtimo/dossier/src/lib/components/dossier-detail/tab/widgets/components/field/widget-field.component.scss b/projects/valtimo/dossier/src/lib/components/dossier-detail/tab/widgets/components/field/widget-field.component.scss
index 892dbefdb..71876717c 100644
--- a/projects/valtimo/dossier/src/lib/components/dossier-detail/tab/widgets/components/field/widget-field.component.scss
+++ b/projects/valtimo/dossier/src/lib/components/dossier-detail/tab/widgets/components/field/widget-field.component.scss
@@ -39,6 +39,25 @@
     grid-template-columns: repeat(4, 1fr);
   }
 
+  &__field {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    gap: 8px;
+
+    &-label {
+      font-size: 12px;
+      color: var(--cds-text-secondary);
+    }
+
+    &-value {
+      color: var(--cds-text-primary);
+      padding: 8px 16px;
+      border-bottom: 1px solid var(--cds-border-subtle-01);
+      font-size: 14px;
+    }
+  }
+
   .cds--label {
     width: 100%;
     white-space: nowrap;
diff --git a/projects/valtimo/dossier/src/lib/components/dossier-detail/tab/widgets/components/field/widget-field.component.ts b/projects/valtimo/dossier/src/lib/components/dossier-detail/tab/widgets/components/field/widget-field.component.ts
index 8ff40515e..15c914497 100644
--- a/projects/valtimo/dossier/src/lib/components/dossier-detail/tab/widgets/components/field/widget-field.component.ts
+++ b/projects/valtimo/dossier/src/lib/components/dossier-detail/tab/widgets/components/field/widget-field.component.ts
@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
+import {CommonModule} from '@angular/common';
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
@@ -26,12 +26,11 @@ import {
   ViewChild,
   ViewEncapsulation,
 } from '@angular/core';
-import {CarbonListModule, ViewContentService} from '@valtimo/components';
-import {CommonModule} from '@angular/common';
-import {BehaviorSubject, combineLatest, map, Observable} from 'rxjs';
-import {FieldsCaseWidget} from '../../../../../../models';
-import {InputModule} from 'carbon-components-angular';
 import {TranslateModule} from '@ngx-translate/core';
+import {CarbonListModule, EllipsisPipe, ViewContentService, ViewType} from '@valtimo/components';
+import {InputModule} from 'carbon-components-angular';
+import {BehaviorSubject, combineLatest, map, Observable} from 'rxjs';
+import {CaseWidgetTextDisplayType, FieldsCaseWidget} from '../../../../../../models';
 
 @Component({
   selector: 'valtimo-widget-field',
@@ -40,7 +39,7 @@ import {TranslateModule} from '@ngx-translate/core';
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   standalone: true,
-  imports: [CommonModule, WidgetFieldComponent, InputModule, TranslateModule, CarbonListModule],
+  imports: [CommonModule, InputModule, TranslateModule, CarbonListModule, EllipsisPipe],
 })
 export class WidgetFieldComponent implements AfterViewInit, OnDestroy {
   @HostBinding('class') public readonly class = 'widget-field';
@@ -64,33 +63,34 @@ export class WidgetFieldComponent implements AfterViewInit, OnDestroy {
   public readonly widgetConfiguration$ = new BehaviorSubject<FieldsCaseWidget | null>(null);
   public readonly widgetData$ = new BehaviorSubject<object | null>(null);
 
-  public readonly widgetPropertyValue$: Observable<{title: string; value: string}[][]> =
-    combineLatest([this.widgetConfiguration$, this.widgetData$]).pipe(
-      map(([widget, widgetData]) =>
-        widget?.properties.columns.map(column =>
-          column.reduce(
-            (columnFields, property) => [
-              ...columnFields,
-              ...(widgetData?.hasOwnProperty(property.key)
-                ? [
-                    {
-                      title: property.title,
-                      value:
-                        widgetData[property.key] !== null && widgetData[property.key] !== undefined
-                          ? this.viewContentService.get(widgetData[property.key], {
-                              ...property.displayProperties,
-                              viewType: property.displayProperties?.type ?? 'text',
-                            })
-                          : '-',
-                    },
-                  ]
-                : []),
-            ],
-            []
-          )
+  public readonly widgetPropertyValue$: Observable<
+    {title: string; value: string; ellipsisCharacterLimit: number | null}[][]
+  > = combineLatest([this.widgetConfiguration$, this.widgetData$]).pipe(
+    map(([widget, widgetData]) =>
+      widget?.properties.columns.map(column =>
+        column.reduce(
+          (columnFields, property) => [
+            ...columnFields,
+            ...(widgetData?.hasOwnProperty(property.key)
+              ? [
+                  {
+                    title: property.title,
+                    ellipsisCharacterLimit:
+                      (property.displayProperties as CaseWidgetTextDisplayType)
+                        ?.ellipsisCharacterLimit ?? null,
+                    value: this.viewContentService.get(widgetData[property.key], {
+                      ...property.displayProperties,
+                      viewType: property.displayProperties?.type ?? ViewType.TEXT,
+                    }),
+                  },
+                ]
+              : []),
+          ],
+          []
         )
       )
-    );
+    )
+  );
 
   private _observer!: ResizeObserver;
 
diff --git a/projects/valtimo/dossier/src/lib/components/dossier-detail/tab/widgets/components/widget-block/widget-block.component.ts b/projects/valtimo/dossier/src/lib/components/dossier-detail/tab/widgets/components/widget-block/widget-block.component.ts
index 1bcbe1650..f706e3355 100644
--- a/projects/valtimo/dossier/src/lib/components/dossier-detail/tab/widgets/components/widget-block/widget-block.component.ts
+++ b/projects/valtimo/dossier/src/lib/components/dossier-detail/tab/widgets/components/widget-block/widget-block.component.ts
@@ -81,7 +81,6 @@ import {WIDGET_HEIGHT_1X} from '../../../../../../constants';
 })
 export class WidgetBlockComponent implements AfterViewInit, OnDestroy {
   @ViewChild('widgetBlockContent') private _widgetBlockContentRef: ElementRef<HTMLDivElement>;
-  @ViewChild('widgetBlock') private _widgetBlockRef: ElementRef<HTMLDivElement>;
 
   @Input() public set widget(value: CaseWidgetWithUuid) {
     this._widgetUuid = value.uuid;
diff --git a/projects/valtimo/dossier/src/lib/components/dossier-supporting-process-start-modal/dossier-supporting-process-start-modal.component.ts b/projects/valtimo/dossier/src/lib/components/dossier-supporting-process-start-modal/dossier-supporting-process-start-modal.component.ts
index 62bc4b25d..7784e4c37 100644
--- a/projects/valtimo/dossier/src/lib/components/dossier-supporting-process-start-modal/dossier-supporting-process-start-modal.component.ts
+++ b/projects/valtimo/dossier/src/lib/components/dossier-supporting-process-start-modal/dossier-supporting-process-start-modal.component.ts
@@ -154,6 +154,7 @@ export class DossierSupportingProcessStartModalComponent {
   public formSubmitted(): void {
     this.modal.hide();
     this.formSubmit.emit();
+    this.formDefinition$.next(null);
   }
 
   public gotoFormLinkScreen(): void {
diff --git a/projects/valtimo/dossier/src/lib/models/case-widget-content.model.ts b/projects/valtimo/dossier/src/lib/models/case-widget-content.model.ts
index 07274b8d8..b3d775f3e 100644
--- a/projects/valtimo/dossier/src/lib/models/case-widget-content.model.ts
+++ b/projects/valtimo/dossier/src/lib/models/case-widget-content.model.ts
@@ -15,7 +15,7 @@
  */
 
 import {CaseWidgetDisplayType} from './case-widget-display.model';
-import {CollectionFieldWidth, FieldsCaseWidgetValue} from './case-widget.model';
+import {FieldsCaseWidgetValue} from './case-widget.model';
 
 interface WidgetFieldsContent {
   columns: FieldsCaseWidgetValue[][];
diff --git a/projects/valtimo/dossier/src/lib/models/case-widget-display.model.ts b/projects/valtimo/dossier/src/lib/models/case-widget-display.model.ts
index 3e190c97c..d5ea28dbd 100644
--- a/projects/valtimo/dossier/src/lib/models/case-widget-display.model.ts
+++ b/projects/valtimo/dossier/src/lib/models/case-widget-display.model.ts
@@ -9,6 +9,11 @@ enum CaseWidgetDisplayTypeKey {
   PERCENT = 'percent',
 }
 
+interface CaseWidgetTextDisplayType {
+  type: CaseWidgetDisplayTypeKey.TEXT;
+  ellipsisCharacterLimit: number;
+}
+
 interface CaseWidgetBooleanDisplayType {
   type: CaseWidgetDisplayTypeKey.BOOLEAN;
 }
@@ -48,6 +53,7 @@ interface CaseWidgetPercentDisplayType {
 }
 
 type CaseWidgetDisplayType =
+  | CaseWidgetTextDisplayType
   | CaseWidgetBooleanDisplayType
   | CaseWidgetCurrencyDisplayType
   | CaseWidgetDateDisplayType
@@ -57,13 +63,14 @@ type CaseWidgetDisplayType =
   | CaseWidgetPercentDisplayType;
 
 export {
-  CaseWidgetDisplayTypeKey,
-  CaseWidgetDisplayType,
   CaseWidgetBooleanDisplayType,
   CaseWidgetCurrencyDisplayType,
   CaseWidgetDateDisplayType,
   CaseWidgetDateTimeDisplayType,
+  CaseWidgetDisplayType,
+  CaseWidgetDisplayTypeKey,
   CaseWidgetEnumDisplayType,
   CaseWidgetNumberDisplayType,
   CaseWidgetPercentDisplayType,
+  CaseWidgetTextDisplayType,
 };
diff --git a/projects/valtimo/dossier/src/lib/models/case-widget.model.ts b/projects/valtimo/dossier/src/lib/models/case-widget.model.ts
index 018d148f5..595b7776a 100644
--- a/projects/valtimo/dossier/src/lib/models/case-widget.model.ts
+++ b/projects/valtimo/dossier/src/lib/models/case-widget.model.ts
@@ -48,6 +48,7 @@ interface FieldsCaseWidgetValue {
   key: string;
   title: string;
   value: string;
+  ellipsisCharacterLimit?: number;
   displayProperties?: CaseWidgetDisplayType;
 }
 
diff --git a/projects/valtimo/form-view-model/src/lib/components/form-view-model/form-view-model.component.html b/projects/valtimo/form-view-model/src/lib/components/form-view-model/form-view-model.component.html
index dd6356e4c..eacca358b 100644
--- a/projects/valtimo/form-view-model/src/lib/components/form-view-model/form-view-model.component.html
+++ b/projects/valtimo/form-view-model/src/lib/components/form-view-model/form-view-model.component.html
@@ -43,6 +43,7 @@
     [submission]="obs.submission"
     [form]="obs.form"
     [options]="obs.formioOptions"
+    [refresh]="refreshForm"
     (submit)="onSubmit($event)"
     (change)="onChange($event)"
     (focusout)="onBlur($event)"
diff --git a/projects/valtimo/form-view-model/src/lib/components/form-view-model/form-view-model.component.ts b/projects/valtimo/form-view-model/src/lib/components/form-view-model/form-view-model.component.ts
index 3c5475f36..05a47c66c 100644
--- a/projects/valtimo/form-view-model/src/lib/components/form-view-model/form-view-model.component.ts
+++ b/projects/valtimo/form-view-model/src/lib/components/form-view-model/form-view-model.component.ts
@@ -95,6 +95,7 @@ export class FormViewModelComponent implements OnInit {
   @Output() formSubmit = new EventEmitter<any>();
 
   public errors: string[] = [];
+  public refreshForm = new EventEmitter();
 
   private _preventNextPage = false;
   private _preventPreviousPage = false;
@@ -135,11 +136,14 @@ export class FormViewModelComponent implements OnInit {
       const defaultOptions = {
         ...options,
         language,
-        ...(formioTranslations === 'object' && {
-          i18n: {
-            [language]: this.stateService.flattenTranslationsObject(formioTranslations),
-          },
-        }),
+        ...(typeof formioTranslations === 'object'
+          ? {
+            language,
+            i18n: {
+              [language]: this.stateService.flattenTranslationsObject(formioTranslations),
+            },
+          }
+          : {}),
       };
 
       return deepmerge(defaultOptions, overrideOptions);
@@ -324,6 +328,7 @@ export class FormViewModelComponent implements OnInit {
                         submission.data = viewModel;
                         this.submission$.next(submission);
                         this.handlePageChange();
+                        this.refreshForm.emit({submission: submission});
                         this.loading$.next(false);
                         this.errors = [];
                       },
@@ -386,6 +391,7 @@ export class FormViewModelComponent implements OnInit {
                         submission.data = viewModel;
                         this.submission$.next(submission);
                         this.handlePageChange();
+                        this.refreshForm.emit({submission: submission});
                         this.loading$.next(false);
                         this.errors = [];
                       },
diff --git a/projects/valtimo/plugin-management/src/lib/components/plugin-configure/plugin-configure.component.html b/projects/valtimo/plugin-management/src/lib/components/plugin-configure/plugin-configure.component.html
index 0b86fdee5..7892dadb1 100644
--- a/projects/valtimo/plugin-management/src/lib/components/plugin-configure/plugin-configure.component.html
+++ b/projects/valtimo/plugin-management/src/lib/components/plugin-configure/plugin-configure.component.html
@@ -16,6 +16,7 @@
 
 <valtimo-plugin-configuration-container
   *ngIf="pluginDefinitionKey$ | async as pluginDefinitionKey"
+  [cdsLayer]="1"
   [pluginDefinitionKey]="pluginDefinitionKey"
   [prefillConfiguration$]="prefillConfiguration$"
   [save$]="save$"
diff --git a/projects/valtimo/plugin-management/src/lib/components/plugin-edit/plugin-edit.component.html b/projects/valtimo/plugin-management/src/lib/components/plugin-edit/plugin-edit.component.html
index d72394589..f4b66b973 100644
--- a/projects/valtimo/plugin-management/src/lib/components/plugin-edit/plugin-edit.component.html
+++ b/projects/valtimo/plugin-management/src/lib/components/plugin-edit/plugin-edit.component.html
@@ -16,6 +16,7 @@
 
 <valtimo-plugin-configuration-container
   *ngIf="pluginDefinitionKey$ | async as pluginDefinitionKey"
+  [cdsLayer]="1"
   [pluginDefinitionKey]="pluginDefinitionKey"
   [prefillConfiguration$]="prefillConfiguration$"
   [save$]="saveEdit$"
diff --git a/projects/valtimo/plugin-management/src/lib/plugin-management.module.ts b/projects/valtimo/plugin-management/src/lib/plugin-management.module.ts
index 19f25e7e8..9697bcbda 100644
--- a/projects/valtimo/plugin-management/src/lib/plugin-management.module.ts
+++ b/projects/valtimo/plugin-management/src/lib/plugin-management.module.ts
@@ -41,6 +41,7 @@ import {
 import {
   ButtonModule as CarbonButtonModule,
   IconModule,
+  LayerModule,
   ModalModule as CarbonModalModule,
 } from 'carbon-components-angular';
 
@@ -73,6 +74,7 @@ import {
     CarbonModalModule,
     IconModule,
     ValtimoCdsModalDirectiveModule,
+    LayerModule,
   ],
   exports: [
     PluginManagementComponent,
diff --git a/projects/valtimo/plugin/src/lib/plugins/portaaltaak/components/create-portal-task/create-portal-task.component.html b/projects/valtimo/plugin/src/lib/plugins/portaaltaak/components/create-portal-task/create-portal-task.component.html
index df2976035..6db81fb96 100644
--- a/projects/valtimo/plugin/src/lib/plugins/portaaltaak/components/create-portal-task/create-portal-task.component.html
+++ b/projects/valtimo/plugin/src/lib/plugins/portaaltaak/components/create-portal-task/create-portal-task.component.html
@@ -35,6 +35,7 @@
     [required]="true"
     [clearable]="false"
   ></v-select>
+
   <v-input
     *ngIf="obs.formTypeIsUrl === false"
     name="formTypeId"
@@ -46,6 +47,7 @@
     [tooltip]="'formTypeIdTooltip' | pluginTranslate: pluginId | async"
     [required]="true"
   ></v-input>
+
   <v-input
     *ngIf="obs.formTypeIsUrl"
     name="formTypeUrl"
@@ -57,10 +59,11 @@
     [required]="true"
     [trim]="true"
   ></v-input>
+
   <valtimo-carbon-multi-input
     name="sendData"
     [title]="'sendData' | pluginTranslate: pluginId | async"
-    type="keyValue"
+    type="keyValuePathSelector"
     [disabled]="obs.disabled"
     [defaultValues]="obs.prefill?.sendData"
     [margin]="true"
@@ -68,11 +71,16 @@
     [tooltip]="'sendDataTooltip' | pluginTranslate: pluginId | async"
     [minimumAmountOfRows]="0"
     [initialAmountOfRows]="0"
+    [fullWidth]="true"
+    valuePathSelectorNotation="slashes"
+    [valuePathSelectorPrefixes]="[ValuePathSelectorPrefix.DOC]"
+    [valuePathSelectorShowDocumentDefinitionSelector]="true"
   ></valtimo-carbon-multi-input>
+
   <valtimo-carbon-multi-input
     name="receiveData"
     [title]="'receiveData' | pluginTranslate: pluginId | async"
-    type="keyValue"
+    type="valuePathSelectorValue"
     [disabled]="obs.disabled"
     [defaultValues]="obs.prefill?.receiveData"
     [margin]="true"
@@ -80,7 +88,12 @@
     [tooltip]="'receiveDataTooltip' | pluginTranslate: pluginId | async"
     [minimumAmountOfRows]="0"
     [initialAmountOfRows]="0"
+    [fullWidth]="true"
+    valuePathSelectorNotation="slashes"
+    [valuePathSelectorPrefixes]="[ValuePathSelectorPrefix.DOC]"
+    [valuePathSelectorShowDocumentDefinitionSelector]="true"
   ></valtimo-carbon-multi-input>
+
   <v-select
     [items]="receiverSelectItems$ | async"
     [margin]="true"
@@ -93,6 +106,7 @@
     [required]="true"
     [clearable]="false"
   ></v-select>
+
   <v-input
     *ngIf="obs.receiverIsOther"
     name="identificationKey"
@@ -104,6 +118,7 @@
     [required]="true"
     [trim]="true"
   ></v-input>
+
   <v-input
     *ngIf="obs.receiverIsOther"
     name="identificationValue"
@@ -115,9 +130,9 @@
     [required]="true"
     [trim]="true"
   ></v-input>
+
   <v-input
     name="verloopDurationInDays"
-    [type]="'number'"
     [title]="'verloopDurationInDays' | pluginTranslate: pluginId | async"
     [margin]="true"
     [defaultValue]="obs.prefill?.verloopDurationInDays?.toString()"
diff --git a/projects/valtimo/plugin/src/lib/plugins/portaaltaak/components/create-portal-task/create-portal-task.component.ts b/projects/valtimo/plugin/src/lib/plugins/portaaltaak/components/create-portal-task/create-portal-task.component.ts
index 2b2359099..7c9509842 100644
--- a/projects/valtimo/plugin/src/lib/plugins/portaaltaak/components/create-portal-task/create-portal-task.component.ts
+++ b/projects/valtimo/plugin/src/lib/plugins/portaaltaak/components/create-portal-task/create-portal-task.component.ts
@@ -20,7 +20,7 @@ import {BehaviorSubject, combineLatest, map, Observable, Subscription, take} fro
 import {TranslateService} from '@ngx-translate/core';
 import {PluginTranslationService} from '../../../../services';
 import {CreatePortalTaskConfig, FormType, OtherReceiver, Receiver} from '../../models';
-import {SelectItem} from '@valtimo/components';
+import {SelectItem, ValuePathSelectorPrefix} from '@valtimo/components';
 
 @Component({
   selector: 'valtimo-create-portal-task',
@@ -56,6 +56,8 @@ export class CreatePortalTaskComponent
   );
   private readonly valid$ = new BehaviorSubject<boolean>(false);
 
+  public readonly ValuePathSelectorPrefix = ValuePathSelectorPrefix;
+
   constructor(
     private readonly translateService: TranslateService,
     private readonly pluginTranslationService: PluginTranslationService
diff --git a/projects/valtimo/plugin/src/lib/plugins/smart-documents/components/generate-document-configuration/generate-document-configuration.component.html b/projects/valtimo/plugin/src/lib/plugins/smart-documents/components/generate-document-configuration/generate-document-configuration.component.html
index a10323f37..8d727707b 100644
--- a/projects/valtimo/plugin/src/lib/plugins/smart-documents/components/generate-document-configuration/generate-document-configuration.component.html
+++ b/projects/valtimo/plugin/src/lib/plugins/smart-documents/components/generate-document-configuration/generate-document-configuration.component.html
@@ -68,14 +68,23 @@
     [defaultSelectionId]="obs.prefill?.format"
     [required]="true"
   ></v-select>
+
   <valtimo-carbon-multi-input
     name="templateData"
     [title]="'templateData' | pluginTranslate: pluginId | async"
-    type="keyValue"
+    type="keyValuePathSelector"
     [disabled]="obs.disabled"
     [defaultValues]="obs.prefill?.templateData"
     [margin]="true"
     [required]="true"
     [tooltip]="'templateDataTooltip' | pluginTranslate: pluginId | async"
+    valuePathSelectorNotation="slashes"
+    [fullWidth]="true"
+    [valuePathSelectorPrefixes]="[
+      ValuePathSelectorPrefix.DOC,
+      ValuePathSelectorPrefix.CASE,
+      ValuePathSelectorPrefix.ZAAK,
+    ]"
+    [valuePathSelectorShowDocumentDefinitionSelector]="true"
   ></valtimo-carbon-multi-input>
 </v-form>
diff --git a/projects/valtimo/plugin/src/lib/plugins/smart-documents/components/generate-document-configuration/generate-document-configuration.component.ts b/projects/valtimo/plugin/src/lib/plugins/smart-documents/components/generate-document-configuration/generate-document-configuration.component.ts
index 09cf255db..73c503dce 100644
--- a/projects/valtimo/plugin/src/lib/plugins/smart-documents/components/generate-document-configuration/generate-document-configuration.component.ts
+++ b/projects/valtimo/plugin/src/lib/plugins/smart-documents/components/generate-document-configuration/generate-document-configuration.component.ts
@@ -15,14 +15,10 @@
  */
 
 import {Component, EventEmitter, Input, OnDestroy, OnInit, Output} from '@angular/core';
-import {
-  FunctionConfigurationComponent,
-  FunctionConfigurationData,
-  PluginConfigurationComponent,
-  PluginConfigurationData,
-} from '../../../../models';
+import {FunctionConfigurationComponent} from '../../../../models';
 import {BehaviorSubject, combineLatest, Observable, Subscription, take} from 'rxjs';
-import {DocumentFormat, GenerateDocumentConfig, SmartDocumentsConfig} from '../../models';
+import {DocumentFormat, GenerateDocumentConfig} from '../../models';
+import {ValuePathSelectorPrefix} from '@valtimo/components';
 
 @Component({
   selector: 'valtimo-generate-document-configuration',
@@ -46,6 +42,8 @@ export class GenerateDocumentConfigurationComponent
     text: format,
   }));
 
+  public readonly ValuePathSelectorPrefix = ValuePathSelectorPrefix;
+
   private saveSubscription!: Subscription;
   private readonly formValue$ = new BehaviorSubject<GenerateDocumentConfig | null>(null);
   private readonly valid$ = new BehaviorSubject<boolean>(false);
diff --git a/projects/valtimo/plugin/src/lib/plugins/verzoek/components/verzoek-configuration/verzoek-configuration.component.html b/projects/valtimo/plugin/src/lib/plugins/verzoek/components/verzoek-configuration/verzoek-configuration.component.html
index 878999343..5d44cb2b1 100644
--- a/projects/valtimo/plugin/src/lib/plugins/verzoek/components/verzoek-configuration/verzoek-configuration.component.html
+++ b/projects/valtimo/plugin/src/lib/plugins/verzoek/components/verzoek-configuration/verzoek-configuration.component.html
@@ -202,7 +202,7 @@
       </ng-container>
       <v-input class="hidden-input" name="uuid" [defaultValue]="uuid"> </v-input>
     </v-form>
-    <v-modal [parentId]="uuid" (closeEvent)="closeMappingModal(uuid)">
+    <v-modal [parentId]="uuid" (closeEvent)="closeMappingModal(uuid)" [maxWidthPx]="960">
       <div role="header">
         <h3 cdsModalHeaderHeading>{{ 'setMapping' | pluginTranslate: pluginId | async }}</h3>
       </div>
@@ -220,36 +220,40 @@ <h3 cdsModalHeaderHeading>{{ 'setMapping' | pluginTranslate: pluginId | async }}
           </cds-label>
           <valtimo-carbon-multi-input
             *ngIf="showMappingModalsDelay[uuid]"
-            type="keyValue"
+            type="keyValuePathSelector"
             (valueChange)="mappingValueChange($event, uuid)"
             [defaultValues]="mappings[uuid] || prefill?.mapping"
             [valueColumnTitle]="'target' | pluginTranslate: pluginId | async"
             [keyColumnTitle]="'source' | pluginTranslate: pluginId | async"
             [fullWidth]="true"
+            valuePathSelectorNotation="slashes"
+            [valuePathSelectorDocumentDefinitionName]="
+              getSelectedCaseDefinitionNameForIndex(index) | async
+            "
+            [valuePathSelectorPrefixes]="[ValuePathSelectorPrefix.DOC]"
           ></valtimo-carbon-multi-input>
         </div>
       </div>
 
-      <div role="footer">
-        <ng-container>
-          <button
-            cdsButton="secondary"
-            [attr.modal-primary-focus]="true"
-            (click)="closeMappingModal(uuid)"
-            [disabled]="obs.disabled"
-          >
-            {{ 'close' | pluginTranslate: pluginId | async }}
-          </button>
-          <button
-            cdsButton="primary"
-            [attr.modal-primary-focus]="true"
-            [disabled]="obs.disabled"
-            (click)="saveMapping(uuid)"
-            [disabled]="obs.disabled"
-          >
-            {{ 'save' | pluginTranslate: pluginId | async }}
-          </button>
-        </ng-container>
+      <div role="footer" class="modal-buttons-container">
+        <button
+          cdsButton="secondary"
+          [attr.modal-primary-focus]="true"
+          (click)="closeMappingModal(uuid)"
+          [disabled]="obs.disabled"
+        >
+          {{ 'close' | pluginTranslate: pluginId | async }}
+        </button>
+
+        <button
+          cdsButton="primary"
+          [attr.modal-primary-focus]="true"
+          [disabled]="obs.disabled"
+          (click)="saveMapping(uuid)"
+          [disabled]="obs.disabled"
+        >
+          {{ 'save' | pluginTranslate: pluginId | async }}
+        </button>
       </div>
     </v-modal>
   </ng-container>
diff --git a/projects/valtimo/plugin/src/lib/plugins/verzoek/components/verzoek-configuration/verzoek-configuration.component.scss b/projects/valtimo/plugin/src/lib/plugins/verzoek/components/verzoek-configuration/verzoek-configuration.component.scss
index 9015f1ad0..3e4ed2830 100644
--- a/projects/valtimo/plugin/src/lib/plugins/verzoek/components/verzoek-configuration/verzoek-configuration.component.scss
+++ b/projects/valtimo/plugin/src/lib/plugins/verzoek/components/verzoek-configuration/verzoek-configuration.component.scss
@@ -31,3 +31,9 @@
 .cds--text-input__field-wrapper {
   flex-direction: column;
 }
+
+.modal-buttons-container {
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+}
diff --git a/projects/valtimo/plugin/src/lib/plugins/verzoek/components/verzoek-configuration/verzoek-configuration.component.ts b/projects/valtimo/plugin/src/lib/plugins/verzoek/components/verzoek-configuration/verzoek-configuration.component.ts
index 210d51ddb..4d242fbd9 100644
--- a/projects/valtimo/plugin/src/lib/plugins/verzoek/components/verzoek-configuration/verzoek-configuration.component.ts
+++ b/projects/valtimo/plugin/src/lib/plugins/verzoek/components/verzoek-configuration/verzoek-configuration.component.ts
@@ -44,6 +44,7 @@ import {
   MultiInputValues,
   RadioValue,
   SelectItem,
+  ValuePathSelectorPrefix,
   VModalComponent,
 } from '@valtimo/components';
 import {VerzoekPluginService} from '../../services';
@@ -144,6 +145,18 @@ export class VerzoekConfigurationComponent
   private readonly formValue$ = new BehaviorSubject<VerzoekConfig | null>(null);
   private readonly valid$ = new BehaviorSubject<boolean>(false);
 
+  public getSelectedCaseDefinitionNameForIndex(index: number): Observable<string> {
+    return this.formValue$.pipe(
+      map(
+        formValue =>
+          Array.isArray(formValue.verzoekProperties) &&
+          formValue.verzoekProperties[index]?.caseDefinitionName
+      )
+    );
+  }
+
+  public readonly ValuePathSelectorPrefix = ValuePathSelectorPrefix;
+
   constructor(
     private readonly pluginManagementService: PluginManagementService,
     private readonly translateService: TranslateService,
diff --git a/projects/valtimo/process-link/src/lib/components/process-link-modal/process-link-modal.component.html b/projects/valtimo/process-link/src/lib/components/process-link-modal/process-link-modal.component.html
index d85496042..566c1d07f 100644
--- a/projects/valtimo/process-link/src/lib/components/process-link-modal/process-link-modal.component.html
+++ b/projects/valtimo/process-link/src/lib/components/process-link-modal/process-link-modal.component.html
@@ -45,7 +45,7 @@ <h3 cdsModalHeaderHeading>
         <ng-container *ngTemplateOutlet="progressIndicator; context: {obs: obs}"></ng-container>
       </div>
     </cds-modal-header>
-    <section cdsModalContent>
+    <section cdsModalContent [cdsLayer]="1">
       <ng-container *ngTemplateOutlet="stepContent; context: {obs: obs}"></ng-container>
     </section>
     <ng-template *ngTemplateOutlet="footer; context: {obs: obs}"></ng-template>
diff --git a/projects/valtimo/process-link/src/lib/process-link.module.ts b/projects/valtimo/process-link/src/lib/process-link.module.ts
index bf169f7f3..b2dadf600 100644
--- a/projects/valtimo/process-link/src/lib/process-link.module.ts
+++ b/projects/valtimo/process-link/src/lib/process-link.module.ts
@@ -47,6 +47,7 @@ import {
   ComboBoxModule,
   IconModule,
   InputModule,
+  LayerModule,
   LoadingModule,
   ModalModule as CarbonModalModule,
   ProgressIndicatorModule,
@@ -114,6 +115,7 @@ import {FormDisplayConfigurationComponent} from './components/form-display-confi
     SelectModule,
     ToggleModule,
     CarbonMultiInputModule,
+    LayerModule,
   ],
   exports: [
     ProcessLinkComponent,
diff --git a/projects/valtimo/process-link/src/lib/services/process-link.service.ts b/projects/valtimo/process-link/src/lib/services/process-link.service.ts
index ecdafb4e1..b250fc739 100644
--- a/projects/valtimo/process-link/src/lib/services/process-link.service.ts
+++ b/projects/valtimo/process-link/src/lib/services/process-link.service.ts
@@ -76,34 +76,16 @@ export class ProcessLinkService {
       | FormProcessLinkUpdateRequestDto
       | URLProcessLinkUpdateRequestDto
   ): Observable<null> {
-    const pluginUpdateRequest = updateProcessLinkRequest as PluginProcessLinkUpdateDto;
-    if (pluginUpdateRequest.actionProperties) {
-      Object.keys(pluginUpdateRequest.actionProperties).forEach(key => {
-        if (pluginUpdateRequest.actionProperties[key] === '') {
-          pluginUpdateRequest.actionProperties[key] = null;
-        }
-      });
-    }
-
     return this.http.put<null>(
       `${this.VALTIMO_ENDPOINT_URI}v1/process-link`,
-      updateProcessLinkRequest
+      this.emptyStringToNull(updateProcessLinkRequest)
     );
   }
 
   public saveProcessLink(saveProcessLinkRequest: ProcessLinkCreateEvent): Observable<null> {
-    const pluginProcessLinkCreateRequest = saveProcessLinkRequest as PluginProcessLinkCreateDto;
-    if (pluginProcessLinkCreateRequest.actionProperties) {
-      Object.keys(pluginProcessLinkCreateRequest.actionProperties).forEach(key => {
-        if (pluginProcessLinkCreateRequest.actionProperties[key] === '') {
-          pluginProcessLinkCreateRequest.actionProperties[key] = null;
-        }
-      });
-    }
-
     return this.http.post<null>(
       `${this.VALTIMO_ENDPOINT_URI}v1/process-link`,
-      saveProcessLinkRequest
+      this.emptyStringToNull(saveProcessLinkRequest)
     );
   }
 
@@ -199,4 +181,19 @@ export class ProcessLinkService {
   public getVariables(): Observable<URLVariables> {
     return this.http.get<URLVariables>(`${this.VALTIMO_ENDPOINT_URI}v1/process-link/url/variables`);
   }
+
+  private emptyStringToNull<T extends Record<string, any>>(object: T): T {
+    if (object && typeof object === 'object') {
+      Object.keys(object).forEach(key => {
+        const typedKey = key as keyof T;
+        const value = object[typedKey];
+        if (typeof value === 'object' && value !== null) {
+          this.emptyStringToNull(value);
+        } else if (value === '') {
+          object[typedKey] = null as any;
+        }
+      });
+    }
+    return object;
+  }
 }
diff --git a/projects/valtimo/resource/src/lib/services/open-zaak-upload.service.ts b/projects/valtimo/resource/src/lib/services/open-zaak-upload.service.ts
index c71e5124d..cbca60183 100644
--- a/projects/valtimo/resource/src/lib/services/open-zaak-upload.service.ts
+++ b/projects/valtimo/resource/src/lib/services/open-zaak-upload.service.ts
@@ -52,7 +52,7 @@ export class OpenZaakUploadService implements UploadService {
     metadata: {[key: string]: any}
   ): Observable<void> {
     return this.openZaakService.uploadWithMetadata(
-      new File([file], file.name, {type: file.type}),
+      new File([file], metadata?.bestandsnaam || file.name, {type: file.type}),
       documentId,
       metadata
     );
@@ -63,7 +63,7 @@ export class OpenZaakUploadService implements UploadService {
     metadata: {[key: string]: any}
   ): Observable<DocumentenApiFileReference> {
     return this.openZaakService.uploadTempFileWithMetadata(
-      new File([file], file.name, {type: file.type}),
+      new File([file], metadata?.bestandsnaam || file.name, {type: file.type}),
       metadata
     );
   }
diff --git a/projects/valtimo/task/src/lib/components/task-detail-content/task-detail-content.component.ts b/projects/valtimo/task/src/lib/components/task-detail-content/task-detail-content.component.ts
index 426aa0f12..456b99f01 100644
--- a/projects/valtimo/task/src/lib/components/task-detail-content/task-detail-content.component.ts
+++ b/projects/valtimo/task/src/lib/components/task-detail-content/task-detail-content.component.ts
@@ -222,6 +222,8 @@ export class TaskDetailContentComponent implements OnInit, OnDestroy {
     this.resetTaskProcessLinkType();
     this.resetFormDefinition();
 
+    this.taskInstanceId$.next(task.id);
+
     if (!processLink) {
       this.getTaskProcessLink(task.id);
     } else {
@@ -233,7 +235,6 @@ export class TaskDetailContentComponent implements OnInit, OnDestroy {
     this.stateService.setDocumentId(documentId);
 
     this.task$.next(task);
-    this.taskInstanceId$.next(task.id);
     this.page$.next({
       title: task.name,
       subtitle: `${this.translateService.instant('taskDetail.taskCreated')} ${task.created}`,
diff --git a/projects/valtimo/zgw/src/lib/components/dossier-management-zgw/dossier-management-zgw.component.ts b/projects/valtimo/zgw/src/lib/components/dossier-management-zgw/dossier-management-zgw.component.ts
index 02e3237da..76f701676 100644
--- a/projects/valtimo/zgw/src/lib/components/dossier-management-zgw/dossier-management-zgw.component.ts
+++ b/projects/valtimo/zgw/src/lib/components/dossier-management-zgw/dossier-management-zgw.component.ts
@@ -31,6 +31,7 @@ import {CommonModule} from '@angular/common';
 import {
   DocumentenApiColumnsComponent,
   DocumentenApiTagsComponent,
+  DocumentenApiUploadFieldsComponent,
   DocumentenApiVersionService,
   SupportedDocumentenApiFeatures,
 } from '../../modules';
@@ -42,13 +43,7 @@ import {ActivatedRoute} from '@angular/router';
   styleUrls: ['./dossier-management-zgw.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [
-    CommonModule,
-    TabsModule,
-    TranslateModule,
-    DocumentenApiTagsComponent,
-    DocumentenApiColumnsComponent,
-  ],
+  imports: [CommonModule, TabsModule, TranslateModule],
 })
 export class DossierManagementZgwComponent implements AfterViewInit, OnDestroy {
   @ViewChild('zgwTabContent', {read: ViewContainerRef})
@@ -79,6 +74,12 @@ export class DossierManagementZgwComponent implements AfterViewInit, OnDestroy {
           tab: ZgwTabEnum.DOCUMENTEN_API_COLUMNS,
           component: DocumentenApiColumnsComponent,
         },
+        {
+          class: 'no-padding-left-right no-padding-top-bottom',
+          headingTranslationKey: 'zgw.tabs.documentUploadFields',
+          tab: ZgwTabEnum.DOCUMENTEN_API_UPLOAD_FIELDS,
+          component: DocumentenApiUploadFieldsComponent,
+        },
         ...(supportedDocumentenApiFeatures.supportsTrefwoorden
           ? [
               {
diff --git a/projects/valtimo/zgw/src/lib/models/dossier-management-zgw.model.ts b/projects/valtimo/zgw/src/lib/models/dossier-management-zgw.model.ts
index cac22b5a0..c27eec68d 100644
--- a/projects/valtimo/zgw/src/lib/models/dossier-management-zgw.model.ts
+++ b/projects/valtimo/zgw/src/lib/models/dossier-management-zgw.model.ts
@@ -19,6 +19,7 @@ import {Type} from '@angular/core';
 enum ZgwTabEnum {
   DOCUMENTEN_API_COLUMNS = 'documentenApiColumns',
   DOCUMENTEN_API_TAGS = 'documentenApiTags',
+  DOCUMENTEN_API_UPLOAD_FIELDS = 'documentenApiUploadFields',
 }
 
 interface ZgwTab {
diff --git a/projects/valtimo/zgw/src/lib/modules/documenten-api/components/documenten-api-documents/documenten-api-documents.component.html b/projects/valtimo/zgw/src/lib/modules/documenten-api/components/documenten-api-documents/documenten-api-documents.component.html
index 411c393dc..d8a0e4a43 100644
--- a/projects/valtimo/zgw/src/lib/modules/documenten-api/components/documenten-api-documents/documenten-api-documents.component.html
+++ b/projects/valtimo/zgw/src/lib/modules/documenten-api/components/documenten-api-documents/documenten-api-documents.component.html
@@ -24,6 +24,9 @@
     supportedDocumentenApiFeatures: supportedDocumentenApiFeatures$ | async,
     pagination: pagination$ | async,
     sortState: sortState$ | async,
+    uploadFields: uploadFields$ | async,
+    defaultValues: defaultValues$ | async,
+    hideFields: hideFields$ | async,
   } as obs"
 >
   @if ((!obs.fieldsLoading && obs.fields.length) || obs.fieldsLoading) {
@@ -80,6 +83,17 @@
   }
 
   <valtimo-documenten-api-metadata-modal
+    [defaultValues]="obs.defaultValues"
+    [disableAuthor]="obs.uploadFields?.auteur?.readonly"
+    [disableConfidentialityLevel]="obs.uploadFields?.vertrouwelijkheidaanduiding?.readonly"
+    [disableCreationDate]="obs.uploadFields?.creatiedatum?.readonly"
+    [disableDescription]="obs.uploadFields?.beschrijving?.readonly"
+    [disableDocumentTitle]="obs.uploadFields?.titel?.readonly"
+    [disableDocumentType]="obs.uploadFields?.informatieobjecttype?.readonly"
+    [disableFilename]="obs.uploadFields?.bestandsnaam?.readonly"
+    [disableLanguage]="obs.uploadFields?.taal?.readonly"
+    [disableStatus]="obs.uploadFields?.status?.readonly"
+    [hideFields]="obs.hideFields"
     [open]="showUploadModal$ | async"
     [disabled$]="modalDisabled$"
     [file$]="fileToBeUploaded$"
@@ -170,7 +184,11 @@
 </ng-template>
 
 <ng-template #translationTemplate let-data="data">
-  {{ 'document.' + data.item[data.key] | translate }}
+  @if (data.item[data.key]) {
+    {{ 'document.' + data.item[data.key] | translate }}
+  } @else {
+    -
+  }
 </ng-template>
 
 <ng-template #navigateToCaseAdminButton>
diff --git a/projects/valtimo/zgw/src/lib/modules/documenten-api/components/documenten-api-documents/documenten-api-documents.component.ts b/projects/valtimo/zgw/src/lib/modules/documenten-api/components/documenten-api-documents/documenten-api-documents.component.ts
index 6ca58faa1..281b44b8a 100644
--- a/projects/valtimo/zgw/src/lib/modules/documenten-api/components/documenten-api-documents/documenten-api-documents.component.ts
+++ b/projects/valtimo/zgw/src/lib/modules/documenten-api/components/documenten-api-documents/documenten-api-documents.component.ts
@@ -56,6 +56,10 @@ import {DocumentenApiColumnService, DocumentenApiVersionService} from '../../ser
 import {DocumentenApiDocumentService} from '../../services/documenten-api-document.service';
 import {DocumentenApiFilterComponent} from '../documenten-api-filter/documenten-api-filter.component';
 import {DocumentenApiMetadataModalComponent} from '../documenten-api-metadata-modal/documenten-api-metadata-modal.component';
+import {
+  DocumentenApiUploadFieldDefaultValues,
+  DocumentenApiUploadFields
+} from '../../models/documenten-api-upload-field.model';
 
 @Component({
   selector: 'valtimo-dossier-detail-tab-documenten-api-documents',
@@ -198,6 +202,50 @@ export class DossierDetailTabDocumentenApiDocumentsComponent implements OnInit,
     return this._sort$.pipe(map(sortValue => this.getSortStateFromSortString(sortValue?.sort)));
   }
 
+  public uploadFields$: Observable<DocumentenApiUploadFields> = this.documentId$.pipe(
+    switchMap(documentId => this.documentenApiDocumentService.getPrefilledUploadFields(documentId)),
+    map(uploadFields =>
+      uploadFields.reduce(
+        (acc, curr) => ({
+          ...acc,
+          [curr.key]: {
+            key: curr.key,
+            defaultValue: curr.defaultValue,
+            visible: curr.visible,
+            readonly: curr.readonly,
+          },
+        }),
+        {}
+      )
+    )
+  );
+
+  public defaultValues$: Observable<DocumentenApiUploadFieldDefaultValues> = this.uploadFields$.pipe(
+    map(formFields => ({
+      auteur: formFields?.auteur?.defaultValue,
+      vertrouwelijkheidaanduiding: formFields?.vertrouwelijkheidaanduiding?.defaultValue,
+      beschrijving: formFields?.beschrijving?.defaultValue,
+      titel: formFields?.titel?.defaultValue,
+      informatieobjecttype: formFields?.informatieobjecttype?.defaultValue,
+      bestandsnaam: formFields?.bestandsnaam?.defaultValue,
+      taal: formFields?.taal?.defaultValue,
+      status: formFields?.status?.defaultValue,
+      trefwoorden: formFields?.trefwoorden?.defaultValue
+        ?.split(',')
+        ?.map(tag => tag.trim())
+        ?.filter(tag => !!tag),
+    }))
+  );
+
+  public hideFields$: Observable<Array<string>> = this.uploadFields$.pipe(
+    map(formFields => {
+      if (formFields) {
+        return Object.keys(formFields).filter(field => !formFields[field]?.visible);
+      }
+      return [];
+    })
+  );
+
   public relatedFiles$: Observable<Array<DocumentenApiRelatedFile>> = combineLatest([
     this.documentId$,
     this.route.queryParamMap,
diff --git a/projects/valtimo/zgw/src/lib/modules/documenten-api/components/documenten-api-metadata-modal/documenten-api-metadata-modal.component.html b/projects/valtimo/zgw/src/lib/modules/documenten-api/components/documenten-api-metadata-modal/documenten-api-metadata-modal.component.html
index c6f8946fb..b00e3bc0a 100644
--- a/projects/valtimo/zgw/src/lib/modules/documenten-api/components/documenten-api-metadata-modal/documenten-api-metadata-modal.component.html
+++ b/projects/valtimo/zgw/src/lib/modules/documenten-api/components/documenten-api-metadata-modal/documenten-api-metadata-modal.component.html
@@ -21,6 +21,8 @@
     disabled: disabled$ | async,
     isDefinitiveStatus: isDefinitiveStatus$ | async,
     languageItems: languageItems$ | async,
+    confidentialityLevelItems: confidentialityLevelItems$ | async,
+    documentTypeItems: documentTypeItems$ | async,
     statusItems: statusItems$ | async,
     tagItems: tagItems$ | async,
     userEmail: userEmail$ | async,
@@ -68,87 +70,94 @@ <h3 cdsModalHeaderHeading>
   <form [formGroup]="documentenApiMetadataForm">
     <div class="documenten-metadata-form-columns-container">
       <div class="documenten-metadata-form-column">
-        <cds-text-label class="documenten-metada-form-input">
-          {{ 'document.filename' | translate }}
-          <cds-tooltip
-            [isOpen]="false"
-            [description]="'document.filenameTooltip' | translate"
-            [align]="'bottom-left'"
-          >
-            <i class="mdi mdi-help-circle-outline"></i>
-          </cds-tooltip>
-          <input
-            [value]="filename"
-            [placeholder]="'document.filenamePlaceholder' | translate"
-            [required]="true"
-            cdsText
-            type="text"
-            id="bestandsnaam"
-            formControlName="bestandsnaam"
-          />
-        </cds-text-label>
-        <cds-text-label class="documenten-metada-form-input">
-          {{ 'document.author' | translate }}
-          <cds-tooltip
-            [isOpen]="false"
-            [description]="'document.authorTooltip' | translate"
-            [align]="'bottom-left'"
-          >
-            <i class="mdi mdi-help-circle-outline"></i>
-          </cds-tooltip>
-          <input
-            [value]="author"
-            [placeholder]="'document.authorPlaceholder' | translate"
-            [required]="true"
-            cdsText
-            id="auteur"
-            formControlName="auteur"
-          />
-        </cds-text-label>
-        <cds-text-label>
-          {{ 'document.language' | translate }}
-          <cds-tooltip
-            [isOpen]="false"
-            [description]="'document.languageTooltip' | translate"
-            [align]="'bottom-left'"
-          >
-            <i class="mdi mdi-help-circle-outline"></i>
-          </cds-tooltip>
-        </cds-text-label>
-        <div class="documenten-metada-form-input">
-          <cds-dropdown
-            *ngIf="obs.languageItems"
-            [disabled]="obs.disabled || (languageDisabled$ | async)"
-            [appendInline]="true"
-            [placeholder]="'document.languagePlaceholder' | translate"
-            id="language"
-            (selected)="languageSelected($event)"
-          >
-            <cds-dropdown-list [items]="obs.languageItems || []"></cds-dropdown-list>
-          </cds-dropdown>
-        </div>
-        <cds-label>
-          {{ 'document.confidentialityLevel' | translate }}
-          <cds-tooltip
-            [isOpen]="false"
-            [description]="'document.confidentialityLevelTooltip' | translate"
-            [align]="'bottom-left'"
-          >
-            <i class="mdi mdi-help-circle-outline"></i>
-          </cds-tooltip>
-        </cds-label>
-        <div class="documenten-metada-form-input">
-          <cds-dropdown
-            [placeholder]="'document.confidentialityPlaceholder' | translate"
-            id="vertrouwelijkheidaanduiding"
-            [appendInline]="true"
-            [disabled]="obs.disabled || (confidentialityLevelDisabled$ | async)"
-            (selected)="confidentialityLevelSelected($event)"
-          >
-            <cds-dropdown-list [items]="confidentialityLevelItems$ | async"></cds-dropdown-list>
-          </cds-dropdown>
-        </div>
-        <ng-container *ngIf="{documentTypeItems: documentTypeItems$ | async} as obs">
+        @if (!hideFields.includes('bestandsnaam')) {
+          <cds-text-label class="documenten-metada-form-input">
+            {{ 'document.filename' | translate }}
+            <cds-tooltip
+              [isOpen]="false"
+              [description]="'document.filenameTooltip' | translate"
+              [align]="'bottom-left'"
+            >
+              <i class="mdi mdi-help-circle-outline"></i>
+            </cds-tooltip>
+            <input
+              [value]="defaultValues.bestandsnaam"
+              [placeholder]="'document.filenamePlaceholder' | translate"
+              cdsText
+              type="text"
+              id="bestandsnaam"
+              formControlName="bestandsnaam"
+            />
+          </cds-text-label>
+        }
+        @if (!hideFields.includes('auteur')) {
+          <cds-text-label class="documenten-metada-form-input">
+            {{ 'document.author' | translate }}
+            <cds-tooltip
+              [isOpen]="false"
+              [description]="'document.authorTooltip' | translate"
+              [align]="'bottom-left'"
+            >
+              <i class="mdi mdi-help-circle-outline"></i>
+            </cds-tooltip>
+            <input
+              [value]="defaultValues.auteur"
+              [placeholder]="'document.authorPlaceholder' | translate"
+              [required]="true"
+              cdsText
+              id="auteur"
+              formControlName="auteur"
+            />
+          </cds-text-label>
+        }
+        @if (!hideFields.includes('taal')) {
+          <cds-text-label>
+            {{ 'document.language' | translate }}
+            <cds-tooltip
+              [isOpen]="false"
+              [description]="'document.languageTooltip' | translate"
+              [align]="'bottom-left'"
+            >
+              <i class="mdi mdi-help-circle-outline"></i>
+            </cds-tooltip>
+          </cds-text-label>
+          <div class="documenten-metada-form-input">
+            <cds-dropdown
+              [disabled]="obs.disabled || (languageDisabled$ | async)"
+              [appendInline]="true"
+              [placeholder]="'document.languagePlaceholder' | translate"
+              id="language"
+              (selected)="languageSelected($event)"
+            >
+              <cds-dropdown-list [items]="obs.languageItems || []"></cds-dropdown-list>
+            </cds-dropdown>
+          </div>
+        }
+        @if (!hideFields.includes('vertrouwelijkheidaanduiding')) {
+          <cds-label>
+            {{ 'document.confidentialityLevel' | translate }}
+            <cds-tooltip
+              [isOpen]="false"
+              [description]="'document.confidentialityLevelTooltip' | translate"
+              [align]="'bottom-left'"
+            >
+              <i class="mdi mdi-help-circle-outline"></i>
+            </cds-tooltip>
+          </cds-label>
+          <div class="documenten-metada-form-input">
+            <cds-combo-box
+              [placeholder]="'document.confidentialityPlaceholder' | translate"
+              id="vertrouwelijkheidaanduiding"
+              [appendInline]="true"
+              [disabled]="obs.disabled || (confidentialityLevelDisabled$ | async)"
+              (selected)="confidentialityLevelSelected($event)"
+              (clear)="confidentialityLevelFormControl.setValue(null)"
+            >
+              <cds-dropdown-list [items]="obs.confidentialityLevelItems || []"></cds-dropdown-list>
+            </cds-combo-box>
+          </div>
+        }
+        @if (!hideFields.includes('informatieobjecttype')) {
           <cds-label>
             {{ 'document.informatieobjecttype' | translate }}
             <cds-tooltip
@@ -170,30 +179,32 @@ <h3 cdsModalHeaderHeading>
               <cds-dropdown-list [items]="obs.documentTypeItems || []"></cds-dropdown-list>
             </cds-dropdown>
           </div>
-        </ng-container>
-        <cds-text-label name="'additionalDate'">
-          {{ 'document.additionalDate' | translate }}
-          <cds-tooltip
-            [isOpen]="false"
-            [description]="'document.additionalDateTooltip' | translate"
-            [align]="'bottom-left'"
-          >
-            <i class="mdi mdi-help-circle-outline"></i>
-          </cds-tooltip>
-        </cds-text-label>
-        <cds-radio-group [orientation]="'horizontal'" class="documenten-metada-form-input">
-          <cds-radio
-            *ngFor="let option of ADDITONAL_DOCUMENT_DATE_OPTIONS"
-            [value]="option.value"
-            [checked]="obs.additionalDate === option.value"
-            [required]="true"
-            (click)="setAdditionalDate(option.value)"
-            name="radio-inline"
-          >
-            {{ option.translationKey | translate }}
-          </cds-radio>
-        </cds-radio-group>
-        @if (supportsTrefwoorden) {
+        }
+        @if (!hideFields.includes('aanvullendeDatum')) {
+          <cds-text-label name="'additionalDate'">
+            {{ 'document.additionalDate' | translate }}
+            <cds-tooltip
+              [isOpen]="false"
+              [description]="'document.additionalDateTooltip' | translate"
+              [align]="'bottom-left'"
+            >
+              <i class="mdi mdi-help-circle-outline"></i>
+            </cds-tooltip>
+          </cds-text-label>
+          <cds-radio-group [orientation]="'horizontal'" class="documenten-metada-form-input">
+            <cds-radio
+              *ngFor="let option of ADDITONAL_DOCUMENT_DATE_OPTIONS"
+              [value]="option.value"
+              [checked]="obs.additionalDate === option.value"
+              [required]="true"
+              (click)="setAdditionalDate(option.value)"
+              name="radio-inline"
+            >
+              {{ option.translationKey | translate }}
+            </cds-radio>
+          </cds-radio-group>
+        }
+        @if (supportsTrefwoorden && !hideFields.includes('trefwoorden')) {
           <cds-text-label>
             {{ 'document.tags' | translate }}
             <cds-tooltip
@@ -208,7 +219,7 @@ <h3 cdsModalHeaderHeading>
             <cds-combo-box
               [type]="'multi'"
               [placeholder]="'document.tagsPlaceholder' | translate"
-              [disabled]="obs.disabled || obs.tagItems.length === 0"
+              [disabled]="obs.disabled || obs.tagItems?.length === 0"
               [appendInline]="true"
               (selected)="tagsSelected($event)"
             >
@@ -220,99 +231,110 @@ <h3 cdsModalHeaderHeading>
       </div>
 
       <div class="documenten-metadata-form-column">
-        <cds-text-label>
-          {{ 'document.inputTitle' | translate }}
-          <input
-            [placeholder]="'document.inputTitlePlaceholder' | translate"
-            [required]="true"
-            cdsText
-            class="documenten-metada-form-input"
-            id="titel"
-            formControlName="titel"
-          />
-          <cds-tooltip
-            [isOpen]="false"
-            [description]="'document.inputTitleTooltip' | translate"
-            [align]="'bottom'"
-          >
-            <i class="mdi mdi-help-circle-outline"></i>
-          </cds-tooltip>
-        </cds-text-label>
-        <cds-textarea-label>
-          {{ 'document.inputDescription' | translate }}
-          <textarea
-            [placeholder]="'document.inputDescriptionPlaceholder' | translate"
-            [required]="true"
-            [rows]="5"
-            cdsTextArea
-            class="documenten-metada-form-description-input documenten-metada-form-input"
-            id="beschrijving"
-            formControlName="beschrijving"
-          ></textarea>
-          <cds-tooltip
-            [isOpen]="false"
-            [description]="'document.inputDescriptionTooltip' | translate"
-            [align]="'bottom'"
-          >
-            <i class="mdi mdi-help-circle-outline"></i>
-          </cds-tooltip>
-        </cds-textarea-label>
-        <cds-label>
-          {{ 'document.creationDate' | translate }}
-          <cds-tooltip
-            [isOpen]="false"
-            [description]="'document.creationDateTooltip' | translate"
-            [align]="'bottom'"
-          >
-            <i class="mdi mdi-help-circle-outline"></i>
-          </cds-tooltip>
+        @if (!hideFields.includes('titel')) {
+          <cds-text-label>
+            {{ 'document.inputTitle' | translate }}
+            <input
+              [placeholder]="'document.inputTitlePlaceholder' | translate"
+              [required]="true"
+              cdsText
+              class="documenten-metada-form-input"
+              id="titel"
+              formControlName="titel"
+            />
+            <cds-tooltip
+              [isOpen]="false"
+              [description]="'document.inputTitleTooltip' | translate"
+              [align]="'bottom'"
+            >
+              <i class="mdi mdi-help-circle-outline"></i>
+            </cds-tooltip>
+          </cds-text-label>
+        }
+        @if (!hideFields.includes('beschrijving')) {
+          <cds-textarea-label>
+            {{ 'document.inputDescription' | translate }}
+            <textarea
+              [placeholder]="'document.inputDescriptionPlaceholder' | translate"
+              [required]="false"
+              [rows]="5"
+              cdsTextArea
+              class="documenten-metada-form-description-input documenten-metada-form-input"
+              id="beschrijving"
+              formControlName="beschrijving"
+            ></textarea>
+            <cds-tooltip
+              [isOpen]="false"
+              [description]="'document.inputDescriptionTooltip' | translate"
+              [align]="'bottom'"
+            >
+              <i class="mdi mdi-help-circle-outline"></i>
+            </cds-tooltip>
+          </cds-textarea-label>
+        }
+        @if (!hideFields.includes('creatiedatum')) {
+          <cds-label>
+            {{ 'document.creationDate' | translate }}
+            <cds-tooltip
+              [isOpen]="false"
+              [description]="'document.creationDateTooltip' | translate"
+              [align]="'bottom'"
+            >
+              <i class="mdi mdi-help-circle-outline"></i>
+            </cds-tooltip>
+            <div class="documenten-metada-form-input">
+              <cds-date-picker
+                [placeholder]="'DD-MM-YYYY'"
+                [dateFormat]="'d-m-Y'"
+                id="creatiedatum"
+                formControlName="creatiedatum"
+              >
+              </cds-date-picker>
+            </div>
+          </cds-label>
+        }
+        @if (!hideFields.includes('status')) {
+          <cds-label>
+            {{ 'document.status' | translate }}
+            <cds-tooltip
+              [isOpen]="false"
+              [description]="'document.statusTooltip' | translate"
+              [align]="'bottom'"
+            >
+              <i class="mdi mdi-help-circle-outline"></i>
+            </cds-tooltip>
+          </cds-label>
           <div class="documenten-metada-form-input">
-            <cds-date-picker
-              [placeholder]="'DD-MM-YYYY'"
-              [dateFormat]="'d-m-Y'"
-              id="creatiedatum"
-              formControlName="creatiedatum"
+            <cds-combo-box
+              [placeholder]="'document.statusPlaceholder' | translate"
+              [disabled]="obs.disabled || (statusDisabled$ | async)"
+              id="status"
+              [appendInline]="true"
+              (selected)="statusSelected($event)"
+              (clear)="statusFormControl.setValue(null)"
             >
-            </cds-date-picker>
+              <cds-dropdown-list [items]="obs.statusItems || []"></cds-dropdown-list>
+            </cds-combo-box>
           </div>
-        </cds-label>
-        <cds-label>
-          {{ 'document.status' | translate }}
-          <cds-tooltip
-            [isOpen]="false"
-            [description]="'document.statusTooltip' | translate"
-            [align]="'bottom'"
-          >
-            <i class="mdi mdi-help-circle-outline"></i>
-          </cds-tooltip>
-        </cds-label>
-        <div class="documenten-metada-form-input">
-          <cds-dropdown
-            [placeholder]="'document.statusPlaceholder' | translate"
-            [disabled]="obs.disabled || (statusDisabled$ | async)"
-            id="status"
-            [appendInline]="true"
-            (selected)="statusSelected($event)"
-          >
-            <cds-dropdown-list [items]="obs.statusItems || []"></cds-dropdown-list>
-          </cds-dropdown>
-        </div>
-        <cds-date-picker
-          *ngIf="obs.additionalDate === 'received'"
-          [label]="'document.additionalDate' | translate"
-          [placeholder]="'DD-MM-YYYY'"
-          [dateFormat]="'d-m-Y'"
-          id="ontvangstdatum"
-          formControlName="ontvangstdatum"
-        ></cds-date-picker>
-        <cds-date-picker
-          *ngIf="obs.additionalDate === 'sent'"
-          [label]="'document.additionalDate' | translate"
-          [placeholder]="'DD-MM-YYYY'"
-          [dateFormat]="'d-m-Y'"
-          id="verzenddatum"
-          formControlName="verzenddatum"
-        ></cds-date-picker>
+        }
+        @if (!hideFields.includes('aanvullendeDatum')) {
+          <cds-date-picker
+            *ngIf="obs.additionalDate === 'received'"
+            [label]="'document.additionalDate' | translate"
+            [placeholder]="'DD-MM-YYYY'"
+            [dateFormat]="'d-m-Y'"
+            id="ontvangstdatum"
+            formControlName="ontvangstdatum"
+          ></cds-date-picker>
+          <cds-date-picker
+            *ngIf="obs.additionalDate === 'sent'"
+            [label]="'document.additionalDate' | translate"
+            [placeholder]="'DD-MM-YYYY'"
+            [dateFormat]="'d-m-Y'"
+            id="verzenddatum"
+            formControlName="verzenddatum"
+          ></cds-date-picker>
+        }
       </div>
     </div>
   </form>
diff --git a/projects/valtimo/zgw/src/lib/modules/documenten-api/components/documenten-api-metadata-modal/documenten-api-metadata-modal.component.ts b/projects/valtimo/zgw/src/lib/modules/documenten-api/components/documenten-api-metadata-modal/documenten-api-metadata-modal.component.ts
index d815eb4b0..0c95207a4 100644
--- a/projects/valtimo/zgw/src/lib/modules/documenten-api/components/documenten-api-metadata-modal/documenten-api-metadata-modal.component.ts
+++ b/projects/valtimo/zgw/src/lib/modules/documenten-api/components/documenten-api-metadata-modal/documenten-api-metadata-modal.component.ts
@@ -14,16 +14,7 @@
  * limitations under the License.
  */
 
-import {
-  Component,
-  EventEmitter,
-  Input,
-  OnChanges,
-  OnDestroy,
-  OnInit,
-  Output,
-  ViewChild,
-} from '@angular/core';
+import {Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild} from '@angular/core';
 
 import {
   AdditionalDocumentDate,
@@ -83,6 +74,8 @@ import {
   TooltipModule,
 } from 'carbon-components-angular';
 import {DocumentenApiTagService} from '../../services/documenten-api-tag.service';
+import moment from 'moment';
+import {DocumentenApiUploadFieldDefaultValues} from "../../models/documenten-api-upload-field.model";
 
 @Component({
   selector: 'valtimo-documenten-api-metadata-modal',
@@ -109,15 +102,14 @@ import {DocumentenApiTagService} from '../../services/documenten-api-tag.service
     VModalModule,
   ],
 })
-export class DocumentenApiMetadataModalComponent implements OnInit, OnChanges, OnDestroy {
+export class DocumentenApiMetadataModalComponent implements OnInit, OnDestroy {
   @ViewChild('metadataModal') metadataModal: VModalComponent;
 
   @Input() disabled$!: Observable<boolean>;
   @Input() file$!: Observable<any>;
 
-  @Input() author: string;
-  @Input() confidentialityLevel: string;
-  @Input() description: string;
+  @Input() hideFields: Array<string> = [];
+  @Input() defaultValues: DocumentenApiUploadFieldDefaultValues = {};
   @Input() set disableAuthor(value: boolean) {
     if (value) {
       this.auteur.disable();
@@ -174,18 +166,15 @@ export class DocumentenApiMetadataModalComponent implements OnInit, OnChanges, O
       this.statusFormControl.enable();
     }
   }
-  @Input() set disableTrefwoorden(value: boolean) {
+  @Input() supportsTrefwoorden = false;
+  @Input() set disableCreationDate(value: boolean) {
     if (value) {
-      this.tagFormControl.disable();
+      this.creatiedatum.disable();
     } else {
-      this.tagFormControl.enable();
+      this.creatiedatum.enable();
     }
   }
-  @Input() documentTitle = '';
-  @Input() documentType: string;
-  @Input() filename: string;
   @Input() isEditMode: boolean;
-  @Input() language: string;
 
   public readonly open$ = new BehaviorSubject<boolean>(false);
 
@@ -199,21 +188,19 @@ export class DocumentenApiMetadataModalComponent implements OnInit, OnChanges, O
     }
   }
 
-  @Input() status: string;
-  @Input() supportsTrefwoorden = false;
-
   @Output() metadata: EventEmitter<DocumentenApiMetadata> = new EventEmitter();
   @Output() modalClose: EventEmitter<boolean> = new EventEmitter();
 
+  public filenameExtension: string = '';
   public documentenApiMetadataForm: FormGroup = this.fb.group({
-    bestandsnaam: this.fb.control('', Validators.required),
+    bestandsnaam: this.fb.control(''),
     titel: this.fb.control('', Validators.required),
     auteur: this.fb.control('', Validators.required),
-    beschrijving: this.fb.control('', Validators.required),
+    beschrijving: this.fb.control(''),
     taal: this.fb.control('', Validators.required),
     informatieobjecttype: this.fb.control('', Validators.required),
-    status: this.fb.control('', Validators.required),
-    vertrouwelijkheidaanduiding: this.fb.control('', Validators.required),
+    status: this.fb.control(''),
+    vertrouwelijkheidaanduiding: this.fb.control(''),
     creatiedatum: this.fb.control('', Validators.required),
     ontvangstdatum: this.fb.control(''),
     verzenddatum: this.fb.control(''),
@@ -265,6 +252,10 @@ export class DocumentenApiMetadataModalComponent implements OnInit, OnChanges, O
     return this.documentenApiMetadataForm.get('trefwoorden');
   }
 
+  public get creatiedatum(): AbstractControl<string> {
+    return this.documentenApiMetadataForm.get('creatiedatum');
+  }
+
   public get titel(): AbstractControl<string> {
     return this.documentenApiMetadataForm.get('titel');
   }
@@ -361,12 +352,8 @@ export class DocumentenApiMetadataModalComponent implements OnInit, OnChanges, O
     )
   );
 
-  public readonly documentDefinitionName$: Observable<string> = from(
-    this.route.params.pipe(map(params => params?.documentDefinitionName))
-  );
-
   public readonly tagItems$: Observable<Array<ListItem>> = combineLatest([
-    this.documentDefinitionName$,
+    this.valtimoModalService.documentDefinitionName$,
     this.tagFormControl.valueChanges.pipe(startWith(this.tagFormControl.value)),
   ]).pipe(
     filter(([documentDefinitionName]) => !!documentDefinitionName),
@@ -457,14 +444,13 @@ export class DocumentenApiMetadataModalComponent implements OnInit, OnChanges, O
   public ngOnInit(): void {
     this.openFileSubscription();
     this.openDisabledSubscription();
-  }
-
-  public ngOnChanges(): void {
-    this.openFileSubscription();
+    this.openFilenameSubscription();
+    this.openDocumentDefinitionSubscription();
   }
 
   public ngOnDestroy(): void {
     this._subscriptions.unsubscribe();
+    this._fileSubscription?.unsubscribe();
     this.isDefinitiveStatus$.next(false);
   }
 
@@ -480,18 +466,18 @@ export class DocumentenApiMetadataModalComponent implements OnInit, OnChanges, O
     this.tagFormControl.patchValue(event.filter(tag => tag.selected).map(tag => tag.id));
   }
 
-  public confidentialityLevelSelected(event: {item: {id: string}}) {
-    if (event.item.id) {
+  public confidentialityLevelSelected(event: {id: string}) {
+    if (event.id) {
       this.documentenApiMetadataForm.patchValue({
-        vertrouwelijkheidaanduiding: event.item.id,
+        vertrouwelijkheidaanduiding: event.id,
       });
     }
   }
 
-  public statusSelected(event: {item: {id: string}}) {
-    if (event.item.id) {
+  public statusSelected(event: {id: string}) {
+    if (event.id) {
       this.documentenApiMetadataForm.patchValue({
-        status: event.item.id,
+        status: event.id,
       });
     }
   }
@@ -508,15 +494,11 @@ export class DocumentenApiMetadataModalComponent implements OnInit, OnChanges, O
     this.prefillFilenameAndAuthor();
     if (file) {
       const {
-        bestandsnaam,
-        titel,
-        auteur,
         beschrijving,
         taal,
         informatieobjecttype,
         status,
         vertrouwelijkheidaanduiding,
-        creatiedatum,
         ontvangstdatum,
         verzenddatum,
         trefwoorden,
@@ -526,22 +508,19 @@ export class DocumentenApiMetadataModalComponent implements OnInit, OnChanges, O
       else if (ontvangstdatum) this.additionalDocumentDate$.next('received');
       else this.additionalDocumentDate$.next('neither');
 
-      const prefillStatus = this.status || status;
+      const prefillStatus = this.defaultValues.status || status;
       const validPrefillStatus = this.STATUSES.includes(prefillStatus) ? prefillStatus : '';
 
       this.documentenApiMetadataForm.patchValue({
-        bestandsnaam: this.filename || bestandsnaam,
-        titel: this.documentTitle || titel,
-        auteur: this.author || auteur,
-        beschrijving: this.description || beschrijving,
-        taal: this.language || taal,
-        informatieobjecttype: this.documentType || informatieobjecttype,
+        beschrijving: beschrijving || this.defaultValues.beschrijving,
+        taal: taal || this.defaultValues.taal,
+        informatieobjecttype: informatieobjecttype || this.defaultValues.informatieobjecttype,
         status: validPrefillStatus,
-        vertrouwelijkheidaanduiding: this.confidentialityLevel || vertrouwelijkheidaanduiding,
-        creatiedatum,
+        vertrouwelijkheidaanduiding:
+          vertrouwelijkheidaanduiding || this.defaultValues.vertrouwelijkheidaanduiding,
         ontvangstdatum,
         verzenddatum,
-        trefwoorden,
+        trefwoorden: trefwoorden || this.defaultValues.trefwoorden,
       });
     }
   }
@@ -580,26 +559,51 @@ export class DocumentenApiMetadataModalComponent implements OnInit, OnChanges, O
       combineLatest([this.file$, this.userEmail$])
         .pipe(
           tap(([file, userEmail]) => {
+            const filename = file?.bestandsnaam || this.defaultValues.bestandsnaam || file?.name;
+            this.filenameExtension = filename?.split('.')?.pop() || '';
+            if (this.filenameExtension.length === filename?.length) {
+              this.filenameExtension = '';
+            }
             this.documentenApiMetadataForm.patchValue({
-              bestandsnaam: this.filename || file?.name || file?.bestandsnaam,
-              auteur: this.author || userEmail,
+              bestandsnaam: filename,
+              auteur: file?.auteur || this.defaultValues.auteur || userEmail,
+              creatiedatum: file?.creatiedatum || new Date(Date.now()),
+              titel:
+                file?.titel ||
+                this.defaultValues.titel ||
+                this.filenameToTitle(file?.name || this.defaultValues.bestandsnaam),
             });
+            if (this.areAllFieldsHidden()) {
+              this.save();
+            }
           })
         )
         .subscribe()
     );
   }
 
+  private filenameToTitle(filename?: string) {
+    if (!filename) {
+      return null;
+    }
+
+    filename = filename.replace(/\.[^/.]+$/, '').replace(/[^a-zA-Z0-9]+/g, ' ');
+    return filename.charAt(0).toUpperCase() + filename.slice(1);
+  }
+
   private formatDate(controlName: string): void {
     const control = this.documentenApiMetadataForm.controls[controlName];
     if (control.value) {
-      const date = new Date(control.value);
       this.documentenApiMetadataForm.patchValue({
-        [controlName]: `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`,
+        [controlName]: this.toFormattedDate(control.value),
       });
     }
   }
 
+  private toFormattedDate(date: any): string {
+    return moment(new Date(date)).format('YYYY-MM-DD');
+  }
+
   private openFileSubscription(): void {
     this._fileSubscription?.unsubscribe();
     if (this.file$) {
@@ -626,7 +630,52 @@ export class DocumentenApiMetadataModalComponent implements OnInit, OnChanges, O
     );
   }
 
+  private openFilenameSubscription() {
+    this._subscriptions.add(
+      this.bestandsnaam.valueChanges.subscribe(bestandsnaam => {
+        if (bestandsnaam && this.filenameExtension) {
+          let correctBestandsnaam =
+            bestandsnaam.replace(/\.[^/.]+$/, '') + '.' + this.filenameExtension;
+          if (correctBestandsnaam != bestandsnaam) {
+            this.documentenApiMetadataForm.patchValue({
+              bestandsnaam: correctBestandsnaam,
+            });
+          }
+        }
+      })
+    );
+  }
+
+  private openDocumentDefinitionSubscription() {
+    this._subscriptions.add(
+      this.route?.params
+        .pipe(
+          map(params => params?.documentDefinitionName),
+          filter(documentDefinitionName => documentDefinitionName)
+        )
+        .subscribe(documentDefinitionName => {
+          this.valtimoModalService.setDocumentDefinitionName(documentDefinitionName);
+        })
+    );
+  }
+
   private setAdditionalDate(value: AdditionalDocumentDate): void {
     this.additionalDocumentDate$.next(value);
   }
+
+  private areAllFieldsHidden(): boolean {
+    return (
+      this.hideFields.includes('aanvullendeDatum') &&
+      this.hideFields.includes('auteur') &&
+      this.hideFields.includes('vertrouwelijkheidaanduiding') &&
+      this.hideFields.includes('creatiedatum') &&
+      this.hideFields.includes('beschrijving') &&
+      this.hideFields.includes('titel') &&
+      this.hideFields.includes('informatieobjecttype') &&
+      this.hideFields.includes('bestandsnaam') &&
+      this.hideFields.includes('taal') &&
+      this.hideFields.includes('status') &&
+      this.hideFields.includes('trefwoorden')
+    );
+  }
 }
diff --git a/projects/valtimo/zgw/src/lib/modules/documenten-api/components/documenten-api-tags/documenten-api-tags.component.ts b/projects/valtimo/zgw/src/lib/modules/documenten-api/components/documenten-api-tags/documenten-api-tags.component.ts
index 7ddeb6026..3bf1042bf 100644
--- a/projects/valtimo/zgw/src/lib/modules/documenten-api/components/documenten-api-tags/documenten-api-tags.component.ts
+++ b/projects/valtimo/zgw/src/lib/modules/documenten-api/components/documenten-api-tags/documenten-api-tags.component.ts
@@ -38,7 +38,6 @@ import {
   Pagination,
   ViewType,
 } from '@valtimo/components';
-import {DocumentenApiColumnModalComponent} from '../documenten-api-column-modal/documenten-api-column-modal.component';
 import {CommonModule} from '@angular/common';
 import {TranslateModule} from '@ngx-translate/core';
 import {ButtonModule, IconModule, TagModule} from 'carbon-components-angular';
@@ -55,7 +54,6 @@ import {Page} from '@valtimo/document';
   standalone: true,
   imports: [
     CommonModule,
-    DocumentenApiColumnModalComponent,
     CarbonListModule,
     TranslateModule,
     ConfirmationModalModule,
diff --git a/projects/valtimo/zgw/src/lib/modules/documenten-api/components/documenten-api-upload-field-model/documenten-api-upload-field-modal.component.html b/projects/valtimo/zgw/src/lib/modules/documenten-api/components/documenten-api-upload-field-model/documenten-api-upload-field-modal.component.html
new file mode 100644
index 000000000..7807dd28f
--- /dev/null
+++ b/projects/valtimo/zgw/src/lib/modules/documenten-api/components/documenten-api-upload-field-model/documenten-api-upload-field-modal.component.html
@@ -0,0 +1,115 @@
+<!--
+  ~ Copyright 2015-2024 Ritense BV, the Netherlands.
+  ~
+  ~ Licensed under EUPL, Version 1.2 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" basis,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+
+<cds-modal
+  valtimoCdsModal
+  *ngIf="{
+    disabled: disabled$ | async,
+    languageItems: languageItems$ | async,
+    confidentialityLevelItems: confidentialityLevelItems$ | async,
+    statusItems: statusItems$ | async,
+    documentTypeItems: documentTypeItems$ | async,
+  } as obs"
+  [open]="type !== 'closed'"
+  size="sm"
+>
+  <cds-modal-header showCloseButton="true" (closeSelect)="onClose()">
+    <h3 cdsModalHeaderHeading>
+      {{
+        ('zgw.uploadFields.editModal.header' | translate) +
+          ' - ' +
+          ('zgw.uploadFields.keys.' + key | translate)
+      }}
+    </h3>
+  </cds-modal-header>
+
+  <section cdsModalContent>
+    <form [formGroup]="formGroup" class="uploadField-form">
+      @if (key === 'taal') {
+        <cds-combo-box
+          formControlName="selectedDefaultValue"
+          [label]="'zgw.uploadFields.fields.defaultValue' | translate"
+          [dropUp]="false"
+          (clear)="clear()"
+        >
+          <cds-dropdown-list [items]="obs.languageItems"></cds-dropdown-list>
+        </cds-combo-box>
+      } @else if (key === 'vertrouwelijkheidaanduiding') {
+        <cds-combo-box
+          formControlName="selectedDefaultValue"
+          [label]="'zgw.uploadFields.fields.defaultValue' | translate"
+          [dropUp]="false"
+          (clear)="clear()"
+        >
+          <cds-dropdown-list [items]="obs.confidentialityLevelItems"></cds-dropdown-list>
+        </cds-combo-box>
+      } @else if (key === 'status') {
+        <cds-combo-box
+          formControlName="selectedDefaultValue"
+          [label]="'zgw.uploadFields.fields.defaultValue' | translate"
+          [dropUp]="false"
+          (clear)="clear()"
+        >
+          <cds-dropdown-list [items]="obs.statusItems"></cds-dropdown-list>
+        </cds-combo-box>
+      } @else if (key === 'informatieobjecttype') {
+        <cds-combo-box
+          formControlName="selectedDefaultValue"
+          [label]="'zgw.uploadFields.fields.defaultValue' | translate"
+          [dropUp]="false"
+          (clear)="clear()"
+        >
+          <cds-dropdown-list [items]="obs.documentTypeItems"></cds-dropdown-list>
+        </cds-combo-box>
+      } @else if (
+        key === 'filename' ||
+        key === 'bestandsnaam' ||
+        key === 'titel' ||
+        key === 'beschrijving' ||
+        key === 'trefwoorden'
+      ) {
+        <cds-label>
+          {{ 'zgw.uploadFields.fields.defaultValue' | translate }}
+          <input cdsText formControlName="defaultValue" />
+        </cds-label>
+      }
+      <div class="toggle-group">
+        <cds-toggle
+          formControlName="visible"
+          [label]="'zgw.uploadFields.fields.visible' | translate"
+          [onText]="'interface.on' | translate"
+          [offText]="'interface.off' | translate"
+        ></cds-toggle>
+        <cds-toggle
+          formControlName="readonly"
+          [label]="'zgw.uploadFields.fields.readonly' | translate"
+          [onText]="'interface.on' | translate"
+          [offText]="'interface.off' | translate"
+        ></cds-toggle>
+      </div>
+    </form>
+  </section>
+
+  <cds-modal-footer>
+    <button cdsButton="secondary" (click)="onClose()" [disabled]="obs.disabled">
+      {{ 'interface.cancel' | translate }}
+    </button>
+
+    <button cdsButton="primary" [disabled]="invalid || obs.disabled" (click)="saveUploadField()">
+      {{ 'interface.save' | translate }}
+    </button>
+  </cds-modal-footer>
+</cds-modal>
diff --git a/projects/valtimo/zgw/src/lib/modules/documenten-api/components/documenten-api-upload-field-model/documenten-api-upload-field-modal.component.scss b/projects/valtimo/zgw/src/lib/modules/documenten-api/components/documenten-api-upload-field-model/documenten-api-upload-field-modal.component.scss
new file mode 100644
index 000000000..f8c352403
--- /dev/null
+++ b/projects/valtimo/zgw/src/lib/modules/documenten-api/components/documenten-api-upload-field-model/documenten-api-upload-field-modal.component.scss
@@ -0,0 +1,21 @@
+/*!
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.toggle-group {
+  display: flex;
+  flex-direction: column;
+  margin-top: 16px;
+}
diff --git a/projects/valtimo/zgw/src/lib/modules/documenten-api/components/documenten-api-upload-field-model/documenten-api-upload-field-modal.component.ts b/projects/valtimo/zgw/src/lib/modules/documenten-api/components/documenten-api-upload-field-model/documenten-api-upload-field-modal.component.ts
new file mode 100644
index 000000000..07ce25ec1
--- /dev/null
+++ b/projects/valtimo/zgw/src/lib/modules/documenten-api/components/documenten-api-upload-field-model/documenten-api-upload-field-modal.component.ts
@@ -0,0 +1,241 @@
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  OnDestroy,
+  Output,
+} from '@angular/core';
+import {
+  CONFIDENTIALITY_LEVELS,
+  DocumentenApiColumnModalTypeCloseEvent,
+  LANGUAGE_ITEMS,
+  STATUS_ITEMS,
+} from '../../models';
+import {BehaviorSubject, combineLatest, map, Observable, of, Subscription, switchMap} from 'rxjs';
+import {CARBON_CONSTANTS} from '@valtimo/components';
+import {AbstractControl, FormBuilder, ReactiveFormsModule, Validators} from '@angular/forms';
+import {
+  ButtonModule,
+  CheckboxModule,
+  ComboBoxModule,
+  InputModule,
+  ListItem,
+  ModalModule,
+  ToggleModule,
+} from 'carbon-components-angular';
+import {TranslateModule, TranslateService} from '@ngx-translate/core';
+import {CommonModule} from '@angular/common';
+import {DocumentenApiDocumentService} from '../../services';
+import {DocumentenApiUploadField} from '../../models/documenten-api-upload-field.model';
+import {DocumentService} from '@valtimo/document';
+
+@Component({
+  selector: 'valtimo-documenten-api-upload-field-modal',
+  styleUrl: './documenten-api-upload-field-modal.component.scss',
+  templateUrl: './documenten-api-upload-field-modal.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    CommonModule,
+    ModalModule,
+    TranslateModule,
+    InputModule,
+    ReactiveFormsModule,
+    ButtonModule,
+    ToggleModule,
+    CheckboxModule,
+    ComboBoxModule,
+  ],
+})
+export class DocumentenApiUploadFieldModalComponent implements OnDestroy {
+  @Input() public documentDefinitionName!: string;
+  @Input() public type!: string;
+  protected key: string;
+
+  @Input() public set prefill(field: DocumentenApiUploadField) {
+    if (field) {
+      this.key = field.key;
+      this.defaultValue.setValue(field.defaultValue);
+      this.visible.setValue(field.visible);
+      this.readonly.setValue(field.readonly);
+    }
+  }
+
+  @Output() public closeModalEvent = new EventEmitter<DocumentenApiColumnModalTypeCloseEvent>();
+
+  public readonly formGroup = this.fb.group({
+    defaultValue: this.fb.control('', [Validators.maxLength(256)]),
+    selectedDefaultValue: this.fb.control(null),
+    visible: this.fb.control(true, [Validators.required]),
+    readonly: this.fb.control(false, [Validators.required]),
+  });
+
+  public readonly disabled$ = new BehaviorSubject<boolean>(false);
+
+  public readonly confidentialityLevelItems$: Observable<Array<ListItem>> = combineLatest([
+    this.defaultValue.valueChanges,
+    this.translateService.stream('key'),
+  ]).pipe(
+    map(([selectedItem]) =>
+      CONFIDENTIALITY_LEVELS.map(item => ({
+        id: item,
+        content: this.translateService.instant(`document.${item}`),
+        selected: selectedItem === item,
+      }))
+    )
+  );
+  public readonly languageItems$: Observable<Array<ListItem>> = combineLatest([
+    this.defaultValue.valueChanges,
+    this.translateService.stream('key'),
+  ]).pipe(
+    map(([selectedItem]) =>
+      LANGUAGE_ITEMS.map(item => ({
+        id: item,
+        content: this.translateService.instant(`document.${item}`),
+        selected: selectedItem === item,
+      }))
+    )
+  );
+  public readonly statusItems$: Observable<Array<ListItem>> = combineLatest([
+    this.defaultValue.valueChanges,
+    this.translateService.stream('key'),
+  ]).pipe(
+    map(([selectedItem]) =>
+      STATUS_ITEMS.map(item => ({
+        id: item,
+        content: this.translateService.instant(`document.${item}`),
+        selected: selectedItem === item,
+      }))
+    )
+  );
+  public readonly documentTypeItems$: Observable<Array<ListItem>> = combineLatest([
+    this.defaultValue.valueChanges,
+    this.translateService.stream('key'),
+  ]).pipe(
+    switchMap(([selectedItem]) =>
+      combineLatest([
+        this.documentService.getDocumentTypes(this.documentDefinitionName),
+        of(selectedItem),
+      ])
+    ),
+    map(([documentTypes, selectedItem]) =>
+      documentTypes.map(item => ({
+        id: item.url,
+        content: item.name,
+        selected: selectedItem === item.url,
+      }))
+    )
+  );
+
+  public get defaultValue(): AbstractControl<string> {
+    return this.formGroup?.get('defaultValue');
+  }
+
+  public get selectedDefaultValue(): AbstractControl<ListItem> {
+    return this.formGroup?.get('selectedDefaultValue');
+  }
+
+  public get visible(): AbstractControl<boolean> {
+    return this.formGroup?.get('visible');
+  }
+
+  public get readonly(): AbstractControl<boolean> {
+    return this.formGroup?.get('readonly');
+  }
+
+  public get invalid(): boolean {
+    return !!this.formGroup?.invalid;
+  }
+
+  private readonly _subscriptions = new Subscription();
+
+  constructor(
+    private readonly fb: FormBuilder,
+    private readonly documentenApiDocumentService: DocumentenApiDocumentService,
+    private readonly translateService: TranslateService,
+    private readonly documentService: DocumentService
+  ) {}
+
+  public ngOnDestroy(): void {
+    this._subscriptions.unsubscribe();
+  }
+
+  public onClose(): void {
+    this.close();
+  }
+
+  public clear(): void {
+    this.selectedDefaultValue.setValue(null);
+    this.defaultValue.setValue(null);
+  }
+
+  public saveUploadField(): void {
+    this.disable();
+
+    const formField = {
+      key: this.key,
+      defaultValue: this.selectedDefaultValue?.value?.id || this.defaultValue.value,
+      visible: this.visible.value,
+      readonly: this.readonly.value,
+    } as DocumentenApiUploadField;
+
+    this.documentenApiDocumentService
+      .updateUploadField(this.documentDefinitionName, formField)
+      .subscribe({
+        next: () => {
+          this.enable();
+          this.closeAndRefresh();
+          this.resetForm();
+        },
+        error: () => {
+          this.enable(false);
+        },
+      });
+  }
+
+  private resetForm(): void {
+    this.formGroup.reset();
+  }
+
+  private disable(): void {
+    this.disabled$.next(true);
+    this.formGroup.disable();
+  }
+
+  private enable(delay = true): void {
+    setTimeout(
+      () => {
+        this.disabled$.next(false);
+        this.formGroup.enable();
+      },
+      delay ? CARBON_CONSTANTS.modalAnimationMs : 0
+    );
+  }
+
+  private close(): void {
+    this.closeModalEvent.emit('close');
+    this.resetForm();
+  }
+
+  private closeAndRefresh(): void {
+    this.closeModalEvent.emit('closeAndRefresh');
+    this.resetForm();
+  }
+}
diff --git a/projects/valtimo/zgw/src/lib/modules/documenten-api/components/documenten-api-upload-fields/documenten-api-upload-fields.component.html b/projects/valtimo/zgw/src/lib/modules/documenten-api/components/documenten-api-upload-fields/documenten-api-upload-fields.component.html
new file mode 100644
index 000000000..5ae50a759
--- /dev/null
+++ b/projects/valtimo/zgw/src/lib/modules/documenten-api/components/documenten-api-upload-fields/documenten-api-upload-fields.component.html
@@ -0,0 +1,45 @@
+<!--
+  ~ Copyright 2015-2024 Ritense BV, the Netherlands.
+  ~
+  ~ Licensed under EUPL, Version 1.2 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" basis,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+
+<ng-container
+  *ngIf="{
+    loading: loading$ | async,
+    documentUploadFields: documentUploadFields$ | async,
+    uploadFieldModalType: uploadFieldModalType$ | async,
+    documentDefinitionName: documentDefinitionName$ | async,
+    prefill: prefill$ | async,
+  } as obs"
+>
+  <valtimo-carbon-list
+    [items]="obs.documentUploadFields"
+    [fields]="FIELDS"
+    [header]="false"
+    [loading]="obs.loading"
+    [actionItems]="ACTION_ITEMS"
+  >
+    <valtimo-no-results
+      title="{{ 'zgw.uploadFields.list.noResultsTitle' | translate }}"
+      description="{{ 'zgw.uploadFields.list.noResultsDescription' | translate }}"
+    ></valtimo-no-results>
+  </valtimo-carbon-list>
+
+  <valtimo-documenten-api-upload-field-modal
+    [prefill]="obs.prefill"
+    [documentDefinitionName]="obs.documentDefinitionName"
+    [type]="obs.uploadFieldModalType"
+    (closeModalEvent)="closeModal($event)"
+  ></valtimo-documenten-api-upload-field-modal>
+</ng-container>
diff --git a/projects/valtimo/zgw/src/lib/modules/documenten-api/components/documenten-api-upload-fields/documenten-api-upload-fields.component.scss b/projects/valtimo/zgw/src/lib/modules/documenten-api/components/documenten-api-upload-fields/documenten-api-upload-fields.component.scss
new file mode 100644
index 000000000..56a64e6aa
--- /dev/null
+++ b/projects/valtimo/zgw/src/lib/modules/documenten-api/components/documenten-api-upload-fields/documenten-api-upload-fields.component.scss
@@ -0,0 +1,19 @@
+/*!
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+::ng-deep .cds-upload-field--no-margin {
+  margin: 0;
+}
diff --git a/projects/valtimo/zgw/src/lib/modules/documenten-api/components/documenten-api-upload-fields/documenten-api-upload-fields.component.ts b/projects/valtimo/zgw/src/lib/modules/documenten-api/components/documenten-api-upload-fields/documenten-api-upload-fields.component.ts
new file mode 100644
index 000000000..72320c440
--- /dev/null
+++ b/projects/valtimo/zgw/src/lib/modules/documenten-api/components/documenten-api-upload-fields/documenten-api-upload-fields.component.ts
@@ -0,0 +1,163 @@
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {ChangeDetectionStrategy, Component, ViewChild} from '@angular/core';
+import {DocumentenApiColumnModalType, DocumentenApiColumnModalTypeCloseEvent} from '../../models';
+import {
+  BehaviorSubject,
+  combineLatest,
+  filter,
+  map,
+  Observable,
+  startWith,
+  Subject,
+  switchMap,
+  tap,
+} from 'rxjs';
+import {ActivatedRoute} from '@angular/router';
+import {
+  ActionItem,
+  CarbonListComponent,
+  CarbonListItem,
+  CarbonListModule,
+  ColumnConfig,
+  ConfirmationModalModule,
+  ViewType,
+} from '@valtimo/components';
+import {CommonModule} from '@angular/common';
+import {TranslateModule, TranslateService} from '@ngx-translate/core';
+import {ButtonModule, IconModule} from 'carbon-components-angular';
+import {
+  DOCUMENTEN_API_UPLOAD_KEYS,
+  DocumentenApiUploadField,
+} from '../../models/documenten-api-upload-field.model';
+import {DocumentenApiDocumentService} from '../../services';
+import {DocumentenApiUploadFieldModalComponent} from '../documenten-api-upload-field-model/documenten-api-upload-field-modal.component';
+
+@Component({
+  selector: 'valtimo-documenten-api-upload-fields',
+  templateUrl: './documenten-api-upload-fields.component.html',
+  styleUrls: ['./documenten-api-upload-fields.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    CommonModule,
+    CarbonListModule,
+    TranslateModule,
+    ConfirmationModalModule,
+    ButtonModule,
+    IconModule,
+    DocumentenApiUploadFieldModalComponent,
+  ],
+})
+export class DocumentenApiUploadFieldsComponent {
+  @ViewChild(CarbonListComponent) carbonList: CarbonListComponent;
+
+  private readonly _reload$ = new BehaviorSubject<null | 'noAnimation'>(null);
+  private readonly _documentDefinitionName$: Observable<string> = this.route.params.pipe(
+    map(params => params?.name),
+    filter(docDefName => !!docDefName)
+  );
+
+  public readonly loading$ = new BehaviorSubject<boolean>(true);
+  public readonly fields$ = new BehaviorSubject<ColumnConfig[]>([]);
+  public readonly uploadFieldModalType$ = new BehaviorSubject<DocumentenApiColumnModalType>(
+    'closed'
+  );
+  public readonly prefill$ = new BehaviorSubject<DocumentenApiUploadField | undefined>(undefined);
+
+  public get documentDefinitionName$(): Observable<string> {
+    return this._documentDefinitionName$;
+  }
+
+  public readonly documentUploadFields$: Observable<string[]> = combineLatest([
+    this._documentDefinitionName$,
+    this._reload$,
+    this.translateService.stream('key'),
+  ]).pipe(
+    tap(([_, reload]) => {
+      if (reload === null) {
+        this.loading$.next(true);
+      }
+    }),
+    switchMap(([documentDefinitionName]) =>
+      this.documentenApiDocumentService.getUploadFields(documentDefinitionName)
+    ),
+    map(fields =>
+      fields.map(field => ({
+        ...field,
+        field: this.translateService.instant(`zgw.uploadFields.keys.${field.key}`),
+      }))
+    ),
+    startWith([]),
+    tap(() => {
+      this.loading$.next(false);
+    })
+  );
+
+  public readonly ACTION_ITEMS: ActionItem[] = [
+    {
+      label: 'interface.edit',
+      callback: this.openEditModal.bind(this),
+      type: 'normal',
+    },
+  ];
+
+  public readonly FIELDS: ColumnConfig[] = [
+    {
+      key: 'field',
+      label: 'zgw.uploadFields.fields.field',
+      viewType: ViewType.TEXT,
+    },
+    {
+      key: 'defaultValue',
+      label: 'zgw.uploadFields.fields.defaultValue',
+      viewType: ViewType.TEXT,
+    },
+    {
+      key: 'visible',
+      label: 'zgw.uploadFields.fields.visible',
+      viewType: ViewType.BOOLEAN,
+    },
+    {
+      key: 'readonly',
+      label: 'zgw.uploadFields.fields.readonly',
+      viewType: ViewType.BOOLEAN,
+    },
+  ];
+
+  constructor(
+    private readonly route: ActivatedRoute,
+    private readonly documentenApiDocumentService: DocumentenApiDocumentService,
+    private readonly translateService: TranslateService
+  ) {}
+
+  public openEditModal(uploadField: DocumentenApiUploadField): void {
+    this.prefill$.next(uploadField);
+    this.uploadFieldModalType$.next('edit');
+  }
+
+  public closeModal(closeModalEvent: DocumentenApiColumnModalTypeCloseEvent): void {
+    if (closeModalEvent === 'closeAndRefresh') {
+      this.reload();
+    }
+    this.uploadFieldModalType$.next('closed');
+  }
+
+  private reload(noAnimation = false): void {
+    this._reload$.next(noAnimation ? 'noAnimation' : null);
+  }
+}
diff --git a/projects/valtimo/zgw/src/lib/modules/documenten-api/components/index.ts b/projects/valtimo/zgw/src/lib/modules/documenten-api/components/index.ts
index 758c6338f..84ac7adbf 100644
--- a/projects/valtimo/zgw/src/lib/modules/documenten-api/components/index.ts
+++ b/projects/valtimo/zgw/src/lib/modules/documenten-api/components/index.ts
@@ -19,7 +19,9 @@ export * from './documenten-api-columns/documenten-api-columns.component';
 export * from './documenten-api-documents/documenten-api-documents.component';
 export * from './documenten-api-filter/documenten-api-filter.component';
 export * from './documenten-api-link-upload-process/dossier-management-link-process.component';
+export * from './documenten-api-metadata-modal/documenten-api-metadata-modal.component';
 export * from './documenten-api-tag-modal/documenten-api-tag-modal.component';
 export * from './documenten-api-tags/documenten-api-tags.component';
-export * from './documenten-api-metadata-modal/documenten-api-metadata-modal.component';
+export * from './documenten-api-upload-field-model/documenten-api-upload-field-modal.component';
+export * from './documenten-api-upload-fields/documenten-api-upload-fields.component';
 export * from './documenten-api-version/documenten-api-version.component';
diff --git a/projects/valtimo/zgw/src/lib/modules/documenten-api/formio/documenten-api-uploader/documenten-api-uploader-edit-form.ts b/projects/valtimo/zgw/src/lib/modules/documenten-api/formio/documenten-api-uploader/documenten-api-uploader-edit-form.ts
index 1f6719faf..a1114dbfd 100644
--- a/projects/valtimo/zgw/src/lib/modules/documenten-api/formio/documenten-api-uploader/documenten-api-uploader-edit-form.ts
+++ b/projects/valtimo/zgw/src/lib/modules/documenten-api/formio/documenten-api-uploader/documenten-api-uploader-edit-form.ts
@@ -111,12 +111,30 @@ export const documentenApiUploaderEditForm = () => ({
         required: false,
       },
     },
+    {
+      label: 'HTML',
+      tag: 'div',
+      content: '<h3>Documenten API metadata</h3>',
+      refreshOnChange: false,
+      type: 'htmlelement',
+      input: false,
+      tableView: false,
+    },
+    {
+      label: 'HTML',
+      tag: 'div',
+      content: '<h4>Filename</h4>',
+      refreshOnChange: false,
+      type: 'htmlelement',
+      input: false,
+      tableView: false,
+    },
     {
       type: 'textfield',
       input: true,
-      key: 'customOptions.documentTitle',
-      label: 'Default document title',
-      tooltip: 'Leave empty to let the user input their own title',
+      key: 'customOptions.filename',
+      label: 'Default filename',
+      tooltip: 'Leave empty to let the user input their own filename',
       validate: {
         required: false,
       },
@@ -125,18 +143,37 @@ export const documentenApiUploaderEditForm = () => ({
       type: 'checkbox',
       input: true,
       inputType: 'checkbox',
-      key: 'customOptions.disableDocumentTitle',
-      label: 'Disable document title input',
+      key: 'customOptions.disableFilename',
+      label: 'Disable filename input',
       validate: {
         required: false,
       },
     },
+    {
+      type: 'checkbox',
+      input: true,
+      inputType: 'checkbox',
+      key: 'customOptions.hideFilename',
+      label: 'Hide filename input',
+      validate: {
+        required: false,
+      },
+    },
+    {
+      label: 'HTML',
+      tag: 'div',
+      content: '<h4>Title</h4>',
+      refreshOnChange: false,
+      type: 'htmlelement',
+      input: false,
+      tableView: false,
+    },
     {
       type: 'textfield',
       input: true,
-      key: 'customOptions.filename',
-      label: 'Default filename',
-      tooltip: 'Leave empty to let the user input their own filename',
+      key: 'customOptions.documentTitle',
+      label: 'Default document title',
+      tooltip: 'Leave empty to let the user input their own title',
       validate: {
         required: false,
       },
@@ -145,12 +182,31 @@ export const documentenApiUploaderEditForm = () => ({
       type: 'checkbox',
       input: true,
       inputType: 'checkbox',
-      key: 'customOptions.disableFilename',
-      label: 'Disable filename input',
+      key: 'customOptions.disableDocumentTitle',
+      label: 'Disable document title input',
+      validate: {
+        required: false,
+      },
+    },
+    {
+      type: 'checkbox',
+      input: true,
+      inputType: 'checkbox',
+      key: 'customOptions.hideDocumentTitle',
+      label: 'Hide document title input',
       validate: {
         required: false,
       },
     },
+    {
+      label: 'HTML',
+      tag: 'div',
+      content: '<h4>Author</h4>',
+      refreshOnChange: false,
+      type: 'htmlelement',
+      input: false,
+      tableView: false,
+    },
     {
       type: 'textfield',
       input: true,
@@ -172,20 +228,40 @@ export const documentenApiUploaderEditForm = () => ({
       },
     },
     {
-      type: 'select',
-      label: 'Default status',
-      key: 'customOptions.status',
-      placeholder: 'Select a default status',
-      data: {
-        values: [
-          {value: 'in_bewerking', label: 'In editing'},
-          {value: 'ter_vaststelling', label: 'To be confirmed'},
-          {value: 'definitief', label: 'Definitive'},
-          {value: 'gearchiveerd', label: 'Archived'},
-        ],
+      type: 'checkbox',
+      input: true,
+      inputType: 'checkbox',
+      key: 'customOptions.hideAuthor',
+      label: 'Hide author input',
+      validate: {
+        required: false,
       },
-      dataSrc: 'values',
+    },
+    {
+      label: 'HTML',
+      tag: 'div',
+      content: '<h4>Description</h4>',
+      refreshOnChange: false,
+      type: 'htmlelement',
+      input: false,
+      tableView: false,
+    },
+    {
+      type: 'textfield',
+      input: true,
+      key: 'customOptions.description',
+      label: 'Default description',
+      tooltip: 'Leave empty to let the user input their own description',
+      validate: {
+        required: false,
+      },
+    },
+    {
+      type: 'checkbox',
       input: true,
+      inputType: 'checkbox',
+      key: 'customOptions.disableDescription',
+      label: 'Disable description input',
       validate: {
         required: false,
       },
@@ -194,12 +270,21 @@ export const documentenApiUploaderEditForm = () => ({
       type: 'checkbox',
       input: true,
       inputType: 'checkbox',
-      key: 'customOptions.disableStatus',
-      label: 'Disable status input',
+      key: 'customOptions.hideDescription',
+      label: 'Hide description input',
       validate: {
         required: false,
       },
     },
+    {
+      label: 'HTML',
+      tag: 'div',
+      content: '<h4>Language</h4>',
+      refreshOnChange: false,
+      type: 'htmlelement',
+      input: false,
+      tableView: false,
+    },
     {
       type: 'select',
       label: 'Default language',
@@ -229,12 +314,43 @@ export const documentenApiUploaderEditForm = () => ({
       },
     },
     {
-      type: 'textfield',
+      type: 'checkbox',
+      input: true,
+      inputType: 'checkbox',
+      key: 'customOptions.hideLanguage',
+      label: 'Hide language input',
+      validate: {
+        required: false,
+      },
+    },
+    {
+      label: 'HTML',
+      tag: 'div',
+      content: '<h4>Confidentiality level</h4>',
+      refreshOnChange: false,
+      type: 'htmlelement',
+      input: false,
+      tableView: false,
+    },
+    {
+      type: 'select',
+      label: 'Default confidentiality level',
+      key: 'customOptions.confidentialityLevel',
+      placeholder: 'Select a default confidentiality level',
+      data: {
+        values: [
+          {value: 'openbaar', label: 'Public'},
+          {value: 'beperkt_openbaar', label: 'Restricted public'},
+          {value: 'intern', label: 'Internal'},
+          {value: 'zaakvertrouwelijk', label: 'Case confidential'},
+          {value: 'vertrouwelijk', label: 'Private'},
+          {value: 'confidentieel', label: 'Confidential'},
+          {value: 'geheim', label: 'Secret'},
+          {value: 'zeer_geheim', label: 'Very secret'},
+        ],
+      },
+      dataSrc: 'values',
       input: true,
-      key: 'customOptions.documentType',
-      label: 'Default document type url',
-      tooltip:
-        'Must match the document type url exactly. Leave empty to let the user input their own document type',
       validate: {
         required: false,
       },
@@ -243,18 +359,67 @@ export const documentenApiUploaderEditForm = () => ({
       type: 'checkbox',
       input: true,
       inputType: 'checkbox',
-      key: 'customOptions.disableDocumentType',
-      label: 'Disable document type input',
+      key: 'customOptions.disableConfidentialityLevel',
+      label: 'Disable confidentiality level input',
+      validate: {
+        required: false,
+      },
+    },
+    {
+      type: 'checkbox',
+      input: true,
+      inputType: 'checkbox',
+      key: 'customOptions.hideConfidentialityLevel',
+      label: 'Hide confidentiality level input',
       validate: {
         required: false,
       },
     },
+    {
+      label: 'HTML',
+      tag: 'div',
+      content: '<h4>Creation date</h4>',
+      refreshOnChange: false,
+      type: 'htmlelement',
+      input: false,
+      tableView: false,
+    },
+    {
+      type: 'checkbox',
+      input: true,
+      inputType: 'checkbox',
+      key: 'customOptions.disableCreationDate',
+      label: 'Disable creation date input',
+      validate: {
+        required: false,
+      },
+    },
+    {
+      type: 'checkbox',
+      input: true,
+      inputType: 'checkbox',
+      key: 'customOptions.hideCreationDate',
+      label: 'Hide creation date input',
+      validate: {
+        required: false,
+      },
+    },
+    {
+      label: 'HTML',
+      tag: 'div',
+      content: '<h4>Informatieobjecttype</h4>',
+      refreshOnChange: false,
+      type: 'htmlelement',
+      input: false,
+      tableView: false,
+    },
     {
       type: 'textfield',
       input: true,
-      key: 'customOptions.description',
-      label: 'Default description',
-      tooltip: 'Leave empty to let the user input their own description',
+      key: 'customOptions.documentType',
+      label: 'Default informatieobjecttype url',
+      tooltip:
+        "Sometimes referred to as the 'document-type'. Must match the informatieobjecttype url exactly. Leave empty to let the user input their own informatieobjecttype",
       validate: {
         required: false,
       },
@@ -263,27 +428,42 @@ export const documentenApiUploaderEditForm = () => ({
       type: 'checkbox',
       input: true,
       inputType: 'checkbox',
-      key: 'customOptions.disableDescription',
-      label: 'Disable description input',
+      key: 'customOptions.disableDocumentType',
+      label: 'Disable informatieobjecttype input',
       validate: {
         required: false,
       },
     },
+    {
+      type: 'checkbox',
+      input: true,
+      inputType: 'checkbox',
+      key: 'customOptions.hideDocumentType',
+      label: 'Hide informatieobjecttype input',
+      validate: {
+        required: false,
+      },
+    },
+    {
+      label: 'HTML',
+      tag: 'div',
+      content: '<h4>Status</h4>',
+      refreshOnChange: false,
+      type: 'htmlelement',
+      input: false,
+      tableView: false,
+    },
     {
       type: 'select',
-      label: 'Default confidentiality level',
-      key: 'customOptions.confidentialityLevel',
-      placeholder: 'Select a default confidentiality level',
+      label: 'Default status',
+      key: 'customOptions.status',
+      placeholder: 'Select a default status',
       data: {
         values: [
-          {value: 'openbaar', label: 'Public'},
-          {value: 'beperkt_openbaar', label: 'Restricted public'},
-          {value: 'intern', label: 'Internal'},
-          {value: 'zaakvertrouwelijk', label: 'Case confidential'},
-          {value: 'vertrouwelijk', label: 'Private'},
-          {value: 'confidentieel', label: 'Confidential'},
-          {value: 'geheim', label: 'Secret'},
-          {value: 'zeer_geheim', label: 'Very secret'},
+          {value: 'in_bewerking', label: 'In editing'},
+          {value: 'ter_vaststelling', label: 'To be confirmed'},
+          {value: 'definitief', label: 'Definitive'},
+          {value: 'gearchiveerd', label: 'Archived'},
         ],
       },
       dataSrc: 'values',
@@ -296,8 +476,66 @@ export const documentenApiUploaderEditForm = () => ({
       type: 'checkbox',
       input: true,
       inputType: 'checkbox',
-      key: 'customOptions.disableConfidentialityLevel',
-      label: 'Disable confidentiality level input',
+      key: 'customOptions.disableStatus',
+      label: 'Disable status input',
+      validate: {
+        required: false,
+      },
+    },
+    {
+      type: 'checkbox',
+      input: true,
+      inputType: 'checkbox',
+      key: 'customOptions.hideStatus',
+      label: 'Hide status input',
+      validate: {
+        required: false,
+      },
+    },
+    {
+      label: 'HTML',
+      tag: 'div',
+      content: '<h4>Additional date</h4>',
+      refreshOnChange: false,
+      type: 'htmlelement',
+      input: false,
+      tableView: false,
+    },
+    {
+      type: 'checkbox',
+      input: true,
+      inputType: 'checkbox',
+      key: 'customOptions.hideAdditionalDate',
+      label: 'Hide additional date input',
+      validate: {
+        required: false,
+      },
+    },
+    {
+      label: 'HTML',
+      tag: 'div',
+      content: '<h4>Tags</h4>',
+      refreshOnChange: false,
+      type: 'htmlelement',
+      input: false,
+      tableView: false,
+    },
+    {
+      type: 'textfield',
+      input: true,
+      key: 'customOptions.tags',
+      label: 'Default tags',
+      tooltip: 'A comma separated list of tags. Leave empty to let the user input their own tags',
+      validate: {
+        required: false,
+      },
+    },
+    {
+      type: 'checkbox',
+      input: true,
+      inputType: 'checkbox',
+      key: 'customOptions.hideTags',
+      label: 'Hide tags input',
       validate: {
         required: false,
       },
diff --git a/projects/valtimo/zgw/src/lib/modules/documenten-api/formio/documenten-api-uploader/documenten-api-uploader.component.html b/projects/valtimo/zgw/src/lib/modules/documenten-api/formio/documenten-api-uploader/documenten-api-uploader.component.html
index f41941e22..4df430d41 100644
--- a/projects/valtimo/zgw/src/lib/modules/documenten-api/formio/documenten-api-uploader/documenten-api-uploader.component.html
+++ b/projects/valtimo/zgw/src/lib/modules/documenten-api/formio/documenten-api-uploader/documenten-api-uploader.component.html
@@ -65,11 +65,10 @@
   class="documenten-api-uploader-metadata-modal"
   (metadata)="metadataSet($event)"
   (modalClose)="closeMetadataModal()"
-  [author]="author"
-  [confidentialityLevel]="confidentialityLevel"
-  [description]="description"
+  [defaultValues]="defaultValues"
   [disableAuthor]="disableAuthor"
   [disableConfidentialityLevel]="disableConfidentialityLevel"
+  [disableCreationDate]="disableCreationDate"
   [disableDescription]="disableDescription"
   [disableDocumentTitle]="disableDocumentTitle"
   [disableDocumentType]="disableDocumentType"
@@ -77,12 +76,8 @@
   [disableLanguage]="disableLanguage"
   [disableStatus]="disableStatus"
   [disabled$]="modalDisabled$"
-  [documentTitle]="documentTitle"
-  [documentType]="documentType"
   [file$]="fileToBeUploaded$"
-  [filename]="filename"
-  [language]="language"
-  [status]="status"
+  [hideFields]="hideFields"
   [supportsTrefwoorden]="(supportedDocumentenApiFeatures$ | async)?.supportsTrefwoorden"
   [open]="showModal()"
 ></valtimo-documenten-api-metadata-modal>
diff --git a/projects/valtimo/zgw/src/lib/modules/documenten-api/formio/documenten-api-uploader/documenten-api-uploader.component.ts b/projects/valtimo/zgw/src/lib/modules/documenten-api/formio/documenten-api-uploader/documenten-api-uploader.component.ts
index e51ea7a36..e34f2095f 100644
--- a/projects/valtimo/zgw/src/lib/modules/documenten-api/formio/documenten-api-uploader/documenten-api-uploader.component.ts
+++ b/projects/valtimo/zgw/src/lib/modules/documenten-api/formio/documenten-api-uploader/documenten-api-uploader.component.ts
@@ -49,23 +49,111 @@ export class DocumentenApiUploaderComponent
   @Input() hideMaxFileSize: boolean;
   @Input() camera: boolean;
 
-  @Input() documentTitle: string;
+  @Input() set documentTitle(defaultValue: string) {
+    this.defaultValues['titel'] = defaultValue;
+  }
+
+  @Input() set hideDocumentTitle(hide: boolean) {
+    this.hideField(hide, 'titel');
+  }
+
   @Input() disableDocumentTitle: boolean;
-  @Input() filename: string;
+
+  @Input() set filename(defaultValue: string) {
+    this.defaultValues['bestandsnaam'] = defaultValue;
+  }
+
+  @Input() set hideFilename(hide: boolean) {
+    this.hideField(hide, 'bestandsnaam');
+  }
+
   @Input() disableFilename: boolean;
-  @Input() author: string;
+
+  @Input() set author(defaultValue: string) {
+    this.defaultValues['auteur'] = defaultValue;
+  }
+
+  @Input() set hideAuthor(hide: boolean) {
+    this.hideField(hide, 'auteur');
+  }
+
   @Input() disableAuthor: boolean;
-  @Input() status: string;
+
+  @Input() set status(defaultValue: string) {
+    this.defaultValues['status'] = defaultValue;
+  }
+
+  @Input() set hideStatus(hide: boolean) {
+    this.hideField(hide, 'status');
+  }
+
   @Input() disableStatus: boolean;
-  @Input() language: string;
+
+  @Input() set language(defaultValue: string) {
+    this.defaultValues['taal'] = defaultValue;
+  }
+
+  @Input() set hideLanguage(hide: boolean) {
+    this.hideField(hide, 'taal');
+  }
+
   @Input() disableLanguage: boolean;
-  @Input() documentType: string;
+
+  @Input() set documentType(defaultValue: string) {
+    this.defaultValues['informatieobjecttype'] = defaultValue;
+  }
+
+  @Input() set hideDocumentType(hide: boolean) {
+    this.hideField(hide, 'informatieobjecttype');
+  }
+
   @Input() disableDocumentType: boolean;
-  @Input() description: string;
+
+  @Input() set description(defaultValue: string) {
+    this.defaultValues['beschrijving'] = defaultValue;
+  }
+
+  @Input() set hideDescription(hide: boolean) {
+    this.hideField(hide, 'beschrijving');
+  }
+
   @Input() disableDescription: boolean;
-  @Input() confidentialityLevel: string;
+
+  @Input() set confidentialityLevel(defaultValue: string) {
+    this.defaultValues['vertrouwelijkheidaanduiding'] = defaultValue;
+  }
+
+  @Input() set hideConfidentialityLevel(hide: boolean) {
+    this.hideField(hide, 'vertrouwelijkheidaanduiding');
+  }
+
   @Input() disableConfidentialityLevel: boolean;
 
+  @Input() set hideCreationDate(hide: boolean) {
+    this.hideField(hide, 'creatiedatum');
+  }
+
+  @Input() disableCreationDate: boolean;
+
+  @Input() set hideAdditionalDate(hide: boolean) {
+    this.hideField(hide, 'aanvullendeDatum');
+  }
+
+  @Input() set tags(tags: string) {
+    let _tags = tags
+      ?.split(',')
+      ?.map(tag => tag.trim())
+      ?.filter(tag => !!tag);
+    if (_tags?.length === 0) {
+      _tags = null;
+    }
+    this.defaultValues['trefwoorden'] = tags;
+  }
+
+  @Input() set hideTags(hide: boolean) {
+    this.hideField(hide, 'trefwoorden');
+  }
+
   @Output() valueChange = new EventEmitter<Array<DocumentenApiFileReference>>();
 
   readonly uploading$ = new BehaviorSubject<boolean>(false);
@@ -98,18 +186,16 @@ export class DocumentenApiUploaderComponent
     .getUserSubject()
     .pipe(map(userIdentity => userIdentity?.roles.includes('ROLE_ADMIN')));
 
-  private readonly _documentDefinitionName$ = this.route.params.pipe(
-    map(params => params?.documentDefinitionName),
-    filter(caseDefinitionName => !!caseDefinitionName)
-  );
-
   public readonly supportedDocumentenApiFeatures$: Observable<SupportedDocumentenApiFeatures> =
-    this._documentDefinitionName$.pipe(
+    this.modalService.documentDefinitionName$.pipe(
       switchMap(caseDefinitionName =>
         this.documentenApiVersionService.getSupportedApiFeatures(caseDefinitionName)
       )
     );
 
+  public defaultValues: {} = {};
+  public hideFields: Array<string> = [];
+
   constructor(
     private readonly uploadProviderService: UploadProviderService,
     private readonly stateService: FormIoStateService,
@@ -169,4 +255,13 @@ export class DocumentenApiUploaderComponent
       )
       .subscribe();
   }
+
+  private hideField(hide: boolean, field: string) {
+    const exists = this.hideFields.includes(field);
+    if (!exists && hide) {
+      this.hideFields.push(field);
+    } else if (exists && !hide) {
+      delete this.hideFields[field];
+    }
+  }
 }
diff --git a/projects/valtimo/zgw/src/lib/modules/documenten-api/models/documenten-api-metadata.model.ts b/projects/valtimo/zgw/src/lib/modules/documenten-api/models/documenten-api-metadata.model.ts
index 33bc8fe87..6f8480cec 100644
--- a/projects/valtimo/zgw/src/lib/modules/documenten-api/models/documenten-api-metadata.model.ts
+++ b/projects/valtimo/zgw/src/lib/modules/documenten-api/models/documenten-api-metadata.model.ts
@@ -24,23 +24,43 @@ type ConfidentialityLevel =
   | 'geheim'
   | 'zeer_geheim';
 
+const CONFIDENTIALITY_LEVELS: Array<ConfidentialityLevel> = [
+  'openbaar',
+  'beperkt_openbaar',
+  'intern',
+  'zaakvertrouwelijk',
+  'vertrouwelijk',
+  'confidentieel',
+  'geheim',
+  'zeer_geheim',
+];
+
 type DocumentStatus = 'in_bewerking' | 'ter_vaststelling' | 'definitief' | 'gearchiveerd';
 
+const STATUS_ITEMS: Array<DocumentStatus> = [
+  'in_bewerking',
+  'ter_vaststelling',
+  'definitief',
+  'gearchiveerd',
+];
+
 type DocumentLanguage = 'nld' | 'eng' | 'deu';
 
+const LANGUAGE_ITEMS: Array<DocumentLanguage> = ['nld', 'eng', 'deu'];
+
 interface DocumentenApiMetadata {
   titel: string;
-  bescvhrijving: string;
-  bestandsnaam: string;
-  vertrouwelijkheidaanduiding: ConfidentialityLevel;
+  beschrijving?: string;
+  bestandsnaam?: string;
+  vertrouwelijkheidaanduiding?: ConfidentialityLevel;
   auteur: string;
-  status: DocumentStatus;
+  status?: DocumentStatus;
   creatiedatum: string;
-  ontvangstdatum: string;
-  verzenddatum: string;
+  ontvangstdatum?: string;
+  verzenddatum?: string;
   taal: DocumentLanguage;
   informatieobjecttype: string;
-  trefwoorden: string[];
+  trefwoorden?: string[];
 }
 
 type AdditionalDocumentDate = 'sent' | 'received' | 'neither';
@@ -48,7 +68,10 @@ type AdditionalDocumentDate = 'sent' | 'received' | 'neither';
 export {
   DocumentenApiMetadata,
   ConfidentialityLevel,
+  CONFIDENTIALITY_LEVELS,
   DocumentStatus,
+  STATUS_ITEMS,
   DocumentLanguage,
+  LANGUAGE_ITEMS,
   AdditionalDocumentDate,
 };
diff --git a/projects/valtimo/zgw/src/lib/modules/documenten-api/models/documenten-api-upload-field.model.ts b/projects/valtimo/zgw/src/lib/modules/documenten-api/models/documenten-api-upload-field.model.ts
new file mode 100644
index 000000000..07dc9d07b
--- /dev/null
+++ b/projects/valtimo/zgw/src/lib/modules/documenten-api/models/documenten-api-upload-field.model.ts
@@ -0,0 +1,69 @@
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+interface DocumentenApiUploadField {
+  key: DOCUMENTEN_API_UPLOAD_KEYS;
+  defaultValue?: string;
+  visible?: boolean;
+  readonly?: boolean;
+}
+
+interface DocumentenApiUploadFieldDefaultValues {
+  auteur?: string,
+  vertrouwelijkheidaanduiding?: string,
+  beschrijving?: string,
+  titel?: string,
+  informatieobjecttype?: string,
+  bestandsnaam?: string,
+  taal?: string,
+  status?: string,
+  trefwoorden?: string[],
+}
+
+interface DocumentenApiUploadFields {
+  auteur?: DocumentenApiUploadField,
+  vertrouwelijkheidaanduiding?: DocumentenApiUploadField,
+  beschrijving?: DocumentenApiUploadField,
+  titel?: DocumentenApiUploadField,
+  informatieobjecttype?: DocumentenApiUploadField,
+  bestandsnaam?: DocumentenApiUploadField,
+  taal?: DocumentenApiUploadField,
+  status?: DocumentenApiUploadField,
+  trefwoorden?: DocumentenApiUploadField,
+}
+
+enum DOCUMENTEN_API_UPLOAD_KEYS {
+  BESTANDSNAAM = 'bestandsnaam',
+  TITEL = 'titel',
+  AUTEUR = 'auteur',
+  BESCHRIJVING = 'beschrijving',
+  TAAL = 'taal',
+  VERTROUWELIJKHEIDAANDUIDING = 'vertrouwelijkheidaanduiding',
+  CREATIEDATUM = 'creatiedatum',
+  INFORMATIEOBJECTTYPE = 'informatieobjecttype',
+  STATUS = 'status',
+  VERZENDDATUM = 'verzenddatum',
+  ONTVANGSTDATUM = 'ontvangstdatum',
+  AANVULLENDE_DATUM = 'aanvullendeDatum',
+  TREFWOORDEN = 'trefwoorden',
+}
+
+export {
+  DocumentenApiUploadField,
+  DocumentenApiUploadFieldDefaultValues,
+  DocumentenApiUploadFields,
+  DOCUMENTEN_API_UPLOAD_KEYS
+};
diff --git a/projects/valtimo/zgw/src/lib/modules/documenten-api/services/documenten-api-document.service.ts b/projects/valtimo/zgw/src/lib/modules/documenten-api/services/documenten-api-document.service.ts
index 3d896d23d..067bb5e83 100644
--- a/projects/valtimo/zgw/src/lib/modules/documenten-api/services/documenten-api-document.service.ts
+++ b/projects/valtimo/zgw/src/lib/modules/documenten-api/services/documenten-api-document.service.ts
@@ -18,6 +18,7 @@ import {Injectable} from '@angular/core';
 import {BaseApiService, ConfigService, Page} from '@valtimo/config';
 import {Observable} from 'rxjs';
 import {DocumentenApiRelatedFile} from '../models';
+import {DocumentenApiUploadField} from '../models/documenten-api-upload-field.model';
 
 @Injectable({
   providedIn: 'root',
@@ -58,4 +59,30 @@ export class DocumentenApiDocumentService extends BaseApiService {
       this.getApiUrl(`/v1/documenten-api/${file.pluginConfigurationId}/files/${file.fileId}`)
     );
   }
+
+  public getPrefilledUploadFields(documentId: string): Observable<DocumentenApiUploadField[]> {
+    return this.httpClient.get<DocumentenApiUploadField[]>(
+      this.getApiUrl(`/v1/document/${documentId}/zgw-document/upload-field`)
+    );
+  }
+
+  public getUploadFields(caseDefinitionName: string): Observable<Array<DocumentenApiUploadField>> {
+    return this.httpClient.get<Array<DocumentenApiUploadField>>(
+      this.getApiUrl(
+        `/management/v1/case-definition/${caseDefinitionName}/zgw-document/upload-field`
+      )
+    );
+  }
+
+  public updateUploadField(
+    caseDefinitionName: string,
+    uploadField: DocumentenApiUploadField
+  ): Observable<void> {
+    return this.httpClient.put<void>(
+      this.getApiUrl(
+        `/management/v1/case-definition/${caseDefinitionName}/zgw-document/upload-field`
+      ),
+      uploadField
+    );
+  }
 }