Has anyone been able to add a multi line String field to Ticket Conversations, like a description field, without it collapsing all line breaks?

[Carl Murray]

We have the short description field which is added to Ticket Conversations widget by default. We have a Description field as well. This is an expanded explaination of the short desciptior created when the ticket is created. It is not change after initial creation. It is a field that allows for multiple lines and the ability to hit enter for new lines. However, when we try to add it to the Service Portal, it takes out any line breaks and squishes everything. We tried this by cloning the Ticket Converstations and added the field in Server Script and displayed it in the HTML Template, so we know it can pull the data, but not without the weired formatting:

Example field:

Apply patch Upgrade to Adobe Acrobat Reader DC version 18.011.20035 for Windows to fix vulnerabilities:
[acrobat-cve-2018-4872, acrobat-cve-2018-4879, acrobat-cve-2018-4895] on assets [FEEDAUTOIMPORT.wecon.com] -
See the Work Notes field for more details

How it displays:

Apply patch Upgrade to Adobe Acrobat Reader DC version 18.011.20035 for Windows to fix vulnerabilities: [acrobat-cve-2018-4872, acrobat-cve-2018-4879, acrobat-cve-2018-4895] on assets [FEEDAUTOIMPORT.wecon.com] - See the Work Notes field for more details

Code from HTML:

  <div ng-if="data.canRead && data.hasReadableJournalField" class="panel panel-{{options.color}} b ticket_conversation" >
    <div class="panel-heading">

      <h4 class="panel-title">
        <div class="pull-right">
          <sp-attachment-button ng-if="data.canWrite && data.canAttach"></sp-attachment-button>
          <a href="javascript:void(0)" class="panel-button" ng-show="isNative" ng-click="scanBarcode()" title="{{data.scanBarcodeMsg}}">
            <span class="glyphicon glyphicon-barcode"></span>
          </a>

          <a href="javascript:void(0)" ng-show="data.showLocationIcon" class="panel-button" ng-click="checkInLocation()" title="{{data.checkInLocMsg}}">
            <span class="glyphicon glyphicon-globe"></span>
          </a>

        </div>
        {{data.ticketTitle}}
        <br><br>
        <b>Description - </b>{{data.ticketDescription}}
      </h4>

Code from Server Script:

(function() {
	data.uploadingAttachmentMsg = gs.getMessage("Uploading attachment...");
	data.sharingLocMsg = gs.getMessage("Sharing location...");
	data.scanBarcodeMsg = gs.getMessage("Scan barcode");
	data.checkInLocMsg = gs.getMessage("Check in location");
	data.viewMsg = gs.getMessage("View");
	data.sys_id = input.sys_id || options.sys_id || $sp.getParameter("sys_id");
	data.table = input.table || options.table || $sp.getParameter("table");
	// don't use options.title unless sys_id and table also come from options
	if (options && options.sys_id && options.table)
		data.ticketTitle = options.title;
	data.placeholder = options.placeholder || gs.getMessage("Type your message here...");
	data.placeholderNoEntries = options.placeholderNoEntries || gs.getMessage("Type your message here...");
	data.btnLabel = options.btnLabel || gs.getMessage("Send");
	data.includeExtended = options.includeExtended || false;

	var gr = new GlideRecord(data.table);
	if (!gr.isValid())
		return;

	gr.get(data.sys_id);
	if (!gr.canRead())
		return;

	data.number = gr.getDisplayValue('number');
	data.created_on = gr.getValue('sys_created_on');

	if (input) { // if we have input then we're saving
		if (input.journalEntry && input.journalEntryField){
			if (gr.canWrite(input.journalEntryField)){
				gr.setDisplayValue(input.journalEntryField, input.journalEntry);
				gr.update();
				$sp.logStat('Comments', data.table, data.sys_id, input.journalEntry);
			}
		}
		data.ticketTitle = input.ticketTitle;
		data.ticketDescription = input.ticketDescription;
		data.placeholder = input.placeholder;
		data.btnLabel = input.btnLabel;
		data.includeExtended = input.includeExtended;
	} else {
		if (!data.ticketTitle) {
			if (gr.short_description.canRead())
				data.ticketTitle = gr.getDisplayValue("short_description");
 data.ticketDescription = gr.getDisplayValue("description");
			if (!data.ticketTitle)
				data.ticketTitle = data.number;
		}

		$sp.logStat('Task View', data.table, data.sys_id);
	}

	data.canWrite = gr.canWrite();
	data.canAttach = gs.hasRole(gs.getProperty("glide.attachment.role")) && GlideTableDescriptor.get(data.table).getED().getAttribute("no_attachment") != "true";
	data.canRead = gr.canRead();
	data.isNewRecord = data.sys_id == -1 || gr.isNewRecord();
	data.hasWritableJournalField = false;
	data.hasReadableJournalField = false;
	if (data.canRead && !data.isNewRecord) {
		data.stream = $sp.getStream(data.table, data.sys_id);
		// Journal fields come in correct order already
		// so grab the first 2 writeable fields
		if ('journal_fields' in data.stream) {
			var jf = data.stream.journal_fields;
			for(var i=0; i < jf.length; i++){
				if (jf[i].can_read === true)
					data.hasReadableJournalField = true;
				if (jf[i].can_write === true){
					data.hasWritableJournalField = true;
					if (!data.primaryJournalField)
						data.primaryJournalField = jf[i];
					else if (data.includeExtended && !data.secondaryJournalField)
						data.secondaryJournalField = jf[i];
					else
						break;
				}
			}
		}

	}

	data.tableLabel = gr.getLabel();

})()

[Jack · Accepted solution]

Hi carlmurray,

You can try:

<b>Description - </b><p style = "white-space:pre-line">{{data.ticketDescription}}</p>

My idea is apply a CSS white-space to do this.

Hope this will help!