Expand my Community achievements bar.

SOLVED

Is javascript use API restricted on aem cloud

Avatar

Level 2

I have a js file with a helper function however whenever i am trying to include it in my html , it breaks the page. <sly data-sly-use.helper="${'helper.js'}"></sly>. I have tried referencing it  data-sly-use.helper="helper.js" . 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

@Zendark : Can you please elaborate what you mean by nothing works?
Are you seeing any errors? Please share a snippet of what is inside your JS file.

You can refer this article where it is explained in detail on how to use javascript use API: https://medium.com/@toimrank/aem-javascript-use-api-925fb2a270b#05bc

You can consider using Java use API as well, it would be easier to extend/enhance the component in future and if you want to expose component data as JSON etc. Also, for complex components JS use API could be slower comparatively to Java use API.  Please see: https://www.hoodoo.digital/blog/the-aem-htl-javascript-use-api-the-whys-and-hows
thanks.

View solution in original post

3 Replies

Avatar

Correct answer by
Community Advisor

@Zendark : Can you please elaborate what you mean by nothing works?
Are you seeing any errors? Please share a snippet of what is inside your JS file.

You can refer this article where it is explained in detail on how to use javascript use API: https://medium.com/@toimrank/aem-javascript-use-api-925fb2a270b#05bc

You can consider using Java use API as well, it would be easier to extend/enhance the component in future and if you want to expose component data as JSON etc. Also, for complex components JS use API could be slower comparatively to Java use API.  Please see: https://www.hoodoo.digital/blog/the-aem-htl-javascript-use-api-the-whys-and-hows
thanks.

Avatar

Community Advisor

Hi @Zendark ,

Try to give complete relative path in data-sly-use block statement.
Something like below this is just a sample path you can adjust it  according to your file path

   <sly data-sly-use.helper="${'<project-path>/clientlibs/js/helper.js'}"></sly>


Thanks
Tarun

Avatar

Community Advisor

@Zendark As @Imran__Khan mentioned, it works. Your syntax <sly data-sly-use.helper="${'helper.js'}"></sly> looks correct to me. 

Can you please check the log files and see what error it is capturing? I think the JS is getting called , but either it is expecting some inout or soemthing else is breaking in it.