feat: Implement add action for array items. by kozmaadrian · Pull Request #190 · adobe/da-nx

kozmaadrian · 2026-02-12T14:33:38Z

Ticket: #181

Screen.Recording.2026-02-16.at.10.27.20.am.mov

Note: An issue has been identified in the JSON & HTML converter. It currently does not properly handle fields containing nested arrays having arrays within arrays. As a result, when the page is refreshed, the data is not loaded correctly. Will be fixed with #193

Schema examples used:
simple-test-form-inlined.schema.json
simple-test-form.schema.json

aem-code-sync · 2026-02-12T14:33:42Z

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
In case there are problems, just click a checkbox below to rerun the respective action.

Re-run PSI checks
Re-sync branch

Commits

88a028f ✅ (latest)
efe6b5c ✅
755a263 ✅
95b6ef8 ✅
4446ca6 ✅
6557a17 ✅
219e23b ✅
8540b28 ✅
71e41a4 ✅
d89e16c ✅
6e6f6cc ✅
77c647a ✅
3976f26 ✅
12beeba ✅

mhaack · 2026-02-13T10:44:30Z

For the nested array/object combinations I would go with different labels following this rules:

leave object/primitive field > "+ Add Item"
parent array > "+ Add Item"

kozmaadrian · 2026-02-13T16:12:01Z

nx/blocks/form/form.js

+  async handleAddItem({ detail }) {
+    const { path, itemsSchema } = detail;
+    this.formModel.addArrayItem(path, itemsSchema);
+
+    // Update the view with the new values
+    this.formModel = this.formModel.clone();
+
+    // Persist the data
+    await this.formModel.saveHtml();
+  }
+
+  async handleRemoveItem({ detail }) {
+    const { path } = detail;
+    if (!this.formModel.removeArrayItem(path)) return;
+
+    // Update the view with the new values
+    this.formModel = this.formModel.clone();
+
+    // Persist the data
+    await this.formModel.saveHtml();
+  }
+


I followed the existing pattern for consistency. However, in a future PR, it would be worth refactoring this approach, as the current implementation duplicates the save logic.

Lets keep it, could be future PR.

kozmaadrian · 2026-02-13T16:13:44Z

nx/blocks/form/views/editor.js

+      case 'checkbox': inner = this.renderCheckbox(item); break;
+      case 'select': inner = this.renderSelect(item); break;
+      case 'text': inner = this.renderInput(item, 'text'); break;
+      case 'number': inner = this.renderInput(item, 'number'); break;
+      default: break;


In a future PR, we could extract these into separate presentational components. The editor currently appears to handle too much logic.

kozmaadrian · 2026-02-13T16:15:57Z

nx/blocks/form/utils/utils.js

