AEM property displays correctly in
but not in href attribute

Question

I'm making a custom multifield breadcrumb component with this code.

    <ul class="breadcrumb-list">
        <li class="breadcrumb-item" data-sly-repeat.textItem="${properties.text}">
            <a class="breadcrumb-link" href="${properties.link['textItemList.index']}">${textItem}</a>
            <p class="works">${properties.link[textItemList.index]}</p>
            <p class="doesn't work">${properties.link['textItemList.index']}</p>
            <span>//</span>
        </li>
    </ul>

I've added the paragraph elements to show how my properties display.

This is the html output:

If I remove the single quotes as in p class="works", the value displays the breadcrumb item's link value. If I add the single quotes as in p class="doesn't work", nothing displays.

You'd think that removing the quotes from the same value in the href would display my link as the href; however, when i remove the quotes in the href value, it removes the anchor tag altogether. when i add them back in, i can still see the anchor tag, but there is no href attribute at all, only the breadcrumb-link class.

How can I get the href value to show a link?

first, using the single-quote would not work, HTL wont evaluate it the way you have it. `${properties.link[textItemList.index]}` is correct. second, please include the value of the `properties.link`, is it stored as a multi-value property? also is `properties.text` a multi-value property? — Ahmed Musallam, Feb 01 '18 at 23:54

score 0 · Answer 1 · answered Feb 01 '18 at 21:17

0

AEM evaluates al href before rendering the resulting html.

If the link is invalid it will not put anything under href

If the expression is invalid it will wipe out all the section

Have you tested with valid links?

This will not work only with plain text.

answered Feb 01 '18 at 21:17

Gabriel Legarda

11
3

yes, i've tried it with valid links and the expression is correct because it renders outside of the anchor tag (the p class="works" proves that). Im just confused as to why it wont render as an href but will as a paragraph – Holly Michelle Feb 01 '18 at 21:46

score 0 · Answer 2 · answered Feb 02 '18 at 09:00

when i add them back in, i can still see the anchor tag, but there is no href attribute at all, only the breadcrumb-link class. - That is the expected behaviour. Because you have an array of links and putting the quotes will try to obtain an entry in the array by the 'textItemList.index' key, like you would do in a map, instead by the index. Nothing is found of course, so the anchor point is rendered without the href attribute.

when i remove the quotes in the href value, it removes the anchor tag altogether. - That is not the expected behaviour. Since you exemplify that inside the paragraph it works, then I suppose this is a display context issue. HTL should implicitly uses the uri context for href attribute values and text for content inside HTML elements according to the documentation.

Try explicitly mention the context like href="${properties.link[textItemList.index] @ context = 'uri'}" or href="${properties.link[textItemList.index] @ context = 'text'}", or check the contexts mentioned in the doc - unsafe should ultimately do the job.

score 0 · Answer 3 · answered Feb 20 '18 at 17:08

None of this context worked for me, and Im facing the same issue, if I remove the single quote "'" it will display the href just ok, but since my href includes it none of the context mentioned above is doing the job.

Is there any solution for this out there?

AEM property displays correctly in but not in href attribute

3 Answers3

AEM property displays correctly in
but not in href attribute