CODEWITHSUNDEEP
aemsightly
Virge Assault
Virge Assault

Reputation: 1396

Populate a html tag like <h2> from AEM dialog

I'm trying to allow an author to change the heading size in the markup based on a dropdown in the dialog with the options "h1, h2, h3, h4". If none is selected, it should default to h2.

I'm trying to do this with ternary code like I would for dynamic classes or content, but when I do this it just prints the code out on the page. The result of the following should be <h2> Heading </h2> or have h2 replaced by a dialog selection 

<${properties.headingSize ? properties.headingSize : 'h2'}>
    ${properties.heading}
</${properties.headingSize ? properties.headingSize : 'h2'}>

The result of this code in Inspect Element is 

<${properties.headingSize ? properties.headingSize :="h2" }>Heading <!--${properties.headingSize-->

Is this not a recommended way to accomplish dynamic markup? Or is there a way to get the ternary to work correctly?

Upvotes: 2

Views: 1688

Answers (1)

rakhi4110
rakhi4110

Reputation: 9281

The recommended way to solve your problem is to make use of the data-sly-element statement to replace your element name. Sample usage is shown below.

<h2 data-sly-element="${properties.headingSize || 'h2'}">${properties.heading}</h2>

For more information on the acceptable values for data-sly-element as well as the available block statements that can be used in HTL, kindly refer this official documentation

Upvotes: 5

Related Questions