Populate a html tag like <h2> from AEM dialog

user_2805144 0
Viewed 1014

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?

sightly aem
1 Answers

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

user_12012440
Related