block construction with key value | Community
Skip to main content
L
LidermanGiraldoEscobar
March 28, 2025
Solved

block construction with key value

  • March 28, 2025
  • 2 replies
  • 664 views

Hello, I have the following question about building blocks for the Universal Editor. I want to create a block that has the following template.

"models": [
{
"id": "color",
"fields": [
{
"component": "text",
"valueType": "string",
"name": "color",
"label": "Color (Hex Code)"
}
]
}
]

Currently, when you render the component once it's complete, it looks like this

<div>
<div>#FFFFFF</div>
</div>

That is, just the value, I would like it to arrive as a key value
<div>
<div>color</div>
<div>#FFFFFF</div>
</div>

I'm asking because, when using it, for example, from Google Docs, I believe the key and value can be obtained. I'm currently using the resource type: core/franklin/components/block/v1/block.

Thank you very much if anyone can help me with this question. Best regards.

 

Best answer by arunpatidar

Hi @lidermangiraldoescobar 

The "key-value" option works well for blocks and container blocks, but not for block items.

 

In many cases, it is recommended to decorate the rendered semantic markup, add CSS class names, add new nodes or move them around in the DOM, and apply styles.

 

In other cases however, the block is read as a key-value pair-like configuration, which can be achieved by using "key-value": true property in the component-definition.json

2 replies

arunpatidar
Community Advisor
arunpatidarCommunity Advisor
Community Advisor
March 31, 2025

Hi @lidermangiraldoescobar 

In google docs all the content in the blocks rendered in the page, e.g. Label and Value

But in case of Universal Editor, only the values are rendering based on field type.

Arun Patidar
    L
    LidermanGiraldoEscobarAuthor
    April 15, 2025

    Hello @arunpatidar 

    I have a small question: If this documentation mentions key-value pairs, in what case would they be used? I'm a little confused about this topic.

    https://www.aem.live/developer/component-model-definitions

     

     
    thank you so much!




    arunpatidar
    Community Advisor
    arunpatidarCommunity AdvisorAccepted solution
    Community Advisor
    April 16, 2025

    Hi @lidermangiraldoescobar 

    The "key-value" option works well for blocks and container blocks, but not for block items.

     

    In many cases, it is recommended to decorate the rendered semantic markup, add CSS class names, add new nodes or move them around in the DOM, and apply styles.

     

    In other cases however, the block is read as a key-value pair-like configuration, which can be achieved by using "key-value": true property in the component-definition.json

    Arun Patidar
      kautuk_sahni
      Community Manager
      kautuk_sahniCommunity Manager
      Community Manager
      April 8, 2025

      @lidermangiraldoescobar Did you find the suggestion helpful? Please let us know if you need more information. If a response worked, kindly mark it as correct for posterity; alternatively, if you found a solution yourself, we’d appreciate it if you could share it with the community. Thank you!

      Kautuk Sahni
      Terms & ConditionsAccessibility statement

      Loading footer...