Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

Slightly script excluding html markup

Avatar

Level 10

Hi,

I have a core button component that gets the label with formatting eg <p>label<p> and possibly other rte formatting. I tried to write a scriptlet to use context variable html and assign it to a variable for use but in vain it still brings up the html tags 

how do I exclude them?

when the <%= btn.label @CONTEXT=‘html’ %> is written it works great but I want to assign to a variable since this will be based on a if else 

 

thanks 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @NitroHazeDev 
You cannot do that HTL level, you can write a simple JavaScript Use-API to remove the H1 tag and return the label without h1

https://medium.com/@toimrank/aem-javascript-use-api-925fb2a270b 

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/passing-a-parameter-using-... 

 

 

 

 



Arun Patidar

View solution in original post

9 Replies

Avatar

Community Advisor

Hi @NitroHazeDev 
Can you share more info around it? maybe a dialog, where you are editing the text.

I can see core component using span from btn label

https://github.com/adobe/aem-core-wcm-components/blob/8556841a6e3fcdd6cf4cac056c70b6a39761c307/conte... 



Arun Patidar

Avatar

Community Advisor

Hi,

 

I don't fully understand your use case, but if you need to update the button's OOTB markup, is there any reason why you would not extend and update the markup there? You could achieve this with Javascript easily, as well.

 

 

 



Esteban Bustamante

Avatar

Level 10

Team,

I have forms core components and the btn style has changed , it can be a rte so it gets stored with html tags . I want to retrieve it without the html tags 

I tried adding the @CONTEXT variable to it and while it works for a simple script let to exclude the html tags , the context to strip off tags did not work for an assignment statement where I want to assign it to a variable or within an if condition within sightly

Avatar

Level 10

Tried something like this , pls ignore any ignorant syntax errors

Btn.label.value =“<h1> label</h1>”

since it is a rich text in forms so it is set with say h1 tag and is stored in the backend as such

 

Now 

in slightly I want to do a test to check if btn.visible then show btn.label.value without <h1> tag so I want the value to be btn.label.value = “label” 

 

<sly data-custom="${btn.visible?btn.label.value:’none’
@ context='html'}
">  </sly>

variable custom contains “<h1> label</h1>” vs label  

Avatar

Correct answer by
Community Advisor

Hi @NitroHazeDev 
You cannot do that HTL level, you can write a simple JavaScript Use-API to remove the H1 tag and return the label without h1

https://medium.com/@toimrank/aem-javascript-use-api-925fb2a270b 

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/passing-a-parameter-using-... 

 

 

 

 



Arun Patidar

Avatar

Community Advisor

I agree with @arunpatidar , but if this button could come from an RTE where the markup is dynamic, I think the best approach is simply to use vanilla Javascript. 



Esteban Bustamante

Avatar

Level 4

Hi @NitroHazeDev,

 

Maybe this will help - I had a similar scenario, where I wanted to remove the p tags from the rte content, so I made use of the <htmlRules> </htmlRules> setting of the RTE field and added something like p="". Similarly you can do something like h1="". Since you say you are using core button component, you might want to overlay it and add the custom html rules to the RTE field.

 

Few things to note:

  • If you use this, you will have to replace each tag with an empty value, so that the value becomes clear of all html tags
  • If you are doing this only to overcome a css problem, I would suggest to go with a custom button component with all needed dialog fields

Regards,

Ramkumar

Avatar

Level 10

All, went ahead with a custom property on it. Works better since one could have any tag , would not be efficient . Plus the label could be anything so worthwhile a property