Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

Is it possible to use coral styles in aem custom page

srikanth7792
Level 2
Level 2

I am trying to create a button in AEM page (custom page not aem admin console's), As a BE I wanted to leverage AEM coral-button component to get same look and feel. I have tried using clientlibs embed option like below. though I see coral js and css loading in page source. My button still looking without any css applied example blue color. any pointer would be helpfull.

 

embed="[coralui3,granite.ui.coral.foundation]"

 

1 Accepted Solution
Ravi_Pampana
Correct answer by
Community Advisor
Community Advisor

Hi,

 

Did your button html having all the required class matching OOtB html ? If css/js is loading but not applying then it should be because of html (classes/id) is not matching. 

View solution in original post

5 Replies
Ravi_Pampana
Correct answer by
Community Advisor
Community Advisor

Hi,

 

Did your button html having all the required class matching OOtB html ? If css/js is loading but not applying then it should be because of html (classes/id) is not matching. 

View solution in original post

kishorekumar14
Level 9
Level 9

Hi @srikanth7792 ,

 

Please refer this document to get details about where Coral UI can be used.

 

https://experienceleague.adobe.com/docs/experience-manager-65/developing/introduction/touch-ui-conce... 

 

Please check if below code helps. I have checked with sample button. It works

 

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html">
    <sly data-sly-call="${clientlib.css @ categories='coralui3'}"/>
</sly>
<html>
<body>
	<button role="button" class="coral-Button coral-Button--primary">Test Button</button>
</body>
</html>

 

kishorekumar14_3-1630291842617.png

 

 

 

srikanth7792
Level 2
Level 2

Hello

Thanks for the reply. one question I have used below simple line as mentioned in the coral ui docs. Then this doesn't really working.in your code you hardcoded the coral classes. but as per the docs if we should apply below variant then it automatically work (eg: applying background color blue) any thoughts here.

 

 

      <button is="coral-button" class="coral-Form-field" variant="primary">Engage</button>

my html applies different classes like below.

 

<button is="coral-button" class="coral-Form-field _coral-Button _coral-Button--cta" variant="primary" size="M"><coral-button-label class="_coral-Button-label">Engage</coral-button-label></button>
kishorekumar14
Level 9
Level 9

Hi @srikanth7792 ,

 

Not sure, In AEM, Coral UI might have been customized/extended as i could see some of the changes between two.

AEM

/libs/clientlibs/granite/coralui3/css/all.css
/libs/clientlibs/granite/coralui3/js/all.js

 

Coral UI

https://www.adobe.io/experience-manager/reference-materials/6-5/coral-ui/coralui3/css/coral.css
https://www.adobe.io/experience-manager/reference-materials/6-5/coral-ui/coralui3/js/coral.js

Vijayalakshmi_S
Community Advisor
Community Advisor

Hi @srikanth7792,

In order for custom HTML attributes specific to Coral UI (like "is", "variant") to autogenerate the equivalent/respective coral classes and the same font type, try to use clientlib.all

First try in direct HTML, then we can narrow down the issue with embed (though you see both JS and CSS getting included)

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

<button is="coral-button" class="coral-Form-field" variant="primary">Engage</button>

I tried in 6.5.0 and it works(both Clientlibs inclusion via HTML and as embed)

 

If it is still not working, please let know the AEM version you are working on.