AEM 6.1 | Escape special chars in Sightly

[CQ_learner]

Hi All,

I want to escape chars like "<", ">" and "/" in sightly. I have this piece of code:

${"{1}{0}{2}{1}{3}{0}{2}" @ format=[properties.test,'<','>','/']} - but its rendering in HTML as &lt;test-data&gt;&lt;/contact-us&gt;

I checked this  https://docs.adobe.com/docs/en/aem/6-0/develop/sightly/expression-language.html  but could not solve the issue.

So How do I achieve this in Sightly? I bascially need a html tag - <test></test> , where "test" will be from dialog.

Thanks!!

[kautuk_sahni · Accepted solution]

Hi 

You can refer to Sightly Specification:- https://github.com/Adobe-Marketing-Cloud/sightly-spec/blob/master/SPECIFICATION.md (Search Escape)

//

Like in JavaScript, strings quotes can be escaped by prefixing a backslash to the quote (\') or double-quote (\").

Single character escape sequences: \t \b \n \r \f \' \" \\

Unicode escape sequences: \u followed by 4 hexadecimal digits (e.g.: \u0022 for ", \u0027 for ', \u003c for <, or \u003e for >

I hope this will help.

Thanks and Regards

Kautuk Sahni

[CQ_learner]

HI Kautak,

Thanks For your reply, I went through the document it was helpful indeed, but I am not able to quite achieve what i wanted to, Can you please tell me the syntax for the above mentioned requirement.

Thanks!! 

[kautuk_sahni]

CQ_learner wrote...

HI Kautak,

Thanks For your reply, I went through the document it was helpful indeed, but I am not able to quite achieve what i wanted to, Can you please tell me the syntax for the above mentioned requirement.

Thanks!! 

Use:-   ${ '{0} {1} {2} {3}' @ format=['\u003e','\u003C', '\u002F', '\u005C']}

This will print :-        > < / \

PS:- To get Hex value of any character, you can use "http://www.endmemo.com/unicode/unicodeconverter.php". Enter a character in Unicode Character and look for result in Escaped Unicode. Also if Escaped Unicode is coming out to be \u3e use it as \u003e.

I hope this will work for you.

Thanks and Regards

Kautuk Sahni

[CQ_learner]

Hi Kautuk,

Thanks for the reply, I am able to create the String with <text></text>,But the issue is I need to convert this into a html tag and not as a text or string. It should appear in the DOM and not in the page.

Thanks!

[kautuk_sahni]

CQ_learner wrote...

Hi Kautuk,

Thanks for the reply, I am able to create the String with <text></text>,But the issue is I need to convert this into a html tag and not as a text or string. It should appear in the DOM and not in the page.

Thanks!

Hi 

I am not sure what exactly is your Question.

Just go to Component.html and create a Tag that your would want to create.

Like :- 

See the DOM :- 

If you want to create a tag using some string generated from sightly, then you can create a JavaScript with the function accepting a string (sightly string) and this JS function can create a tag for you.

Link:- https://docs.adobe.com/docs/en/aem/6-0/develop/sightly/use-api-in-javascript.html

Reference Read:- http://blogs.adobe.com/experiencedelivers/experience-management/4-ways-try-javascript-use-api-sightl...

Thanks and Regards

Kautuk Sahni

[CQ_learner]

HI Kautak,

Yes this excatly is my issue, i need properties.test value inside "<></>", suppose properties.test = "myTest", I want a html tag like this - 

<myTest></myTest>, Is this possible through sightly in any way?

[kautuk_sahni]

CQ_learner wrote...

HI Kautak,

Yes this excatly is my issue, i need properties.test value inside "<></>", suppose properties.test = "myTest", I want a html tag like this - 

<myTest></myTest>, Is this possible through sightly in any way?

Hi,

Then your problem reduces to "Creating a Custom Tags".

Please refer to this article:- http://www.html5rocks.com/en/tutorials/webcomponents/customelements/

//

Instantiating elements

The document.registerElement() method is used to create a custom HTML element. This should be passed as the name of your custom element along with an (optional) object that defines the API.

Declare them:

<x-foo></x-foo>

Create DOM in JS:

var xFoo = document.createElement('x-foo');
xFoo.addEventListener('click', function(e) {
  alert('Thanks!');
});

Use the new operator:

var xFoo = new XFoo();
document.body.appendChild(xFoo);

Another Reference Article :- http://blog.teamtreehouse.com/create-custom-html-elements-2

Now, you can call a JS function from Sightly with arguments (Link) which will create custom element/tag (Link) for you.

I hope this will work for you.

Thanks and Regards

Kautuk Sahni