App ignoring linebreaks? | Community
Skip to main content

App ignoring linebreaks?

  • May 19, 2022
  • 2 replies
  • 0 views
CJ99

I'm didn't major in CS, so hopefully I'm just missing something fundamental here about JS and HTML and Handlebars templates.  I used this guide to get going: https://developer.zendesk.com/documentation/apps/build-an-app/build-your-first-support-app/part-3-creating-and-inserting-templates/

I have an app set up to scan for key phrases. If the key phrase is found, the phrase is appended to a variable with \n. so for example, the content getting rendered would be
contents = "apple \n" + "coconut \n" + "banana \n" 
This is what I get out: 
That's not terrible looking, but a space isn't a line break. Is there a way to force it to display them in a single column? This is my template for reference as well, I feel like I need to add something here maybe to do this: 

<script id="body-template" type="text/x-handlebars-template">

  
      <p>{{contents}}<p>

  </script>



    2 replies

    Chris124
    • Chris124
    • May 20, 2022

    Hi CJ,

    Thanks for the question. So because apps are all effectively HTML, you would need to use HTML's line breaks (</br>) instead of JavaScript's \n character if displaying them within a paragraph block.

    Hope this helps!

    Chris

    CJ99
    • CJ99
    • Author
    • May 20, 2022

    Hi @chris124 Thanks! I think you've got me on the right path. I tried that, but then it renders it as part of the text. I've tried a few variations and ways of appending the <br>, but none of them made a difference: 
    var contents = "apple <br>" + "coconut </br>" + "<br> banana </br>" ;



    That being said, I think I probably need to transform the data first in some way, or add the breaks at a different point in the process, so that they aren't part of the actual string. I'll update this thread if/when I crack this. :D 

      Terms & ConditionsCookie settingsAccessibility statement