Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

is it possible to add links in template

Avatar

Level 4

Hi Everyone,

I tried using <a href> tag inside my HTL page to add links i my aem template and it didn't work...

Any way to create hyperlinks?

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi Arjun

    There could be chances that HTL might have filtered thinking it as invalid link. HTL has inbuilt XSS protection. Could you please provide a sample of the link or code you were trying ?

I have tried to pull few links from the web

Adobe AEM Sightly

View solution in original post

12 Replies

Avatar

Correct answer by
Community Advisor

Hi Arjun

    There could be chances that HTL might have filtered thinking it as invalid link. HTL has inbuilt XSS protection. Could you please provide a sample of the link or code you were trying ?

I have tried to pull few links from the web

Adobe AEM Sightly

Avatar

Level 10

Are you using Editable Templates - in this case - you can drop a component into an editable template that contains a link.

Avatar

Level 4

Hi Donald,

I was just trying static templates for now. I want to learn to use editable templates too but it is so confusing for me now. Any way to add links in the static templates?

Avatar

Level 4

Hi Veena,

It was just normal HTML A tag.

<a href="my_link_url_goes)_here">

Avatar

Community Advisor

Understand that. Can you give me that link so that I can test it out ?

Avatar

Community Advisor

I tried this and it is working fine for me

Avatar

Community Advisor

Hi,

It works, it is just content, can you make sure you have created a tag properly.

e.g. page component HTL

<!doctype html>

<html lang="en">

    <head>

        <!--/* Initializes the Experience Manager authoring UI */-->

        <sly data-sly-include="/libs/wcm/core/components/init/init.jsp" data-sly-unwrap/>

    </head>

    <body>

        <div>This is a demo page <a href="https://www.google.co.in">Click here</a></div>

        <div data-sly-resource="${'parsys' @ resourceType='wcm/foundation/components/parsys'}"></div>

   </body>

</html>



Arun Patidar

Avatar

Level 4

Is it possible to use pure html,js and css to design AEM pages rather than using Sightly along with HTML?

Avatar

Community Advisor

How are you planning to render your FE content ? By content I mean the one which the business authors ?

Avatar

Community Advisor

Yes, It is possible but then how would you render dynamic/authorable content.

with the help of HTML, JS and CSS you can create static page but for dynamic page you have to use either JSP or HTL, and to choose between HTL and JSP, HTL has advantage over JSP.



Arun Patidar

Avatar

Level 1

Hi,

By adding the <a href> tag in your page html to which the template is referencing, it should show up on the template by default. Please check if the template has the proper sling:resourceType and the page node is of the correct structure.
Here's a screenshot for reference :

1579991_pastedImage_0.png

The blankpage.html that I have used to test this locally :

<sly data-sly-include="/libs/wcm/core/components/init/init.jsp" data-sly-unwrap/>

<div class="main-par">

<div data-sly-resource="${ @path='par', resourceType='wcm/foundation/components/parsys'}" data-sly-unwrap></div>

<a href="http://www.google.com">HI</a>

</div>

This gave me the following result :

1579993_pastedImage_1.png

As you can see both parsys and the link were rendered.

Hope this helps!