AEM Screens - clientlibs not getting referred on device in a custom component in a sequence channel

[cqsapientu69896]

Css and js render on a device when written inside the markup, but not render when on device when they are referred as clientlibs. The custom component contains a simple div and simple css and jQuery function . When the same css and js is used within the html markup as <style> and <script> tag, the css and js work on a device , but when being referred as clientlibs, they do not render on device. The css and js work fine on both edit and preview mode of channel 

This is the way I am referring the clientlibs -

    <sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html" data-sly-call="${clientLib.all @ categories='screen.test'}" data-sly-unwrap/>

    <div class ="testclass">This is test text.</div>

The channel renders with a simple text without any css and js applied. This is how it work when css and js is included in markup -

<div class ="testclass">This is a test text</div>

$(document).ready(function(){

$(".testclass").animate({left: '371px'});

    });
    
<style>
.testclass{
background:#98bf21;
height:100px;
width:100px;
position:absolute;
    }
</style>

I even checked the we.retail screen demo provided, it is also referring the css and js in the same sightly way of referring clientlibs, the css and js does render fine on their application channel, and they have not used any custom component in the sequence channel. 

Is there any extra configuration required to make the clientlibs referable on a deivce in AEM screens ? Please let me know , I am blocked because of this..

[cqsapientu69896]

Could any one from the AEM community or internal AEM team please have a look into this question and answer it ? Appreciate it.

[kautuk_sahni]

I have asked internal team to have a look at this one.

~kautuk

[cqsapientu69896]

Thanks Kautuk, please let me know when you get a reply back from the internal team.. appreciate it.

[kautuk_sahni]

Quick Check asked by internal team:

- is the content produced correctly in the browser player?

- does the HTML include the script tags?

- if no script tags, is the category correctly set?

- if all of the above is good, is this online or offline content on the device?

- if online content, can you check again if the html contains the script tags?

- if it contains the script tags, can the device access the css/js ?

- if offline content, is the respective CSS included in the content package definition for your channel?

~kautuk

[cqsapientu69896 · Accepted solution]

Thanks Kautuk for looking into it. The questions you asked helped me in diving down deep into the OOTB AEM screens code and helped me in resolving the issue. The answer of your questions are -

- is the content produced correctly in the browser player? - Yes

- does the HTML include the script tags? - No

- if no script tags, is the category correctly set? - yes

- if all of the above is good, is this online or offline content on the device? - Offline

- if online content, can you check again if the html contains the script tags? - No

- if it contains the script tags, can the device access the css/js ?- No script tag, device can access css/js

- if offline content, is the respective CSS included in the content package definition for your channel? - Yes, now it is included.

I created an offline channel config which includes the clientlibs which are required for the channel.

Thanks again for your support. Appreciate it.