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

HTL Expression in Javascript

Avatar

Avatar
Validate 10
Level 2
v1101
Level 2

Likes

4 likes

Total Posts

150 posts

Correct Reply

0 solutions
Top badges earned
Validate 10
Validate 1
Ignite 1
Give Back 5
Give Back 3
View profile

Avatar
Validate 10
Level 2
v1101
Level 2

Likes

4 likes

Total Posts

150 posts

Correct Reply

0 solutions
Top badges earned
Validate 10
Validate 1
Ignite 1
Give Back 5
Give Back 3
View profile
v1101
Level 2

14-12-2020

Hello Community - I am working on a component which uses the sling model to get the required values for the properties that is working as expected. My question here is, I need to use the values I received from Sling Model in javascript (Included as a clientlib in the component). 

E.g. <sly data-sly-use.productData="com.xxx.aem.models.ProductData"></sly>

 

${productData.prodDescription @ context='unsafe'} - Can this be used directly used in clientlibs (Not USE API) ?

ClientLibrary:

var prodDetails = '${productData.prodDescription @CONTEXT='unsafe'}';

--------------------------------------------

Or should I assign this in HTL first like: <sly data-sly-test.prodDetails ="${productData.prodDescription @ context='unsafe'}"></sly> and then use it in javascript as below?

var prodDetails = '${prodDetails}'; - I already set the context in HTL, so I didn't use it here.

 

Also could somebody clarify in which scenario should the context as "scriptString" or "unsafe" be used?  As I see both are being used in variable assignment in JS.

 

 

 

 

View Entire Topic

Avatar

Avatar
Springboard
Level 7
KiranVedantam1992
Level 7

Likes

174 likes

Total Posts

183 posts

Correct Reply

55 solutions
Top badges earned
Springboard
Give Back 5
Ignite 1
Affirm 50
Validate 1
View profile

Avatar
Springboard
Level 7
KiranVedantam1992
Level 7

Likes

174 likes

Total Posts

183 posts

Correct Reply

55 solutions
Top badges earned
Springboard
Give Back 5
Ignite 1
Affirm 50
Validate 1
View profile
KiranVedantam1992
Level 7

14-12-2020

Hi @v1101 ,

 

To fetch the values from HTML to JS, you can add the Model value into the data attribute and in JS you can initialize the module and access it.

HTML:

data-modelValue='${modelObject.modelValue}'

JS:

function init($, $module) {

const dom = {

modelValue: $module.data(modelValue)

}

}

 

We have different context elements and

  • unsafe - use this at your own risk, this disables XSS protection completely
  • scripting - Applies JavaScript string escaping

Reference: https://github.com/adobe/htl-spec/blob/master/SPECIFICATION.md#12-available-expression-options

 

Thanks,

Kiran Vedantam.