How can you output new line from Close Notes on Service Portal

JC S_
Mega Guru

We are trying to show the Close Notes of an incident ticket on the Service Portal and on our widget we can only get the plain text version of the contents of Close Notes from incident table. Is there a way to get the contents of that field with the paragraph lines intact?

HTML

<p>{{data.CloseNotes}}</p>

Server script

data.CloseNotes = $sp.getFields(gr, 'close_notes');
if(data.CloseNotes != '') {  

            data.CloseNotes = data.CloseNotes[0].display_value;  

}

 

03/27/2018: I tried the solution by shashank13 but it did not show any value at all now:

HTML

<div ng-if="field.value && (field.type != 'decimal' || field.type == 'decimal' && field.value != 0)" class="m-b break-word" ng-repeat="field in data.CloseNotes">
          <label class="m-n">{{field.label}}</label>
          <div ng-switch-default ng-bind-html="field.display_value">{{field.display_value}}</div>
</div>

Server script

data.CloseNotes = $sp.getFields(gr, 'close_notes');
1 ACCEPTED SOLUTION

dpalmer
Kilo Guru

Hello JC;

Would it be possible to provide a pic of what the text is displaying as and what you want it to display as? Im not sure if your simply trying to preserve the line breaks in the text, which in that case, you may want to wrap <pre>{{data.CloseNotes}</pre> in pre tags like so, or you can utilize the css white-space property with the following name value pair: white-space:pre-wrap. So you could add a class to your p tag like <p class="wrapped">{{data.CloseNotes}</p>, and use the following css rule set:

.wrapped{

white-space:pre-wrap;

}

Im not sure if this is what you are referring to.

View solution in original post

8 REPLIES 8

dpalmer
Kilo Guru

Hello JC;

Would it be possible to provide a pic of what the text is displaying as and what you want it to display as? Im not sure if your simply trying to preserve the line breaks in the text, which in that case, you may want to wrap <pre>{{data.CloseNotes}</pre> in pre tags like so, or you can utilize the css white-space property with the following name value pair: white-space:pre-wrap. So you could add a class to your p tag like <p class="wrapped">{{data.CloseNotes}</p>, and use the following css rule set:

.wrapped{

white-space:pre-wrap;

}

Im not sure if this is what you are referring to.

Awesome!

You are correct that I just need to preserve the line breaks and this simple trick worked. Thanks a lot.

<pre>{{data.CloseNotes}</pre> worked for me, very helpful!

IanGlencross
Kilo Expert

Just a thought :

 

I add this class to my CSS (portal /page / widget /global : whatever you need )

.newline : white-space : pre-line;

and then just add "newline" to the class statements of DIV that I need to use newlines in.

Pre-line is better than pre-wrap as it it allows you to use \n for line breaks, but still collapses white-space (like the default HMTL treatment of white-space

Hope this helps

Ian