key-value not applied in child block (Universal Editor) | Community
Skip to main content
L
LidermanGiraldoEscobar
Level 2
October 20, 2025
Question

key-value not applied in child block (Universal Editor)

  • October 20, 2025
  • 1 reply
  • 223 views

I'm developing a component for AEM Franklin / EDS Universal Editor, and I have a block model with a parent block and a child block, both configured with "key-value": true.

  • Parent block: carousel-test

  • Child block: carousel-item-test

Here’s a simplified version of my JSON model:

{ "definitions": [ { "title": "Carousel Test", "id": "carousel-test", "plugins": { "xwalk": { "page": { "template": { "name": "Carousel Test", "model": "carousel-test", "filter": "carousel-test", "key-value": true } } } } }, { "title": "Carousel Item Test", "id": "carousel-item-test", "plugins": { "xwalk": { "page": { "template": { "name": "Carousel Item Test", "model": "carousel-item-test", "key-value": true } } } } } ] }

 

When I insert the parent block (carousel-test), the key-value behavior works correctly — the block is rendered in a key/value format like this:

<div class="carousel-test block" data-block-name="carousel-test" data-block-status="loaded"> <div> <div><p>carouselType</p></div> <div><p>categories-2</p></div> </div> </div>

 
However, when I add child items (carousel-item-test) inside the same block, the key-value setting doesn’t seem to apply.
Instead of generating the expected two-column key/value structure, the child block only outputs the value (e.g., a single <p> element).

Any help or guidance would be greatly appreciated.

1 reply

VishalKa5
VishalKa5
Level 5
October 22, 2025

Hi @lidermangiraldoescobar ,

 

Why it works for parent but not child

Parent block = inserted standalone → Franklin recognizes its template and applies key-value layout>>> worked

Child block = inserted inside a parent block → Franklin does not apply key-value transformation automatically>>>Not worked

 

To make key-value work for the child block, define each carousel-item-test as a table-style rows inside the parent container, like this:

 

<div class="carousel-test block" data-block-name="carousel-test"> <div class="carousel-item-test"> <div><p>image</p></div> <div><p>/path/to/img.jpg</p></div> </div> <div class="carousel-item-test"> <div><p>title</p></div> <div><p>Summer Collection</p></div> </div> </div>

 

Make sure each child block has two columns per row so Franklin knows how to structure the key/value.

Also, update your parent block model to allow nested rows like this:

 

{ "definitions": [ { "title": "Carousel Test", "id": "carousel-test", "plugins": { "xwalk": { "page": { "template": { "name": "Carousel Test", "model": "carousel-test", "filter": "carousel-test", "key-value": true, "children": ["carousel-item-test"] // <-- allow child block } } } } } ] }

Franklin doesn't automatically treat nested blocks as key-value, so you must:

  • Structure each child row with 2 columns
  • Add "children" in the block model
  • Or alternatively: make carousel-item-test a standalone block inserted individually

Thanks & regards,

Vishal

Terms & ConditionsAccessibility statement

Loading footer...