Service Portal Ticket Conversation

[Sam Ogden]

Hi All,

On the service portal we user the OTTB 'ticket conversation' widget for our customers to view additional comments and add additional comments to open tickets.

currently when a comment is added the timestamp displays as time ago e.g. 2m ago, 5d ago etc

This works fine when the comments are recent e.g. couple of minutes or hours ago, but as time elapses it becomes less useful. Also when looking back at close logs it will say for example 3 months ago.

Instead we want this to display as a full date/time stamp in the format dd/mm/yyyy hh:mm:ss

How would we amend the widget for this?

Thanks

Sam

[Sam Ogden]

Hi Mike,

Thanks for the above.  This has fixed the issue with the date format.

I have now got a new issue though.  Previously comments added by our staff appeared on one side of the timeline.  Then comments added by the customer appeared on the other side.

now all comments are showing on the same side of the timeline.  Only a minor issue, but just makes it a little easier to see who commented

Previous:

As you can see all Margret Hogs are on the right hand side, and mine on the left

Now:

All comments on the left.  Do you know what controls this?

Once again thanks for all your help.

[Mike Patel]

I don't see that issue with my view;

[Mike Patel]

Make sure HTML is like below, Do https://www.diffchecker.com/ my code and yours.

<div>
  <div ng-if="!data.canRead && !data.isNewRecord">
    ${Requested record not found}
  </div>

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

      <div class="h2 panel-title">
        <h2 class="h4 panel-title">{{data.ticketTitle}}</h2>
        <div class="pull-right">
          <ul>
            <li>
              <a href ng-show="data.showLocationIcon" class="panel-button" ng-click="checkInLocation()" title="{{data.checkInLocMsg}}">
                <span class="glyphicon glyphicon-globe"></span>
              </a>
            </li>
            <li>
              <a href class="panel-button" ng-show="isNative" ng-click="scanBarcode()" title="{{data.scanBarcodeMsg}}">
                <span class="glyphicon glyphicon-barcode"></span>
              </a>
            </li>
            <li><sp-attachment-button ng-if="::data.canWrite && data.canAttach"></sp-attachment-button></li>
          </ul>
        </div>
      </div>

    </div>

    <div class="panel-body">
      <div ng-if="data.hasReadableJournalField">
        <form ng-submit="postEntry(data.journalEntry)" id="sand">
          <div ng-show="::data.primaryJournalField" class="input-group">
            <textarea ng-keypress="keyPress($event)"
                      sn-resize-height="trim"
                      rows="1" id="post-input"
                      class="form-control no-resize overflow-hidden"
                      ng-model='data.journalEntry'
                      ng-model-options='{debounce: 250}'
                      ng-attr-placeholder="{{getPlaceholder()}}"
                      autocomplete="off"
                      ng-change="userTyping(data.journalEntry)"/>
            <span class="journal-field-indicator" ng-style="({'background-color': data.useSecondaryJournalField ? data.secondaryJournalField.color : data.primaryJournalField.color})"></span>
            <span class="input-group-btn" style="vertical-align: top">
              <input type="submit" class="btn btn-primary" value="{{data.btnLabel}}" ng-disabled="data.isPosting || !data.journalEntry || data.journalEntry.length == 0"/>
            </span>
          </div>
          <div ng-if="::(data.secondaryJournalField && data.secondaryJournalField.can_write)">
            <label class="pull-right"><input type="checkbox" ng-model="::data.useSecondaryJournalField" ng-change="updateFormWithJournalFields()"/> {{::data.secondaryJournalField.label}}</label>
          </div>
        </form>
        <ul class="list-group m-b-none">
          <li class="list-group-item user-typing m-t" ng-repeat="u in typing">${{{::u.user_display_name}} is typing}</li>
        </ul>
        <ul class="list-group m-b-none m-t" ng-if="msg">
          <li class="list-group-item user-typing">{{msg}}</li>
        </ul>
        <div class="timeline-container">
          <ul class="timeline">
            <li class="timeline-item" ng-class="::{'timeline-inverted': e.user_sys_id == data.stream.user_sys_id} " ng-repeat="e in data.mergedEntries">
              <div class="timeline-badge">
                <sn-avatar-once
                           ng-if="hasLiveProfile(e.user_sys_id)"
                           primary="getLiveProfileByUserId(e.user_sys_id)"
                           class="avatar-large"
                           show-presence="false"
                           enable-context-menu="false">
                </sn-avatar-once>
              </div>
              <div class="timeline-panel">
                <div class="timeline-panel-inner" ng-style="::{'border-color': getFieldColor(e.element)}">
                  <div class="timeline-heading">
                    <div class="timeline-title h4">{{::e.name}}</div>
                    <p class = "time-text">
                      <small class="text-muted" >
                        <span class="glyphicon glyphicon-time"  />
                        {{e.sys_created_on_adjusted}}
                      </small>
                    </p>
                    <p class="field-label">
                      <span style="font-style:italic"><small>&nbsp;{{::e.field_label}}</small></span> 
                      <span style="font-style:italic" ng-if="::(e.element === 'attachment')"><small>${Attachment}</small></span>
                    </p>
                  </div>
                  <div class="timeline-body">
				 <div class="sr-only">${Journal type}: {{e.field_label}}</div>
                    <p ng-if="::(e.element != 'attachment')" ng-bind-html="::e.value"></p>
                    <div ng-if="::(e.element == 'attachment')">
                      <a target="_blank" href="/sys_attachment.do?view=true&sys_id={{::e.attachment.sys_id}}" title="{{::dataViewMsg}}" >
                        <img ng-if="e.attachment.thumbnail_path" alt="" ng-src="/{{::e.attachment.path}}?t=medium" class="img-responsive"/>
                      </a>
                      <div>
                        <a href="/sys_attachment.do?sys_id={{::e.attachment.sys_id}}" target="_blank" title="{{::dataViewMsg}}"><strong>{{::e.attachment.file_name}}</strong></a><br/>
                        {{::e.attachment.size}}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="timeline-item timeline-inverted">
              <div class="timeline-badge">
                <sn-avatar-once
                           ng-if="hasLiveProfile(data.stream.user_sys_id)"
                           primary="getLiveProfileByUserId(data.stream.user_sys_id)"
                           class="avatar-large"
                           show-presence="false"
                           enable-context-menu="false">
                </sn-avatar-once>
              </div>
              <div class="timeline-panel timeline-panel-first-item">
                <div class="timeline-heading">
                  <div class="timeline-title h4">{{data.stream.user_full_name}}</div>
                  <p>
                    <small class="text-muted">
                      <span class="glyphicon glyphicon-time" aria-hidden="true" />{{data.created_on}}
                    </small>
                  </p>
                </div>
                <div class="timeline-body">
                  <p>{{data.number}} ${Created}</p>
                </div>
              </div>
            </li>
            <li class="timeline-start">
              <div class="timeline-badge success">
                ${Start}
              </div>
            </li>
          </ul>
        </div>

      </div>
      <div ng-if="!data.hasReadableJournalField">
        {{options.no_readable_journal_field_message}}
      </div>
    </div>
  </div>
</div>

[Sam Ogden]

Hi Mike,

Thanks for sharing your code.

<li class="timeline-item" ng-class="::{'timeline-inverted': e.user_sys_id == data.stream.user_sys_id} " ng-repeat="e in data.mergedEntries">

This line was different in mine.  mine was user_sys_id == data.stream.user_sys_id.

Amending this has fixed the issue

Thanks for all your help.

[jkc]

So simple!! Thanks!