I have a particular footer component, written in sightly but the background color is hard coded, which i want to make it dynamic. I want to provide the color in the dialog, then value should hold in footer.js file, and write the sightly code to get image value dynamically in my footer.html file
Solved! Go to Solution.
Hi
You can do it as:
<p> Color : ${properties.color}</p>
<p style="color:${properties.color @ context='styleToken'};"> Text : ${properties.text}</p>
<p> Background Color : ${properties.backgroundColor}</p>
<p style="backgroundColor:${properties.backgroundColor@ context='styleToken'};"> Text : ${properties.text}</p>
<script> var trackingID = "${myTrackingID @ context='scriptString'}"; </script>
<style> a { font-family: "${myFont @ context='styleString'}"; } </style>
Reference article :- https://docs.adobe.com/docs/en/htl/docs/getting-started.html?wcmmode=disabled
I hope this would help you.
~kautuk
You can just replace the background-color with an expression, like : ${properties.backgroundColor}
Views
Replies
Total Likes
Also - if you want to create a color dialog - see:
http://scottsdigitalcommunity.blogspot.ca/2016/03/how-to-create-aem-touch-ui-color-picker.html
Views
Replies
Total Likes
Hi
You can do it as:
<p> Color : ${properties.color}</p>
<p style="color:${properties.color @ context='styleToken'};"> Text : ${properties.text}</p>
<p> Background Color : ${properties.backgroundColor}</p>
<p style="backgroundColor:${properties.backgroundColor@ context='styleToken'};"> Text : ${properties.text}</p>
<script> var trackingID = "${myTrackingID @ context='scriptString'}"; </script>
<style> a { font-family: "${myFont @ context='styleString'}"; } </style>
Reference article :- https://docs.adobe.com/docs/en/htl/docs/getting-started.html?wcmmode=disabled
I hope this would help you.
~kautuk
working fine. thanks!!
<nav style="background-color:${properties.backgroundColor @ context='styleToken'}">
Views
Likes
Replies