From 88310c4848cacea8d91fa55f133d54e79f67a414 Mon Sep 17 00:00:00 2001
From: gkrajniak <gkrajniak@gmail.com>
Date: Thu, 9 Jul 2026 10:57:17 +0200
Subject: [PATCH 1/6] Add support vor generic form collection of object

Signed-off-by: gkrajniak <gkrajniak@gmail.com>
---
 docs/declarative-form.md                      | 16 ++++-----
 .../declarative-form.component.html           |  4 +--
 .../declarative-form.component.ts             |  4 +--
 .../form-collection-field.component.ts        | 35 ++++++++++---------
 .../form/models/form-field-definition.ts      |  9 +++--
 .../declarative-ui/models/ui-definition.ts    | 11 +++---
 .../stories/declarative-form.stories.ts       | 10 +++---
 7 files changed, 43 insertions(+), 46 deletions(-)

diff --git a/docs/declarative-form.md b/docs/declarative-form.md
index 5e4628a..d5e9598 100644
--- a/docs/declarative-form.md
+++ b/docs/declarative-form.md
@@ -136,12 +136,12 @@ interface FormFieldDefinition {
   values?: string[];                       // Static select options
   disabled?: boolean;                      // Disables the field
   validation?: 'onBlur' | 'onChange';      // When to emit fieldChange for this field
-  propertyCollection?: FormFieldDefinition[]; // Sub-fields for an array-of-objects field; see "Collection fields" below
+  collection?: FormFieldDefinition[];      // Sub-fields for an array-of-objects field; see "Collection fields" below
 }
 
 interface FormFieldChangeEvent {
   fieldProperty: string;  // The field property name (matches field.name)
-  value: unknown;         // Current value of the control; for a `propertyCollection` field this is the full `Array<Record<string, unknown>>`
+  value: unknown;         // Current value of the control; for a `collection` field this is the full `Array<Record<string, unknown>>`
 }
 
 type FormFieldErrors = Record<string, string | null>;
