block construction with key value

[LidermanGiraldoEscobar]

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.

[arunpatidar]

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.

[LidermanGiraldoEscobar]

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 · Accepted solution]

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

[kautuk_sahni]

@LidermanGiraldoEscobar Just checking in — were you able to resolve your issue?
We’d love to hear how things worked out. If the suggestions above helped, marking a response as correct can guide others with similar questions. And if you found another solution, feel free to share it — your insights could really benefit the community. Thanks again for being part of the conversation!

[kautuk_sahni]

@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!