+ * @param {string} path - The path to the array item (e.g., "data.items.[0]" or "data.items[0]")
+ * @returns {boolean} - True if the item was removed, false otherwise
+ */
+export function removeArrayItemByPath(obj, path) {


In the future, the utility methods responsible for patching the JSON data could be extracted into a separate utility file. This would improve readability and make the code easier to understand.

mhaack · 2026-02-16T10:45:07Z

Tested with https://da.live/formsref?nx=issue/181#/aem-sandbox/block-collection/forms/coffee2 and it looks good to me.

mhaack · 2026-02-16T10:48:55Z

Make sure the lint error get fixed

auniverseaway · 2026-02-16T16:16:01Z

nx/blocks/form/views/editor.js

+
+  getAddItemLabel(parent) {
+    const itemsSchema = parent.schema?.properties?.items;
+    const resolved = itemsSchema && resolvePropSchema(itemsSchema, this.formModel?.schema);


You should not need this. You will already have the schema as part of the parent object.

I investigated the issue and found that the annotation process was failing to annotate array items when the schema defined the item structure using the $ref/$defs mechanism.

I’ve pushed a fix to this branch. However, after refactoring the annotation process to follow a schema-first approach, this specific fix is no longer necessary. The issue is already resolved in the refactored implementation and is handled in the new PR #198.

auniverseaway · 2026-02-16T16:16:24Z

nx/blocks/form/views/editor.js

+  renderDeleteButton(item, index, isArrayItem) {
+    if (!isArrayItem) return nothing;
+    return html`
+      <remove-button


This does not need to be a Web Component.

The form is built as a reactive UI using Lit components and the editor already manages a significant amount of logic, so to maintain clarity and separation of concerns, we should introduce well-isolated, “dumb” components. This will help keep the codebase less complex, more readable, and easier to test.

Based on my experience, as this UI continues to grow, centralizing all logic within the Editor will become increasingly difficult to maintain and, in the long term, nearly impossible to test properly.

nx/blocks/form/views/editor.css

auniverseaway · 2026-02-16T16:21:45Z

nx/blocks/form/views/components/remove-button/remove-button.js

+import { LitElement, html } from 'da-lit';
+
+const { default: getStyle } = await import('../../../../../utils/styles.js');
+const style = await getStyle(import.meta.url);


This file is unnecessary.

This issue is linked to #190 (comment)

auniverseaway · 2026-02-16T16:25:18Z

nx/blocks/form/utils/utils.js


  if (Array.isArray(propData)) {
-    const resolvedItemsSchema = resolvePropSchema(key, propSchema.items, fullSchema);
+    const resolvedItemsSchema = resolvePropSchema(propSchema.items, fullSchema);


These changes should be unnecessary. I think if we have issues getting the schema recursively once, we have architectural issues we should address first.

We should read the data once, combine with the schema to create an annotated object. If we find that object does not have what we need, we need to fix the underlying issues in that first read.

I also dislike the optional chaining here as it will mask issues down the road. We want something to fail and break in these early days so we can make sure our annotating is flawless since its so complex.

Please find my findings and comment here #190 (comment)

nx/blocks/form/views/editor.js

auniverseaway · 2026-02-16T22:36:36Z

nx/blocks/form/data/model.js

+    this.updateHtml();
+    return true;
+  }
+


I think this is good, but I also recognize I'm not sure how much logic we should put in this class.

I good guiding direction may be, "if it changes the data, it lives in the model."

I agree, but all of these operations ultimately modify the JSON data.

From my perspective, to keep things less complex, more testable, and more readable:

The model should represent a purely immutable state, without any HTML-related logic.

The HTML value should be generated only once during persistence and handled at a higher level of the application.

Updating the JSON should be implemented as a simple utility function that takes the current model, applies the necessary patches to the JSON, and then recreates the model as a new immutable state.

cc @mhaack

kozmaadrian · 2026-02-19T15:44:24Z

Closing this PR in favour of the PR #198, which introduce an important core update to the annotation mechanism by moving to a schema-first annotation approach.

The new PR includes and adopts the changes from this PRR, which were necessary to determine and test the correct strategy during the refactoring process.

feat: Implement add action for array items.

12beeba

feat: Add handler to add the new item to the array.

3976f26

aem-code-sync bot temporarily deployed to issue/181 February 12, 2026 15:08 Inactive

fix: Enable the Add buttom for array in arrays.

77c647a

aem-code-sync bot temporarily deployed to issue/181 February 12, 2026 15:27 Inactive

kozmaadrian marked this pull request as ready for review February 12, 2026 15:52

Merge branch 'main' into issue/181

6e6f6cc

aem-code-sync bot temporarily deployed to issue/181 February 12, 2026 16:12 Inactive

fix: Append item label to Add button.

d89e16c

aem-code-sync bot temporarily deployed to issue/181 February 13, 2026 13:11 Inactive

feat: Add remove button to array items.

71e41a4

aem-code-sync bot temporarily deployed to issue/181 February 13, 2026 15:28 Inactive

feat: Add handler to remove an array item.

8540b28

aem-code-sync bot temporarily deployed to issue/181 February 13, 2026 15:51 Inactive

fix: Fix code style issues.

219e23b

aem-code-sync bot temporarily deployed to issue/181 February 13, 2026 15:57 Inactive

fix: Renames the remove item event name.

6557a17

aem-code-sync bot temporarily deployed to issue/181 February 13, 2026 16:10 Inactive

kozmaadrian commented Feb 13, 2026

View reviewed changes

mhaack requested review from auniverseaway, chrischrischris and hannessolo February 16, 2026 10:47

mhaack previously approved these changes Feb 16, 2026

View reviewed changes

fix: Fix lint error.

4446ca6

kozmaadrian dismissed mhaack’s stale review via 4446ca6 February 16, 2026 12:46

auniverseaway reviewed Feb 16, 2026

View reviewed changes

nx/blocks/form/views/editor.css Outdated Show resolved Hide resolved

auniverseaway reviewed Feb 16, 2026

View reviewed changes

nx/blocks/form/views/editor.css Outdated Show resolved Hide resolved

auniverseaway reviewed Feb 16, 2026

View reviewed changes

nx/blocks/form/views/editor.js Show resolved Hide resolved

auniverseaway reviewed Feb 16, 2026

View reviewed changes

Merge branch 'main' into issue/181

95b6ef8

aem-code-sync bot temporarily deployed to issue/181 February 17, 2026 08:41 Inactive

fix: Fix lint issue.

755a263

aem-code-sync bot temporarily deployed to issue/181 February 17, 2026 09:22 Inactive

fix: Fix lint issue.

efe6b5c

aem-code-sync bot temporarily deployed to issue/181 February 17, 2026 09:24 Inactive

fix: Handle in annotation.

88a028f

aem-code-sync bot deployed to issue/181 February 19, 2026 14:03 View deployment

kozmaadrian mentioned this pull request Feb 19, 2026

feat: dasc #181 handle arrays, #196 annotate based on schema #198

Merged

kozmaadrian closed this Feb 19, 2026

Conversation

kozmaadrian commented Feb 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

aem-code-sync bot commented Feb 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mhaack commented Feb 13, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kozmaadrian Feb 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mhaack commented Feb 16, 2026

Uh oh!

mhaack commented Feb 16, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kozmaadrian commented Feb 19, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

kozmaadrian commented Feb 12, 2026 •

edited

Loading

aem-code-sync bot commented Feb 12, 2026 •

edited

Loading

kozmaadrian Feb 13, 2026 •

edited

Loading