@@ -153,7 +153,7 @@ type FormFieldErrors = Record<string, string | null>;
 { fieldProperty: 'metadata.name', value: 'my-app' }
 ```
 
-For a `propertyCollection` field the payload carries the whole array:
+For a `collection` field the payload carries the whole array:
 
 ```ts
 {
@@ -180,9 +180,9 @@ For a `propertyCollection` field the payload carries the whole array:
 
 ---
 
-## Collection fields (`propertyCollection`)
+## Collection fields (`collection`)
 
-Set `propertyCollection` on a `FormFieldDefinition` to declare that the value at this field's `name` is an **array of objects**. The form renders it as a stack of expandable/collapsible cards, one per array entry.
+Set `collection` on a `FormFieldDefinition` to declare that the value at this field's `name` is an **array of objects**. The form renders it as a stack of expandable/collapsible cards, one per array entry.
 
 ### UX
 
@@ -193,7 +193,7 @@ Set `propertyCollection` on a `FormFieldDefinition` to declare that the value at
 
 ### Sub-field definitions
 
-`propertyCollection` is a full `FormFieldDefinition[]`. Each sub-field carries the same options as a top-level field (`label`, `values`, `required`, `validation`, `disabled`, and even nested `propertyCollection` for array-of-arrays). Sub-field `name` values are used verbatim as keys on each entry object — whatever you write becomes the shape of the emitted payload.
+`collection` is a full `FormFieldDefinition[]`. Each sub-field carries the same options as a top-level field (`label`, `values`, `required`, `validation`, `disabled`, and even nested `collection` for array-of-arrays). Sub-field `name` values are used verbatim as keys on each entry object — whatever you write becomes the shape of the emitted payload.
 
 ### Change events for collection fields
 
@@ -208,7 +208,7 @@ const fields: FormFieldDefinition[] = [
   {
     name: 'spec.artifacts',
     label: 'Artifacts',
-    propertyCollection: [
+    collection: [
       { name: 'name', label: 'Name', required: true },
       { name: 'url',  label: 'URL' },
       { name: 'type', label: 'Type', values: ['image', 'chart', 'file'] },
@@ -253,7 +253,7 @@ All interactive elements carry `data-testid` attributes for reliable E2E targeti
 | Field label | `generic-form-field-label-{name}` | |
 | Input or select | `generic-form-field-{name}` | `<ui5-input>` or `<ui5-select>` |
 | Select option | `generic-form-field-{name}-option-{value}` | `value` = option string or `empty` for the blank placeholder |
-| Collection container | `collection-field` | Rendered inside a `propertyCollection` field |
+| Collection container | `collection-field` | Rendered inside a `collection` field |
 | Collection item | `collection-item-{index}` | Zero-based array index |
 | Collection item toggle | `collection-item-{index}-toggle` | Expand / collapse header |
 | Collection item remove | `collection-item-{index}-remove` | Trash icon |
diff --git a/projects/ngx/declarative-ui/form/declarative-form/declarative-form.component.html b/projects/ngx/declarative-ui/form/declarative-form/declarative-form.component.html
index 3b5ade5..abc8376 100644
--- a/projects/ngx/declarative-ui/form/declarative-form/declarative-form.component.html
+++ b/projects/ngx/declarative-ui/form/declarative-form/declarative-form.component.html
@@ -11,10 +11,10 @@
         [required]="field.required"
         >{{ field.label }}</ui5-label
       >
-      @if (field.propertyCollection?.length) {
+      @if (field.collection?.length) {
         <mfp-form-collection-field
           [attr.data-testid]="'generic-form-field-' + field.name"
-          [fields]="field.propertyCollection!"
+          [fields]="field.collection!"
           [label]="field.label"
           [initialEntries]="collectionEntries(field)"
           (valueChange)="onCollectionValueChange(field, $event)"
diff --git a/projects/ngx/declarative-ui/form/declarative-form/declarative-form.component.ts b/projects/ngx/declarative-ui/form/declarative-form/declarative-form.component.ts
index 1468d0f..5262826 100644
--- a/projects/ngx/declarative-ui/form/declarative-form/declarative-form.component.ts
+++ b/projects/ngx/declarative-ui/form/declarative-form/declarative-form.component.ts
@@ -167,7 +167,7 @@ export class DeclarativeForm<T extends GenericResource> {
 
     for (const field of fields) {
       const existingControl = existingControls[field.name];
-      const wantsCollection = !!field.propertyCollection?.length;
+      const wantsCollection = !!field.collection?.length;
       const existingIsCollection = existingControl instanceof FormArray;
       if (existingControl && wantsCollection !== existingIsCollection) {
         this.form.removeControl(field.name);
@@ -200,7 +200,7 @@ export class DeclarativeForm<T extends GenericResource> {
 
     const seeds: Record<string, Record<string, unknown>[]> = {};
     for (const field of this.fields()) {
-      if (!field.propertyCollection?.length) continue;
+      if (!field.collection?.length) continue;
       const raw = (initialValues as Record<string, unknown>)[field.name];
       const entries = Array.isArray(raw)
         ? (raw as Record<string, unknown>[])
diff --git a/projects/ngx/declarative-ui/form/declarative-form/form-collection-field/form-collection-field.component.ts b/projects/ngx/declarative-ui/form/declarative-form/form-collection-field/form-collection-field.component.ts
index 8f9f828..67fb6e3 100644
--- a/projects/ngx/declarative-ui/form/declarative-form/form-collection-field/form-collection-field.component.ts
+++ b/projects/ngx/declarative-ui/form/declarative-form/form-collection-field/form-collection-field.component.ts
@@ -4,10 +4,11 @@ import {
   ChangeDetectionStrategy,
   Component,
   ViewEncapsulation,
+  effect,
   forwardRef,
   input,
-  linkedSignal,
   output,
+  signal,
 } from '@angular/core';
 import { Button } from '@fundamental-ngx/ui5-webcomponents/button';
 import { Icon } from '@fundamental-ngx/ui5-webcomponents/icon';
@@ -18,7 +19,7 @@ import '@ui5/webcomponents-icons/dist/navigation-right-arrow.js';
 
 /**
  * Internal collection editor rendered by `mfp-declarative-form` when a field
- * carries `propertyCollection` sub-fields.
+ * carries `collection` sub-fields.
  *
  * Each entry renders as a collapsible card whose expanded body is a nested
  * `<mfp-declarative-form>` bound to that entry. Live changes flow up
@@ -45,18 +46,16 @@ export class FormCollectionField {
 
   readonly initialEntries = input<Record<string, unknown>[]>([]);
   readonly valueChange = output<Record<string, unknown>[]>();
+  protected readonly entries = signal<Record<string, unknown>[]>([]);
+  protected readonly expandedIndex = signal<number | null>(null);
 
-  protected readonly entries = linkedSignal<Record<string, unknown>[]>(() => [
-    ...(this.initialEntries() ?? []),
-  ]);
-
-  protected readonly expandedIndex = linkedSignal<
-    Record<string, unknown>[],
-    number | null
-  >({
-    source: this.initialEntries,
-    computation: () => null,
-  });
+  constructor() {
+    effect(() => {
+      const initial = this.initialEntries();
+      this.entries.set([...(initial ?? [])]);
+      this.expandedIndex.set(null);
+    });
+  }
 
   previewFor(entry: Record<string, unknown>, index: number): string {
     for (const field of this.fields()) {
@@ -83,12 +82,14 @@ export class FormCollectionField {
   remove(index: number): void {
     const next = this.entries().filter((_, i) => i !== index);
     this.entries.set(next);
-    const expandedIndex = this.expandedIndex() as number;
-    if (expandedIndex === index) {
+    if (this.expandedIndex() === index) {
       this.expandedIndex.set(null);
-    } else if (expandedIndex !== null && expandedIndex > index) {
+    } else if (
+      this.expandedIndex() !== null &&
+      (this.expandedIndex() as number) > index
+    ) {
       // Preserve the same expanded row after removing an earlier one.
-      this.expandedIndex.set(expandedIndex - 1);
+      this.expandedIndex.set((this.expandedIndex() as number) - 1);
     }
     this.valueChange.emit(next);
   }
diff --git a/projects/ngx/declarative-ui/form/models/form-field-definition.ts b/projects/ngx/declarative-ui/form/models/form-field-definition.ts
index ff5c901..31f4a44 100644
--- a/projects/ngx/declarative-ui/form/models/form-field-definition.ts
+++ b/projects/ngx/declarative-ui/form/models/form-field-definition.ts
@@ -16,16 +16,15 @@ export interface FormFieldDefinition {
    * Nested field definitions describing one item of an object collection.
    *
    * When set, this field represents an array of objects; the form renders it
-   * as a stack of expandable/collapsible cards. Each card is a nested
-   * `mfp-declarative-form` whose `fields` are the entries in
-   * `propertyCollection`; an inline Add button appends entries and a trash
-   * button removes them. Editing is live — no per-card Save/Cancel.
+   * as a stack of expandable/collapsible cards with Add / Edit / Remove
+   * controls. Each Add / Edit opens a nested `mfp-declarative-form` inline
+   * whose `fields` are the entries in `collection`.
    *
    * The submitted value at this field's path is `Array<Record<string, unknown>>`,
    * with each entry keyed by the sub-fields' `name`s. When `required` is
    * `true`, the host is expected to require at least one entry in the array.
    */
-  propertyCollection?: FormFieldDefinition[];
+  collection?: FormFieldDefinition[];
 }
 
 /** Event payload emitted each time a single form field value changes. */
diff --git a/projects/ngx/declarative-ui/models/ui-definition.ts b/projects/ngx/declarative-ui/models/ui-definition.ts
index 88d410f..41f4014 100644
--- a/projects/ngx/declarative-ui/models/ui-definition.ts
+++ b/projects/ngx/declarative-ui/models/ui-definition.ts
@@ -141,7 +141,7 @@ export interface ResourceFieldButtonClickEvent<T extends GenericResource> {
 export interface FieldDefinition {
   /** Column header / form label. */
   label?: string;
-  /** Dot-separated path to the resource property (e.g. `metadata.name`). For a collection field this is the path to the array itself (e.g. `status.conditions`). */
+  /** Dot-separated path to the resource property (e.g. `metadata.name`). */
   property?: string | string[];
   /** Alternative path resolver with optional transforms. */
   propertyField?: PropertyField;
@@ -151,10 +151,7 @@ export interface FieldDefinition {
   value?: string;
   /** Display and interaction configuration for this cell. */
   uiSettings?: UiSettings;
-  /**
-   * Sub-field definitions describing one entry of an array-of-objects field.
-   * When set, `property` points at the array; each sub-field describes one
-   * column/input of an entry. Mirrors `propertyField` naming for consistency.
-   */
-  propertyCollection?: FieldDefinition[];
+  /** Dot-separated path to the resource collection property (e.g. `status.conditions`). */
+  collectionProperty?: string;
+  collection?: FieldDefinition[];
 }
diff --git a/projects/ngx/declarative-ui/stories/declarative-form.stories.ts b/projects/ngx/declarative-ui/stories/declarative-form.stories.ts
index 9479ee6..2ff8346 100644
--- a/projects/ngx/declarative-ui/stories/declarative-form.stories.ts
+++ b/projects/ngx/declarative-ui/stories/declarative-form.stories.ts
@@ -14,7 +14,7 @@ import type { Meta, StoryObj } from '@storybook/angular';
   // pre-built bundle loaded via `<script src="/mfp-webcomponents.js">` and
   // does NOT reflect in-tree source changes until it's rebuilt — using the
   // Angular selector keeps the dev loop fast and picks up new field kinds
-  // (like `propertyCollection`) automatically.
+  // (like `collection`) automatically.
   imports: [DeclarativeForm],
   template: `
     <mfp-declarative-form
@@ -37,7 +37,7 @@ class DeclarativeFormStory {
     const nextErrors = { ...this.fieldErrors };
     if (!field?.required) {
       nextErrors[fieldProperty] = null;
-    } else if (field.propertyCollection?.length) {
+    } else if (field.collection?.length) {
       // Required collection = at least one committed object entry.
       const arr = Array.isArray(value) ? (value as unknown[]) : [];
       nextErrors[fieldProperty] = arr.length
@@ -180,7 +180,7 @@ export const WithCollection: Story = {
       {
         name: 'spec_artifacts',
         label: 'Artifacts',
-        propertyCollection: [
+        collection: [
           {
             name: 'name',
             label: 'Name',
@@ -236,7 +236,7 @@ export const WithCollectionEditMode: Story = {
       {
         name: 'spec_artifacts',
         label: 'Artifacts',
-        propertyCollection: [
+        collection: [
           { name: 'name', label: 'Name', required: true },
           { name: 'url', label: 'URL' },
           {
@@ -271,7 +271,7 @@ export const WithRequiredCollection: Story = {
         label: 'Artifacts',
         required: true,
         validation: 'onChange',
-        propertyCollection: [
+        collection: [
           { name: 'name', label: 'Name', required: true },
           { name: 'url', label: 'URL' },
         ],

From b068e099660abd98d1278e8a2201b83e3f3d2af1 Mon Sep 17 00:00:00 2001
From: gkrajniak <gkrajniak@gmail.com>
Date: Fri, 10 Jul 2026 11:30:56 +0200
Subject: [PATCH 2/6] After review

Signed-off-by: gkrajniak <gkrajniak@gmail.com>
---
 .../form-collection-field.component.ts        | 33 +++++++++----------
 1 file changed, 16 insertions(+), 17 deletions(-)

diff --git a/projects/ngx/declarative-ui/form/declarative-form/form-collection-field/form-collection-field.component.ts b/projects/ngx/declarative-ui/form/declarative-form/form-collection-field/form-collection-field.component.ts
index 67fb6e3..131a07a 100644
--- a/projects/ngx/declarative-ui/form/declarative-form/form-collection-field/form-collection-field.component.ts
+++ b/projects/ngx/declarative-ui/form/declarative-form/form-collection-field/form-collection-field.component.ts
@@ -4,11 +4,10 @@ import {
   ChangeDetectionStrategy,
   Component,
   ViewEncapsulation,
-  effect,
   forwardRef,
   input,
+  linkedSignal,
   output,
-  signal,
 } from '@angular/core';
 import { Button } from '@fundamental-ngx/ui5-webcomponents/button';
 import { Icon } from '@fundamental-ngx/ui5-webcomponents/icon';
@@ -46,16 +45,18 @@ export class FormCollectionField {
 
   readonly initialEntries = input<Record<string, unknown>[]>([]);
   readonly valueChange = output<Record<string, unknown>[]>();
-  protected readonly entries = signal<Record<string, unknown>[]>([]);
-  protected readonly expandedIndex = signal<number | null>(null);
 
-  constructor() {
-    effect(() => {
-      const initial = this.initialEntries();
-      this.entries.set([...(initial ?? [])]);
-      this.expandedIndex.set(null);
-    });
-  }
+  protected readonly entries = linkedSignal<Record<string, unknown>[]>(() => [
+    ...(this.initialEntries() ?? []),
+  ]);
+
+  protected readonly expandedIndex = linkedSignal<
+    Record<string, unknown>[],
+    number | null
+  >({
+    source: this.initialEntries,
+    computation: () => null,
+  });
 
   previewFor(entry: Record<string, unknown>, index: number): string {
     for (const field of this.fields()) {
@@ -82,14 +83,12 @@ export class FormCollectionField {
   remove(index: number): void {
     const next = this.entries().filter((_, i) => i !== index);
     this.entries.set(next);
-    if (this.expandedIndex() === index) {
+    const expandedIndex = this.expandedIndex() as number;
+    if (expandedIndex === index) {
       this.expandedIndex.set(null);
-    } else if (
-      this.expandedIndex() !== null &&
-      (this.expandedIndex() as number) > index
-    ) {
+    } else if (expandedIndex !== null && expandedIndex > index) {
       // Preserve the same expanded row after removing an earlier one.
-      this.expandedIndex.set((this.expandedIndex() as number) - 1);
+      this.expandedIndex.set(expandedIndex - 1);
     }
     this.valueChange.emit(next);
   }

From b4f8f73c33d5489b142aaaae65c903e4f10268fa Mon Sep 17 00:00:00 2001
From: gkrajniak <gkrajniak@gmail.com>
Date: Fri, 10 Jul 2026 12:15:35 +0200
Subject: [PATCH 3/6] simplify solution with the reuse of the property field
 adn renaming the collection to propertyCollection

Signed-off-by: gkrajniak <gkrajniak@gmail.com>
---
 docs/declarative-form.md | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/docs/declarative-form.md b/docs/declarative-form.md
index d5e9598..d74c136 100644
--- a/docs/declarative-form.md
+++ b/docs/declarative-form.md
@@ -131,17 +131,17 @@ export class MyComponent {
 ```ts
 interface FormFieldDefinition {
   name: string;                            // Field key; dots create nested submit output paths
-  label: string;                           // Display label shown above the field
+  label?: string;                          // Display label shown above the field
   required?: boolean;                      // Visual required marker only
   values?: string[];                       // Static select options
   disabled?: boolean;                      // Disables the field
   validation?: 'onBlur' | 'onChange';      // When to emit fieldChange for this field
-  collection?: FormFieldDefinition[];      // Sub-fields for an array-of-objects field; see "Collection fields" below
+  propertyCollection?: FormFieldDefinition[]; // Sub-fields for an array-of-objects field; see "Collection fields" below
 }
 
 interface FormFieldChangeEvent {
   fieldProperty: string;  // The field property name (matches field.name)
-  value: unknown;         // Current value of the control; for a `collection` field this is the full `Array<Record<string, unknown>>`
+  value: unknown;         // Current value of the control; for a `propertyCollection` field this is the full `Array<Record<string, unknown>>`
 }
 
 type FormFieldErrors = Record<string, string | null>;
@@ -153,7 +153,7 @@ type FormFieldErrors = Record<string, string | null>;
 { fieldProperty: 'metadata.name', value: 'my-app' }
 ```
 
-For a `collection` field the payload carries the whole array:
+For a `propertyCollection` field the payload carries the whole array:
 
 ```ts
 {
@@ -180,9 +180,9 @@ For a `collection` field the payload carries the whole array:
 
 ---
 
-## Collection fields (`collection`)
+## Collection fields (`propertyCollection`)
 
-Set `collection` on a `FormFieldDefinition` to declare that the value at this field's `name` is an **array of objects**. The form renders it as a stack of expandable/collapsible cards, one per array entry.
+Set `propertyCollection` on a `FormFieldDefinition` to declare that the value at this field's `name` is an **array of objects**. The form renders it as a stack of expandable/collapsible cards, one per array entry.
 
 ### UX
 
@@ -193,7 +193,7 @@ Set `collection` on a `FormFieldDefinition` to declare that the value at this fi
 
 ### Sub-field definitions
 
-`collection` is a full `FormFieldDefinition[]`. Each sub-field carries the same options as a top-level field (`label`, `values`, `required`, `validation`, `disabled`, and even nested `collection` for array-of-arrays). Sub-field `name` values are used verbatim as keys on each entry object — whatever you write becomes the shape of the emitted payload.
+`propertyCollection` is a full `FormFieldDefinition[]`. Each sub-field carries the same options as a top-level field (`label`, `values`, `required`, `validation`, `disabled`, and even nested `propertyCollection` for array-of-arrays). Sub-field `name` values are used verbatim as keys on each entry object — whatever you write becomes the shape of the emitted payload.
 
 ### Change events for collection fields
 
@@ -208,7 +208,7 @@ const fields: FormFieldDefinition[] = [
   {
     name: 'spec.artifacts',
     label: 'Artifacts',
-    collection: [
+    propertyCollection: [
       { name: 'name', label: 'Name', required: true },
       { name: 'url',  label: 'URL' },
       { name: 'type', label: 'Type', values: ['image', 'chart', 'file'] },
@@ -253,7 +253,7 @@ All interactive elements carry `data-testid` attributes for reliable E2E targeti
 | Field label | `generic-form-field-label-{name}` | |
 | Input or select | `generic-form-field-{name}` | `<ui5-input>` or `<ui5-select>` |
 | Select option | `generic-form-field-{name}-option-{value}` | `value` = option string or `empty` for the blank placeholder |
-| Collection container | `collection-field` | Rendered inside a `collection` field |
+| Collection container | `collection-field` | Rendered inside a `propertyCollection` field |
 | Collection item | `collection-item-{index}` | Zero-based array index |
 | Collection item toggle | `collection-item-{index}-toggle` | Expand / collapse header |
 | Collection item remove | `collection-item-{index}-remove` | Trash icon |

From 8d2dcc9b42741f672d3958ad90784fb9a2f04fce Mon Sep 17 00:00:00 2001
From: gkrajniak <gkrajniak@gmail.com>
Date: Fri, 10 Jul 2026 12:15:47 +0200
Subject: [PATCH 4/6] simplify solution with the reuse of the property field
 adn renaming the collection to propertyCollection

Signed-off-by: gkrajniak <gkrajniak@gmail.com>
---
 .../declarative-form/declarative-form.component.html  |  6 +++---
 .../declarative-form/declarative-form.component.ts    |  4 ++--
 .../form-collection-field.component.ts                |  4 ++--
 .../form/models/form-field-definition.ts              | 11 ++++++-----
 projects/ngx/declarative-ui/models/ui-definition.ts   | 11 +++++++----
 .../stories/declarative-form.stories.ts               | 10 +++++-----
 6 files changed, 25 insertions(+), 21 deletions(-)

diff --git a/projects/ngx/declarative-ui/form/declarative-form/declarative-form.component.html b/projects/ngx/declarative-ui/form/declarative-form/declarative-form.component.html
index abc8376..a4d981e 100644
--- a/projects/ngx/declarative-ui/form/declarative-form/declarative-form.component.html
+++ b/projects/ngx/declarative-ui/form/declarative-form/declarative-form.component.html
@@ -11,11 +11,11 @@
         [required]="field.required"
         >{{ field.label }}</ui5-label
       >
-      @if (field.collection?.length) {
+      @if (field.propertyCollection?.length) {
         <mfp-form-collection-field
           [attr.data-testid]="'generic-form-field-' + field.name"
-          [fields]="field.collection!"
-          [label]="field.label"
+          [fields]="field.propertyCollection!"
+          [label]="field.label ?? ''"
           [initialEntries]="collectionEntries(field)"
           (valueChange)="onCollectionValueChange(field, $event)"
         />
diff --git a/projects/ngx/declarative-ui/form/declarative-form/declarative-form.component.ts b/projects/ngx/declarative-ui/form/declarative-form/declarative-form.component.ts
index 5262826..1468d0f 100644
--- a/projects/ngx/declarative-ui/form/declarative-form/declarative-form.component.ts
+++ b/projects/ngx/declarative-ui/form/declarative-form/declarative-form.component.ts
@@ -167,7 +167,7 @@ export class DeclarativeForm<T extends GenericResource> {
 
     for (const field of fields) {
       const existingControl = existingControls[field.name];
-      const wantsCollection = !!field.collection?.length;
+      const wantsCollection = !!field.propertyCollection?.length;
       const existingIsCollection = existingControl instanceof FormArray;
       if (existingControl && wantsCollection !== existingIsCollection) {
         this.form.removeControl(field.name);
@@ -200,7 +200,7 @@ export class DeclarativeForm<T extends GenericResource> {
 
     const seeds: Record<string, Record<string, unknown>[]> = {};
     for (const field of this.fields()) {
-      if (!field.collection?.length) continue;
+      if (!field.propertyCollection?.length) continue;
       const raw = (initialValues as Record<string, unknown>)[field.name];
       const entries = Array.isArray(raw)
         ? (raw as Record<string, unknown>[])
diff --git a/projects/ngx/declarative-ui/form/declarative-form/form-collection-field/form-collection-field.component.ts b/projects/ngx/declarative-ui/form/declarative-form/form-collection-field/form-collection-field.component.ts
index 131a07a..659f702 100644
--- a/projects/ngx/declarative-ui/form/declarative-form/form-collection-field/form-collection-field.component.ts
+++ b/projects/ngx/declarative-ui/form/declarative-form/form-collection-field/form-collection-field.component.ts
@@ -18,7 +18,7 @@ import '@ui5/webcomponents-icons/dist/navigation-right-arrow.js';
 
 /**
  * Internal collection editor rendered by `mfp-declarative-form` when a field
- * carries `collection` sub-fields.
+ * carries `propertyCollection` sub-fields.
  *
  * Each entry renders as a collapsible card whose expanded body is a nested
  * `<mfp-declarative-form>` bound to that entry. Live changes flow up
@@ -41,7 +41,7 @@ import '@ui5/webcomponents-icons/dist/navigation-right-arrow.js';
 })
 export class FormCollectionField {
   readonly fields = input.required<FormFieldDefinition[]>();
-  readonly label = input.required<string>();
+  readonly label = input<string>('');
 
   readonly initialEntries = input<Record<string, unknown>[]>([]);
   readonly valueChange = output<Record<string, unknown>[]>();
diff --git a/projects/ngx/declarative-ui/form/models/form-field-definition.ts b/projects/ngx/declarative-ui/form/models/form-field-definition.ts
index 31f4a44..46fc27d 100644
--- a/projects/ngx/declarative-ui/form/models/form-field-definition.ts
+++ b/projects/ngx/declarative-ui/form/models/form-field-definition.ts
@@ -3,7 +3,7 @@ export interface FormFieldDefinition {
   /** JSON-path key used to read and write the field value (e.g. `metadata.name`). */
   name: string;
   /** Display label shown above the input. */
-  label: string;
+  label?: string;
   /** When `true`, passes the `required` attribute to the UI5 input — shows a visual required indicator. Validation itself is the host's responsibility via `FormFieldErrors`. */
   required?: boolean;
   /** Fixed list of options rendered as a select/dropdown. */
@@ -16,15 +16,16 @@ export interface FormFieldDefinition {
    * Nested field definitions describing one item of an object collection.
    *
    * When set, this field represents an array of objects; the form renders it
-   * as a stack of expandable/collapsible cards with Add / Edit / Remove
-   * controls. Each Add / Edit opens a nested `mfp-declarative-form` inline
-   * whose `fields` are the entries in `collection`.
+   * as a stack of expandable/collapsible cards. Each card is a nested
+   * `mfp-declarative-form` whose `fields` are the entries in
+   * `propertyCollection`; an inline Add button appends entries and a trash
+   * button removes them. Editing is live — no per-card Save/Cancel.
    *
    * The submitted value at this field's path is `Array<Record<string, unknown>>`,
    * with each entry keyed by the sub-fields' `name`s. When `required` is
    * `true`, the host is expected to require at least one entry in the array.
    */
-  collection?: FormFieldDefinition[];
+  propertyCollection?: FormFieldDefinition[];
 }
 
 /** Event payload emitted each time a single form field value changes. */
diff --git a/projects/ngx/declarative-ui/models/ui-definition.ts b/projects/ngx/declarative-ui/models/ui-definition.ts
index 41f4014..88d410f 100644
--- a/projects/ngx/declarative-ui/models/ui-definition.ts
+++ b/projects/ngx/declarative-ui/models/ui-definition.ts
@@ -141,7 +141,7 @@ export interface ResourceFieldButtonClickEvent<T extends GenericResource> {
 export interface FieldDefinition {
   /** Column header / form label. */
   label?: string;
-  /** Dot-separated path to the resource property (e.g. `metadata.name`). */
+  /** Dot-separated path to the resource property (e.g. `metadata.name`). For a collection field this is the path to the array itself (e.g. `status.conditions`). */
   property?: string | string[];
   /** Alternative path resolver with optional transforms. */
   propertyField?: PropertyField;
@@ -151,7 +151,10 @@ export interface FieldDefinition {
   value?: string;
   /** Display and interaction configuration for this cell. */
   uiSettings?: UiSettings;
-  /** Dot-separated path to the resource collection property (e.g. `status.conditions`). */
-  collectionProperty?: string;
-  collection?: FieldDefinition[];
+  /**
+   * Sub-field definitions describing one entry of an array-of-objects field.
+   * When set, `property` points at the array; each sub-field describes one
+   * column/input of an entry. Mirrors `propertyField` naming for consistency.
+   */
+  propertyCollection?: FieldDefinition[];
 }
diff --git a/projects/ngx/declarative-ui/stories/declarative-form.stories.ts b/projects/ngx/declarative-ui/stories/declarative-form.stories.ts
index 2ff8346..9479ee6 100644
--- a/projects/ngx/declarative-ui/stories/declarative-form.stories.ts
+++ b/projects/ngx/declarative-ui/stories/declarative-form.stories.ts
@@ -14,7 +14,7 @@ import type { Meta, StoryObj } from '@storybook/angular';
   // pre-built bundle loaded via `<script src="/mfp-webcomponents.js">` and
   // does NOT reflect in-tree source changes until it's rebuilt — using the
   // Angular selector keeps the dev loop fast and picks up new field kinds
-  // (like `collection`) automatically.
+  // (like `propertyCollection`) automatically.
   imports: [DeclarativeForm],
   template: `
     <mfp-declarative-form
@@ -37,7 +37,7 @@ class DeclarativeFormStory {
     const nextErrors = { ...this.fieldErrors };
     if (!field?.required) {
       nextErrors[fieldProperty] = null;
-    } else if (field.collection?.length) {
+    } else if (field.propertyCollection?.length) {
       // Required collection = at least one committed object entry.
       const arr = Array.isArray(value) ? (value as unknown[]) : [];
       nextErrors[fieldProperty] = arr.length
@@ -180,7 +180,7 @@ export const WithCollection: Story = {
       {
         name: 'spec_artifacts',
         label: 'Artifacts',
-        collection: [
+        propertyCollection: [
           {
             name: 'name',
             label: 'Name',
@@ -236,7 +236,7 @@ export const WithCollectionEditMode: Story = {
       {
         name: 'spec_artifacts',
         label: 'Artifacts',
-        collection: [
+        propertyCollection: [
           { name: 'name', label: 'Name', required: true },
           { name: 'url', label: 'URL' },
           {
@@ -271,7 +271,7 @@ export const WithRequiredCollection: Story = {
         label: 'Artifacts',
         required: true,
         validation: 'onChange',
-        collection: [
+        propertyCollection: [
           { name: 'name', label: 'Name', required: true },
           { name: 'url', label: 'URL' },
         ],

From 21ce8cbdec6a5e7f5b4ffc7535ed46cd4e204e47 Mon Sep 17 00:00:00 2001
From: gkrajniak <gkrajniak@gmail.com>
Date: Fri, 10 Jul 2026 12:30:13 +0200
Subject: [PATCH 5/6] revert label in form field as required

Signed-off-by: gkrajniak <gkrajniak@gmail.com>
---
 docs/declarative-form.md                                        | 2 +-
 .../form/declarative-form/declarative-form.component.html       | 2 +-
 .../form-collection-field/form-collection-field.component.ts    | 2 +-
 .../ngx/declarative-ui/form/models/form-field-definition.ts     | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/declarative-form.md b/docs/declarative-form.md
index d74c136..5e4628a 100644
--- a/docs/declarative-form.md
+++ b/docs/declarative-form.md
@@ -131,7 +131,7 @@ export class MyComponent {
 ```ts
 interface FormFieldDefinition {
   name: string;                            // Field key; dots create nested submit output paths
-  label?: string;                          // Display label shown above the field
+  label: string;                           // Display label shown above the field
   required?: boolean;                      // Visual required marker only
   values?: string[];                       // Static select options
   disabled?: boolean;                      // Disables the field
diff --git a/projects/ngx/declarative-ui/form/declarative-form/declarative-form.component.html b/projects/ngx/declarative-ui/form/declarative-form/declarative-form.component.html
index a4d981e..3b5ade5 100644
--- a/projects/ngx/declarative-ui/form/declarative-form/declarative-form.component.html
+++ b/projects/ngx/declarative-ui/form/declarative-form/declarative-form.component.html
@@ -15,7 +15,7 @@
         <mfp-form-collection-field
           [attr.data-testid]="'generic-form-field-' + field.name"
           [fields]="field.propertyCollection!"
-          [label]="field.label ?? ''"
+          [label]="field.label"
           [initialEntries]="collectionEntries(field)"
           (valueChange)="onCollectionValueChange(field, $event)"
         />
diff --git a/projects/ngx/declarative-ui/form/declarative-form/form-collection-field/form-collection-field.component.ts b/projects/ngx/declarative-ui/form/declarative-form/form-collection-field/form-collection-field.component.ts
index 659f702..8f9f828 100644
--- a/projects/ngx/declarative-ui/form/declarative-form/form-collection-field/form-collection-field.component.ts
+++ b/projects/ngx/declarative-ui/form/declarative-form/form-collection-field/form-collection-field.component.ts
@@ -41,7 +41,7 @@ import '@ui5/webcomponents-icons/dist/navigation-right-arrow.js';
 })
 export class FormCollectionField {
   readonly fields = input.required<FormFieldDefinition[]>();
-  readonly label = input<string>('');
+  readonly label = input.required<string>();
 
   readonly initialEntries = input<Record<string, unknown>[]>([]);
   readonly valueChange = output<Record<string, unknown>[]>();
diff --git a/projects/ngx/declarative-ui/form/models/form-field-definition.ts b/projects/ngx/declarative-ui/form/models/form-field-definition.ts
index 46fc27d..ff5c901 100644
--- a/projects/ngx/declarative-ui/form/models/form-field-definition.ts
+++ b/projects/ngx/declarative-ui/form/models/form-field-definition.ts
@@ -3,7 +3,7 @@ export interface FormFieldDefinition {
   /** JSON-path key used to read and write the field value (e.g. `metadata.name`). */
   name: string;
   /** Display label shown above the input. */
-  label?: string;
+  label: string;
   /** When `true`, passes the `required` attribute to the UI5 input — shows a visual required indicator. Validation itself is the host's responsibility via `FormFieldErrors`. */
   required?: boolean;
   /** Fixed list of options rendered as a select/dropdown. */

From db0e8dd0f4cba7ea72b5fb87aec0c5ca02bda1db Mon Sep 17 00:00:00 2001
From: gkrajniak <gkrajniak@gmail.com>
Date: Fri, 10 Jul 2026 14:25:23 +0200
Subject: [PATCH 6/6] Add collection display to the resource filed component

Signed-off-by: gkrajniak <gkrajniak@gmail.com>
---
 .../resource-collection-field.component.html  |  38 ++++
 .../resource-collection-field.component.scss  |  75 +++++++
 ...esource-collection-field.component.spec.ts | 126 +++++++++++
 .../resource-collection-field.component.ts    | 108 ++++++++++
 .../resource-field.component.html             | 137 ++++++------
 .../resource-field.component.scss             |   5 +
 .../resource-field.component.spec.ts          |  26 +++
 .../resource-field.component.ts               |  44 +++-
 .../stories/declarative-table-card.stories.ts | 199 ++++++++++++++++++
 9 files changed, 686 insertions(+), 72 deletions(-)
 create mode 100644 projects/ngx/declarative-ui/resource-field/resource-collection-field/resource-collection-field.component.html
 create mode 100644 projects/ngx/declarative-ui/resource-field/resource-collection-field/resource-collection-field.component.scss
 create mode 100644 projects/ngx/declarative-ui/resource-field/resource-collection-field/resource-collection-field.component.spec.ts
 create mode 100644 projects/ngx/declarative-ui/resource-field/resource-collection-field/resource-collection-field.component.ts

diff --git a/projects/ngx/declarative-ui/resource-field/resource-collection-field/resource-collection-field.component.html b/projects/ngx/declarative-ui/resource-field/resource-collection-field/resource-collection-field.component.html
new file mode 100644
index 0000000..2b0613f
--- /dev/null
+++ b/projects/ngx/declarative-ui/resource-field/resource-collection-field/resource-collection-field.component.html
@@ -0,0 +1,38 @@
+<div class="collection" data-testid="resource-collection-field">
+  @for (entry of entries(); track $index; let index = $index) {
+    @let expanded = expandedIndex() === index;
+    <div
+      class="card"
+      [class.card--expanded]="expanded"
+      [attr.data-testid]="'resource-collection-item-' + index"
+    >
+      <button
+        type="button"
+        class="card__header"
+        [attr.aria-expanded]="expanded"
+        [attr.data-testid]="'resource-collection-item-' + index + '-toggle'"
+        (click)="toggle(index, $event)"
+      >
+        <ui5-icon
+          class="card__chevron"
+          [name]="expanded ? 'navigation-down-arrow' : 'navigation-right-arrow'"
+        />
+        <span class="card__preview">{{ previewFor(entry, index) }}</span>
+      </button>
+
+      @if (expanded) {
+        <div class="card__body" (click)="$event.stopPropagation()">
+          @for (row of rows(); track row.field.property) {
+            <div class="row">
+              <span class="row__label">{{ row.label }}:</span>
+              <mfp-resource-field
+                [fieldDefinition]="row.field"
+                [resource]="entry"
+              />
+            </div>
+          }
+        </div>
+      }
+    </div>
+  }
+</div>
diff --git a/projects/ngx/declarative-ui/resource-field/resource-collection-field/resource-collection-field.component.scss b/projects/ngx/declarative-ui/resource-field/resource-collection-field/resource-collection-field.component.scss
new file mode 100644
index 0000000..2c3245a
--- /dev/null
+++ b/projects/ngx/declarative-ui/resource-field/resource-collection-field/resource-collection-field.component.scss
@@ -0,0 +1,75 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+.collection {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: 100%;
+  padding-top: 0.25rem;
+}
+
+.card {
+  border: 1px solid var(--sapGroup_ContentBorderColor, #d9d9d9);
+  border-radius: 0.5rem;
+  background: var(--sapGroup_TitleBackground, #fff);
+  overflow: hidden;
+
+  &--expanded {
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    width: 100%;
+    padding: 0 0.75rem;
+    background: transparent;
+    border: 0;
+    text-align: left;
+    cursor: pointer;
+    font: inherit;
+    min-height: 1.5rem;
+    color: var(--sapTextColor, #1d2d3e);
+
+    &:hover {
+      background: var(--sapList_Hover_Background, rgba(0, 0, 0, 0.03));
+    }
+  }
+
+  &__chevron {
+    flex: 0 0 auto;
+    color: var(--sapContent_IconColor, #6a6d70);
+  }
+
+  &__preview {
+    font-weight: 500;
+    color: var(--sapTextColor, #1d2d3e);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__body {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 0.75rem 1rem 1rem;
+    border-top: 1px solid var(--sapGroup_ContentBorderColor, #d9d9d9);
+  }
+}
+
+.row {
+  display: flex;
+  gap: 0.25rem;
+  align-items: baseline;
+
+  &__label {
+    font-weight: 500;
+    color: var(--sapContent_LabelColor, #556b82);
+    white-space: nowrap;
+  }
+}
diff --git a/projects/ngx/declarative-ui/resource-field/resource-collection-field/resource-collection-field.component.spec.ts b/projects/ngx/declarative-ui/resource-field/resource-collection-field/resource-collection-field.component.spec.ts
new file mode 100644
index 0000000..b5ce2fa
--- /dev/null
+++ b/projects/ngx/declarative-ui/resource-field/resource-collection-field/resource-collection-field.component.spec.ts
@@ -0,0 +1,126 @@
+import { FieldDefinition, GenericResource } from '../../models';
+import { ResourceCollectionField } from './resource-collection-field.component';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+type Fixture = ComponentFixture<
+  ResourceCollectionField<GenericResource, FieldDefinition>
+>;
+type Comp = ResourceCollectionField<GenericResource, FieldDefinition>;
+
+const CONDITIONS_FIELD: FieldDefinition = {
+  label: 'Conditions',
+  property: 'status.conditions',
+  propertyCollection: [
+    { label: 'Type', property: 'status.conditions.type' },
+    { label: 'Status', property: 'status.conditions.status' },
+    { label: 'Reason', property: 'status.conditions.reason' },
+  ],
+};
+
+function setup(
+  field: FieldDefinition,
+  resource?: Partial<GenericResource>,
+): { fixture: Fixture; component: Comp } {
+  const fixture: Fixture = TestBed.createComponent(
+    ResourceCollectionField as unknown as typeof ResourceCollectionField<
+      GenericResource,
+      FieldDefinition
+    >,
+  );
+  const component = fixture.componentInstance;
+  fixture.componentRef.setInput('fieldDefinition', field);
+  if (resource !== undefined)
+    fixture.componentRef.setInput('resource', resource as GenericResource);
+  fixture.detectChanges();
+  return { fixture, component };
+}
+
+function root(fixture: Fixture): ParentNode {
+  return fixture.nativeElement.shadowRoot ?? fixture.nativeElement;
+}
+
+function all(fixture: Fixture, selector: string): Element[] {
+  return Array.from(root(fixture).querySelectorAll(selector));
+}
+
+function el(fixture: Fixture, testId: string): Element | null {
+  return root(fixture).querySelector(`[data-testid="${testId}"]`);
+}
+
+describe('ResourceCollectionField', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ResourceCollectionField],
+    }).compileComponents();
+  });
+
+  it('renders one collapsed card per array entry', () => {
+    const { fixture } = setup(CONDITIONS_FIELD, {
+      status: {
+        conditions: [
+          { type: 'Ready', status: 'True', reason: 'OK' },
+          { type: 'Progressing', status: 'False', reason: 'Retry' },
+        ],
+      },
+    } as unknown as GenericResource);
+
+    expect(all(fixture, '.card').length).toBe(2);
+    expect(all(fixture, '.card__body').length).toBe(0);
+  });
+
+  it('shows the first non-empty sub-field as the header preview', () => {
+    const { fixture } = setup(CONDITIONS_FIELD, {
+      status: { conditions: [{ type: 'Ready', status: 'True' }] },
+    } as unknown as GenericResource);
+
+    expect(
+      el(fixture, 'resource-collection-item-0-toggle')?.textContent,
+    ).toContain('Type: Ready');
+  });
+
+  it('falls back to label and index when the entry is empty', () => {
+    const { fixture } = setup(CONDITIONS_FIELD, {
+      status: { conditions: [{}] },
+    } as unknown as GenericResource);
+
+    expect(
+      el(fixture, 'resource-collection-item-0-toggle')?.textContent,
+    ).toContain('Conditions 1');
+  });
+
+  it('expands a single card and renders a resource-field per sub-field', () => {
+    const { fixture, component } = setup(CONDITIONS_FIELD, {
+      status: { conditions: [{ type: 'Ready', status: 'True', reason: 'OK' }] },
+    } as unknown as GenericResource);
+
+    component.toggle(0);
+    fixture.detectChanges();
+
+    const bodies = all(fixture, '.card__body');
+    expect(bodies.length).toBe(1);
+    expect(bodies[0].querySelectorAll('mfp-resource-field').length).toBe(3);
+    expect(bodies[0].textContent).toContain('Type:');
+  });
+
+  it('collapses an expanded card when toggled again', () => {
+    const { fixture, component } = setup(CONDITIONS_FIELD, {
+      status: { conditions: [{ type: 'Ready' }] },
+    } as unknown as GenericResource);
+
+    component.toggle(0);
+    fixture.detectChanges();
+    expect(all(fixture, '.card__body').length).toBe(1);
+
+    component.toggle(0);
+    fixture.detectChanges();
+    expect(all(fixture, '.card__body').length).toBe(0);
+  });
+
+  it('renders no cards when the collection path is missing or not an array', () => {
+    const { fixture } = setup(CONDITIONS_FIELD, {
+      status: {},
+    } as unknown as GenericResource);
+
+    expect(all(fixture, '.card').length).toBe(0);
+  });
+});
diff --git a/projects/ngx/declarative-ui/resource-field/resource-collection-field/resource-collection-field.component.ts b/projects/ngx/declarative-ui/resource-field/resource-collection-field/resource-collection-field.component.ts
new file mode 100644
index 0000000..3719216
--- /dev/null
+++ b/projects/ngx/declarative-ui/resource-field/resource-collection-field/resource-collection-field.component.ts
@@ -0,0 +1,108 @@
+import { FieldDefinition, GenericResource } from '../../models';
+import { getResourceValueByJsonPath } from '../../table/utils/resource-field-by-path';
+import { ResourceField } from '../resource-field.component';
+import {
+  CUSTOM_ELEMENTS_SCHEMA,
+  ChangeDetectionStrategy,
+  Component,
+  ViewEncapsulation,
+  computed,
+  forwardRef,
+  input,
+  signal,
+} from '@angular/core';
+import { Icon } from '@fundamental-ngx/ui5-webcomponents/icon';
+import '@ui5/webcomponents-icons/dist/navigation-down-arrow.js';
+import '@ui5/webcomponents-icons/dist/navigation-right-arrow.js';
+
+/** One `label: value` row of an expanded collection card. */
+interface CollectionRow {
+  label: string;
+  field: FieldDefinition;
+}
+
+/**
+ * Read-only display for a `propertyCollection` field. Renders the resolved
+ * array as a column of collapsed cards; expanding a card lists each sub-field
+ * as a `label: value` row rendered through `mfp-resource-field`, so per-
+ * sub-field `uiSettings` still apply. Mirrors the styling of the editable
+ * `mfp-form-collection-field`.
+ */
+@Component({
+  selector: 'mfp-resource-collection-field',
+  // `ResourceField` imports this component back, so the two form a module-init
+  // cycle. `forwardRef` defers resolution until the template is instantiated.
+  imports: [Icon, forwardRef(() => ResourceField)],
+  templateUrl: './resource-collection-field.component.html',
+  styleUrl: './resource-collection-field.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.ShadowDom,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class ResourceCollectionField<
+  T extends GenericResource,
+  F extends FieldDefinition,
+> {
+  readonly fieldDefinition = input.required<F>();
+  readonly resource = input<T>();
+
+  protected readonly expandedIndex = signal<number | null>(null);
+
+  private readonly collectionPath = computed(() => {
+    const property = this.fieldDefinition().property;
+    return typeof property === 'string' ? property : undefined;
+  });
+
+  protected readonly entries = computed<Record<string, unknown>[]>(() => {
+    const value = getResourceValueByJsonPath(this.resource() ?? {}, {
+      property: this.collectionPath(),
+    });
+    return Array.isArray(value) ? (value as Record<string, unknown>[]) : [];
+  });
+
+  protected readonly rows = computed<CollectionRow[]>(() => {
+    const parent = this.collectionPath();
+    return (this.fieldDefinition().propertyCollection ?? []).map((sub) => {
+      const property =
+        typeof sub.property === 'string'
+          ? stripParentPath(sub.property, parent)
+          : sub.property;
+      return {
+        label: sub.label ?? leafOf(property),
+        field: { ...sub, property } as FieldDefinition,
+      };
+    });
+  });
+
+  toggle(index: number, event?: Event): void {
+    event?.stopPropagation();
+    this.expandedIndex.set(this.expandedIndex() === index ? null : index);
+  }
+
+  previewFor(entry: Record<string, unknown>, index: number): string {
+    for (const row of this.rows()) {
+      const raw = getResourceValueByJsonPath(entry, {
+        property: row.field.property,
+      });
+      if (raw !== undefined && raw !== null && String(raw).trim() !== '') {
+        return `${row.label}: ${String(raw)}`;
+      }
+    }
+    const prefix = (this.fieldDefinition().label ?? '').trim() || 'Item';
+    return `${prefix} ${index + 1}`;
+  }
+}
+
+function stripParentPath(name: string, parent: string | undefined): string {
+  if (!parent) return name;
+  if (name.startsWith(parent + '.')) {
+    return name.slice(parent.length + 1);
+  }
+  return name;
+}
+
+function leafOf(property: string | string[] | undefined): string {
+  if (typeof property !== 'string') return '';
+  const segments = property.split('.');
+  return segments[segments.length - 1];
+}
diff --git a/projects/ngx/declarative-ui/resource-field/resource-field.component.html b/projects/ngx/declarative-ui/resource-field/resource-field.component.html
index 2ce9d7f..4d5ccae 100644
--- a/projects/ngx/declarative-ui/resource-field/resource-field.component.html
+++ b/projects/ngx/declarative-ui/resource-field/resource-field.component.html
@@ -1,72 +1,79 @@
-@let displayType = displayAs();
-<span [attr.data-testid]="testId()" [style]="cssStyles()">
-  @if (displayType === 'secret') {
-    <span class="secret-value-container">
-      <mfp-secret-value [isVisible]="isVisible()" [testId]="testId() + '-secret'" [value]="value()" />
-      <ui5-icon
-        class="toggle-icon"
-        mode="Interactive"
-        [accessibleName]="isVisible() ? 'Hide value' : 'Show value'"
-        [attr.data-testid]="testId() + '-secret-toggle'"
-        [name]="isVisible() ? 'hide' : 'show'"
-        (click)="toggleVisibility($event)"
-      />
-    </span>
-  } @else if (displayType === 'boolIcon' && isBoolLike()) {
-    <mfp-boolean-value [boolValue]="boolValue()!" [testId]="testId() + '-boolean'" />
-  } @else if (displayType === 'link' && isUrlValue()) {
-    <mfp-link-value [testId]="testId() + '-link'" [urlValue]="stringValue()!" />
-  } @else if (displayType === 'tooltip') {
-    <ui5-icon
-      [accessibleName]="stringValue()!"
-      [attr.data-testid]="testId() + '-tooltip'"
-      [name]="tooltipIcon() ?? 'hint'"
-      [showTooltip]="true"
-    />
-  } @else if (displayType === 'alert') {
-    @if (!value()) {
+@if (isCollection()) {
+  <mfp-resource-collection-field
+    [fieldDefinition]="fieldDefinition()"
+    [resource]="resource()"
+  />
+} @else {
+  @let displayType = displayAs();
+  <span [attr.data-testid]="testId()" [style]="cssStyles()">
+    @if (displayType === 'secret') {
+      <span class="secret-value-container">
+        <mfp-secret-value [isVisible]="isVisible()" [testId]="testId() + '-secret'" [value]="value()" />
+        <ui5-icon
+          class="toggle-icon"
+          mode="Interactive"
+          [accessibleName]="isVisible() ? 'Hide value' : 'Show value'"
+          [attr.data-testid]="testId() + '-secret-toggle'"
+          [name]="isVisible() ? 'hide' : 'show'"
+          (click)="toggleVisibility($event)"
+        />
+      </span>
+    } @else if (displayType === 'boolIcon' && isBoolLike()) {
+      <mfp-boolean-value [boolValue]="boolValue()!" [testId]="testId() + '-boolean'" />
+    } @else if (displayType === 'link' && isUrlValue()) {
+      <mfp-link-value [testId]="testId() + '-link'" [urlValue]="stringValue()!" />
+    } @else if (displayType === 'tooltip') {
       <ui5-icon
-        design="Critical"
-        name="alert"
-        [accessibleName]="resource()?.accessibleName ?? ''"
-        [attr.data-testid]="testId() + '-icon'"
+        [accessibleName]="stringValue()!"
+        [attr.data-testid]="testId() + '-tooltip'"
+        [name]="tooltipIcon() ?? 'hint'"
         [showTooltip]="true"
-        (click)="$event.stopPropagation()"
       />
+    } @else if (displayType === 'alert') {
+      @if (!value()) {
+        <ui5-icon
+          design="Critical"
+          name="alert"
+          [accessibleName]="resource()?.accessibleName ?? ''"
+          [attr.data-testid]="testId() + '-icon'"
+          [showTooltip]="true"
+          (click)="$event.stopPropagation()"
+        />
+      }
+    } @else if (displayType === 'img' && value()) {
+      <img alt="Resource image" class="image-cell" [src]="value()" />
+    } @else if (displayType === 'button') {
+      @let buttonSettings = uiSettings()?.buttonSettings;
+      <ui5-button
+        [attr.data-testid]="testId() + '-button'"
+        [accessibleName]="buttonSettings?.text || buttonSettings?.tooltip || buttonSettings?.icon || ''"
+        [design]="buttonSettings?.design"
+        [endIcon]="buttonSettings?.endIcon"
+        [icon]="buttonSettings?.icon"
+        [tooltip]="buttonSettings?.tooltip"
+        (click)="buttonClicked($event)"
+        >{{ buttonSettings?.text }}</ui5-button
+      >&nbsp;
+    } @else if (displayType === 'tag') {
+      <mfp-tag-list-value
+        [tagSettings]="uiSettings()?.tagSettings"
+        [tags]="tags()"
+        [testId]="testId() + '-tags'"
+      />
+    } @else {
+      {{ displayValue() }}
     }
-  } @else if (displayType === 'img' && value()) {
-    <img alt="Resource image" class="image-cell" [src]="value()" />
-  } @else if (displayType === 'button') {
-    @let buttonSettings = uiSettings()?.buttonSettings;
-    <ui5-button
-      [attr.data-testid]="testId() + '-button'"
-      [accessibleName]="buttonSettings?.text || buttonSettings?.tooltip || buttonSettings?.icon || ''"
-      [design]="buttonSettings?.design"
-      [endIcon]="buttonSettings?.endIcon"
-      [icon]="buttonSettings?.icon"
-      [tooltip]="buttonSettings?.tooltip"
-      (click)="buttonClicked($event)"
-      >{{ buttonSettings?.text }}</ui5-button
-    >&nbsp;
-  } @else if (displayType === 'tag') {
-    <mfp-tag-list-value
-      [tagSettings]="uiSettings()?.tagSettings"
-      [tags]="tags()"
-      [testId]="testId() + '-tags'"
+  </span>
+
+  @if (withCopyButton()) {
+    <ui5-icon
+      class="toggle-icon"
+      mode="Interactive"
+      [accessibleName]="copySuccess() ? 'Copied' : 'Copy value'"
+      [attr.data-testid]="testId() + '-copy'"
+      [design]="copySuccess() ? 'Positive' : 'Default'"
+      [name]="copySuccess() ? 'accept' : 'copy'"
+      (click)="copyValue($event)"
     />
-  } @else {
-    {{ displayValue() }}
   }
-</span>
-
-@if (withCopyButton()) {
-  <ui5-icon
-    class="toggle-icon"
-    mode="Interactive"
-    [accessibleName]="copySuccess() ? 'Copied' : 'Copy value'"
-    [attr.data-testid]="testId() + '-copy'"
-    [design]="copySuccess() ? 'Positive' : 'Default'"
-    [name]="copySuccess() ? 'accept' : 'copy'"
-    (click)="copyValue($event)"
-  />
 }
diff --git a/projects/ngx/declarative-ui/resource-field/resource-field.component.scss b/projects/ngx/declarative-ui/resource-field/resource-field.component.scss
index 12dba3c..5aa8bf1 100644
--- a/projects/ngx/declarative-ui/resource-field/resource-field.component.scss
+++ b/projects/ngx/declarative-ui/resource-field/resource-field.component.scss
@@ -3,6 +3,11 @@
   align-items: center;
 }
 
+:host(.resource-field--collection) {
+  display: block;
+  width: 100%;
+}
+
 .secret-value-container {
   display: flex;
   align-items: center;
diff --git a/projects/ngx/declarative-ui/resource-field/resource-field.component.spec.ts b/projects/ngx/declarative-ui/resource-field/resource-field.component.spec.ts
index 8b60992..63d338e 100644
--- a/projects/ngx/declarative-ui/resource-field/resource-field.component.spec.ts
+++ b/projects/ngx/declarative-ui/resource-field/resource-field.component.spec.ts
@@ -427,4 +427,30 @@ describe('ResourceField', () => {
       expect(span?.textContent?.trim()).toBe('Pending');
     });
   });
+
+  describe('collection display', () => {
+    it('delegates to mfp-resource-collection-field when the field has propertyCollection', () => {
+      const { fixture } = setup(
+        {
+          label: 'Conditions',
+          property: 'status.conditions',
+          propertyCollection: [
+            { label: 'Type', property: 'status.conditions.type' },
+          ],
+        },
+        {
+          status: { conditions: [{ type: 'Ready' }] },
+        } as unknown as GenericResource,
+      );
+
+      const scope = fixture.nativeElement.shadowRoot ?? fixture.nativeElement;
+      expect(scope.querySelector('mfp-resource-collection-field')).toBeTruthy();
+    });
+
+    it('renders a scalar value (no collection) for a plain field', () => {
+      const { fixture } = setup({ property: 'status' }, { status: 'Active' });
+      const scope = fixture.nativeElement.shadowRoot ?? fixture.nativeElement;
+      expect(scope.querySelector('mfp-resource-collection-field')).toBeNull();
+    });
+  });
 });
diff --git a/projects/ngx/declarative-ui/resource-field/resource-field.component.ts b/projects/ngx/declarative-ui/resource-field/resource-field.component.ts
index 3d78a09..017a6df 100644
--- a/projects/ngx/declarative-ui/resource-field/resource-field.component.ts
+++ b/projects/ngx/declarative-ui/resource-field/resource-field.component.ts
@@ -3,10 +3,14 @@ import {
   GenericResource,
   ResourceFieldButtonClickEvent,
 } from '../models';
-import { evaluateCssRules, evaluateValueRules } from '../table/utils/rules.engine';
 import { getFieldValue } from '../table/utils/field-definition.utils';
+import {
+  evaluateCssRules,
+  evaluateValueRules,
+} from '../table/utils/rules.engine';
 import { BooleanValue } from './boolean-value/boolean-value.component';
 import { LinkValue } from './link-value/link-value.component';
+import { ResourceCollectionField } from './resource-collection-field/resource-collection-field.component';
 import { SecretValue } from './secret-value/secret-value.component';
 import { TagListValue } from './tag-list-value/tag-list-value.component';
 import {
@@ -15,6 +19,7 @@ import {
   Component,
   ViewEncapsulation,
   computed,
+  forwardRef,
   input,
   output,
   signal,
@@ -25,14 +30,32 @@ import '@ui5/webcomponents-icons/dist/AllIcons.js';
 
 @Component({
   selector: 'mfp-resource-field',
-  imports: [Icon, BooleanValue, LinkValue, SecretValue, Button, TagListValue],
+  imports: [
+    Icon,
+    BooleanValue,
+    LinkValue,
+    SecretValue,
+    Button,
+    TagListValue,
+    // `ResourceCollectionField` imports this component back (each expanded
+    // card renders its sub-fields via `mfp-resource-field`), so the two form
+    // a module-init cycle. `forwardRef` defers resolution until the template
+    // is instantiated, by which point both classes are defined.
+    forwardRef(() => ResourceCollectionField),
+  ],
   templateUrl: './resource-field.component.html',
   styleUrl: './resource-field.component.scss',
+  host: {
+    '[class.resource-field--collection]': 'isCollection()',
+  },
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.ShadowDom,
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
-export class ResourceField<T extends GenericResource, F extends FieldDefinition> {
+export class ResourceField<
+  T extends GenericResource,
+  F extends FieldDefinition,
+> {
   fieldDefinition = input.required<F>();
   resource = input<T>();
   readonly buttonClick = output<ResourceFieldButtonClickEvent<T>>();
@@ -53,8 +76,8 @@ export class ResourceField<T extends GenericResource, F extends FieldDefinition>
     ...this.cssCustomization(),
     ...this.cssRules(),
   }));
-  displayValue = computed(
-    () => evaluateValueRules(this.value() ?? '', this.uiSettings()?.valueRules),
+  displayValue = computed(() =>
+    evaluateValueRules(this.value() ?? '', this.uiSettings()?.valueRules),
   );
 
   isBoolLike = computed(() => this.boolValue() !== undefined);
@@ -67,6 +90,10 @@ export class ResourceField<T extends GenericResource, F extends FieldDefinition>
   isVisible = signal(false);
   copySuccess = signal(false);
 
+  isCollection = computed(
+    () => !!this.fieldDefinition().propertyCollection?.length,
+  );
+
   toggleVisibility(e: Event): void {
     e.stopPropagation();
     this.isVisible.set(!this.isVisible());
@@ -93,11 +120,14 @@ export class ResourceField<T extends GenericResource, F extends FieldDefinition>
 
   private normalizeTagsArray(value: unknown): string[] {
     if (Array.isArray(value)) {
-      return value.map(v => String(v).trim()).filter(v => v.length > 0);
+      return value.map((v) => String(v).trim()).filter((v) => v.length > 0);
     }
     if (typeof value === 'string') {
       const separator = this.uiSettings()?.tagSettings?.valueSeparator ?? ',';
-      return value.split(separator).map(v => v.trim()).filter(v => v.length > 0);
+      return value
+        .split(separator)
+        .map((v) => v.trim())
+        .filter((v) => v.length > 0);
     }
     return [];
   }
diff --git a/projects/ngx/declarative-ui/stories/declarative-table-card.stories.ts b/projects/ngx/declarative-ui/stories/declarative-table-card.stories.ts
index 2fcc51f..367de06 100644
--- a/projects/ngx/declarative-ui/stories/declarative-table-card.stories.ts
+++ b/projects/ngx/declarative-ui/stories/declarative-table-card.stories.ts
@@ -13,6 +13,9 @@ import type { TableFieldDefinition } from '../table/models';
 import { Component, Input } from '@angular/core';
 import type { Meta, StoryObj } from '@storybook/angular';
 import '@ui5/webcomponents-icons/dist/detail-view.js';
+import '@ui5/webcomponents-icons/dist/inspect.js';
+import '@ui5/webcomponents-icons/dist/restart.js';
+import '@ui5/webcomponents-icons/dist/stop.js';
 
 // ---------------------------------------------------------------------------
 // Sample data
@@ -613,3 +616,199 @@ export const WithFilterTabsOverflow: Story = {
     },
   },
 };
+
+// ---------------------------------------------------------------------------
+// Rich collection cells: a collection column whose sub-fields exercise tags,
+// a secret, a css-coloured phrase, and icon-only row actions
+// ---------------------------------------------------------------------------
+
+interface RichPod extends GenericResource {
+  id: string;
+  metadata: { name: string; namespace: string; uid: string };
+  spec: { description: string };
+  status: {
+    conditions: {
+      type: string;
+      status: string;
+      phase: string;
+      token: string;
+    }[];
+  };
+}
+
+const RICH_PODS: RichPod[] = [
+  {
+    id: 'rp-001',
+    metadata: { name: 'api-server-7d9f', namespace: 'default', uid: 'rp-001' },
+    spec: { description: 'Front-facing API server pod' },
+    status: {
+      conditions: [
+        {
+          type: 'Ready',
+          status: 'True',
+          phase: 'Running',
+          token: 'sk-live-7f3a9c21b48e5d0f',
+        },
+        {
+          type: 'Initialized',
+          status: 'True',
+          phase: 'Pending',
+          token: 'sk-live-0d1e2f3a4b5c6d7e',
+        },
+      ],
+    },
+    isAvailable: true,
+  },
+  {
+    id: 'rp-002',
+    metadata: { name: 'worker-5bc8', namespace: 'default', uid: 'rp-002' },
+    spec: { description: 'Background job worker' },
+    status: {
+      conditions: [
+        {
+          type: 'Ready',
+          status: 'False',
+          phase: 'Failed',
+          token: 'sk-live-1a2b3c4d5e6f7a8b',
+        },
+      ],
+    },
+    isAvailable: true,
+  },
+  {
+    id: 'rp-003',
+    metadata: {
+      name: 'db-postgres-0',
+      namespace: 'production',
+      uid: 'rp-003',
+    },
+    spec: { description: 'Primary Postgres database' },
+    status: {
+      conditions: [
+        {
+          type: 'Ready',
+          status: 'True',
+          phase: 'Running',
+          token: 'sk-live-9z8y7x6w5v4u3t2s',
+        },
+      ],
+    },
+    isAvailable: false,
+  },
+];
+
+const PHASE_CSS_RULES = [
+  {
+    if: { condition: 'equals' as const, value: 'Running' },
+    styles: { color: 'var(--sapPositiveColor, #107e3e)', fontWeight: '600' },
+  },
+  {
+    if: { condition: 'equals' as const, value: 'Pending' },
+    styles: { color: 'var(--sapCriticalColor, #e9730c)', fontWeight: '600' },
+  },
+  {
+    if: { condition: 'equals' as const, value: 'Failed' },
+    styles: { color: 'var(--sapNegativeColor, #bb0000)', fontWeight: '600' },
+  },
+];
+
+const RICH_COLUMNS: TableFieldDefinition[] = [
+  { label: 'Name', property: 'metadata.name' },
+  { label: 'Description', property: 'spec.description' },
+  {
+    label: 'Conditions',
+    property: 'status.conditions',
+    propertyCollection: [
+      {
+        label: 'Type',
+        property: 'status.conditions.type',
+        uiSettings: {
+          displayAs: 'tag',
+          tagSettings: { design: 'Set2', colorScheme: '2' },
+        },
+      },
+      {
+        label: 'Status',
+        property: 'status.conditions.status',
+        uiSettings: {
+          displayAs: 'tag',
+          tagSettings: { design: 'Set2', colorScheme: '6' },
+        },
+      },
+      {
+        label: 'Phase',
+        property: 'status.conditions.phase',
+        uiSettings: { cssRules: PHASE_CSS_RULES },
+      },
+      {
+        label: 'Token',
+        property: 'status.conditions.token',
+        uiSettings: { displayAs: 'secret', withCopyButton: true },
+      },
+      {
+        label: 'Restart',
+        uiSettings: {
+          displayAs: 'button',
+          buttonSettings: {
+            icon: 'restart',
+            design: 'Transparent',
+            action: 'restart',
+            tooltip: 'Restart',
+          },
+        },
+      },
+      {
+        label: 'Stop',
+        uiSettings: {
+          displayAs: 'button',
+          buttonSettings: {
+            icon: 'stop',
+            design: 'Transparent',
+            action: 'stop',
+            tooltip: 'Stop',
+          },
+        },
+      },
+    ],
+  },
+  {
+    uiSettings: {
+      displayAs: 'button',
+      align: 'end',
+      buttonSettings: {
+        icon: 'inspect',
+        design: 'Transparent',
+        action: 'inspect',
+        tooltip: 'Inspect',
+      },
+    },
+    group: { name: 'actions', label: '', multiline: false },
+  },
+];
+
+/**
+ * A collection column whose sub-fields exercise every rich cell renderer.
+ *
+ * Top-level columns are just **Name**, **Description**, and the trailing
+ * **Actions** column. The **Conditions** column is a `propertyCollection` —
+ * each row renders as a stack of collapsed cards, and expanding one shows the
+ * sub-fields:
+ *
+ * - **Type** / **Status** as coloured **tags**.
+ * - **Phase** as a phrase coloured by `cssRules` (green / orange / red).
+ * - **Token** as a `secret` with a **copy button** and an **eye** toggle.
+ * - **Restart** and **Stop** as icon-only buttons (no text).
+ */
+export const WithRichCells: Story = {
+  args: {
+    config: {
+      ...BASE_CONFIG,
+      header: 'Pods (rich collection cells)',
+      tableConfig: {
+        ...BASE_TABLE_CONFIG,
+        fields: RICH_COLUMNS,
+      },
+    },
+    resources: RICH_PODS,
+  },
+};