Slightly script excluding html markup | Community
Skip to main content
N
NitroHazeDev
Level 9
July 24, 2024
Solved

Slightly script excluding html markup

  • July 24, 2024
  • 4 replies
  • 1739 views

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 @2941342=‘html’ %> is written it works great but I want to assign to a variable since this will be based on a if else 

 

thanks 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by arunpatidar

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  


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-js-use-api/m-p/614205 

 

 

 

 

4 replies

arunpatidar
Community Advisor
arunpatidarCommunity Advisor
Community Advisor
July 25, 2024

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/content/src/content/jcr_root/apps/core/wcm/components/button/v2/button/button.html#L28 

Arun Patidar
    MukeshYadav_
    Community Advisor
    MukeshYadav_Community Advisor
    Community Advisor
    July 25, 2024

    Hi @nitrohazedev ,

    You may use jsoup in model to remove tags https://www.baeldung.com/java-remove-html-tags#using-jsoup

    In sightly we can create variable and use discussed here https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-declare-a-variable-in-sightly/m-p/256691

     

    Thanks

      EstebanBustamante
      Community Advisor and Adobe Champion
      EstebanBustamanteCommunity Advisor and Adobe Champion
      Community Advisor and Adobe Champion
      July 25, 2024

      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
        N
        NitroHazeDevAuthor
        Level 9
        July 25, 2024

        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 @2941342 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

          N
          NitroHazeDevAuthor
          Level 9
          July 26, 2024

          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  

            N
            NitroHazeDevAuthor
            Level 9
            August 4, 2024

            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 

            Terms & ConditionsAccessibility statement

            Loading footer...