Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Add external links in an AEM component

Avatar

Level 2

Hi everyone,
I'm new to Aem, I'm trying to extend the List component to be able to make it accept external URLs too, since until now I've noticed that it doesn't take external URLs.

 

list-edit-child-pages.png

I thought of extending the List component by inserting a new Text tab where to insert a string to be printed. But I don't understand why it doesn't print the string to me, nor can I add the "add" button to make it add more fields. If you have ideas on how to make them insert external URLs without having to modify they are welcome

 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

OOTB List component can be populated through :

  • Child pages
  • Fixed List

Add the "add" button to make it add more fields:

This is because you are using the child pages option from the dropdown. This will only provide single field which will act as a parent node whose children are traversed.

If you select the fixed list, you would get additional options.

https://www.aemcomponents.dev/content/core-components-examples/library/core-content/list.html 

 

I don't understand why it doesn't print the string to me:

The string printed in the list is the jcr:title of the page whose path you have authored in the path browser. There is a whole back-end logic in place for that.

If you need external URLs, you would need to add a new column/tab, where you would need to give input for links & text both. And then you would need to write the corresponding HTML.

 

You can go through the back-end code for OOTB components in the below repo:

https://github.com/adobe/aem-core-wcm-components 

View solution in original post

5 Replies

Avatar

Correct answer by
Community Advisor

OOTB List component can be populated through :

  • Child pages
  • Fixed List

Add the "add" button to make it add more fields:

This is because you are using the child pages option from the dropdown. This will only provide single field which will act as a parent node whose children are traversed.

If you select the fixed list, you would get additional options.

https://www.aemcomponents.dev/content/core-components-examples/library/core-content/list.html 

 

I don't understand why it doesn't print the string to me:

The string printed in the list is the jcr:title of the page whose path you have authored in the path browser. There is a whole back-end logic in place for that.

If you need external URLs, you would need to add a new column/tab, where you would need to give input for links & text both. And then you would need to write the corresponding HTML.

 

You can go through the back-end code for OOTB components in the below repo:

https://github.com/adobe/aem-core-wcm-components 

Avatar

Level 2

Thanks for the answer, if I may ask you: Isn't there a way to insert an external link in the fixed list?

Avatar

Community Advisor

We can add external links, but the problem in this scenario is the back-end logic. It is trying to resolve the resource within the given path, and then showing jcr:title as the text and resolved resourcePath as the link. So, if you give an external link, you would not see a element populated in the list because of this.

 

You can create a modal class with Link through delegation and just override the function to return the link as it is if it is external .( contains http/s or www )

https://aemexplained.wordpress.com/aem-guide/extending-component-using-sling-delegation/ 

Avatar

Level 3

Hi @Anmol_Bhardwaj , 

Thank you for providing these details. I ran into the same problem.
Do we know why Adobe hasn't addressed this issue for external links when using a fixed list to generate lists with links?
https://aemcomponents.dev/content/core-components-examples/library/core-content/list.html
It should work by OOTB implementation as per the document.


Avatar

Level 2

Hi @MeenuRajput ,

Try to change the List component super type version to V4. This was fixed in the latest version in Feb 2023.

Please refer to the links:
List Component | Adobe Experience Manager

Release Core Components 2.22.0 · adobe/aem-core-wcm-components (github.com)

  • [List] Support External Links in List component (#2389)