Customizing widget to pull description (standard ticket header)

[John-Eilif]

Hi, 

First time poster - long time troubleshooter. Hoping somebody can point me in the correct direction.

I'm trying to customize the 'standard ticket header' to show the full description in a separate panel. Ref; attached picture. The page is partially in Norwegian because our production environment is in Norwegian.

What I've done so far is, with empty result is:

• Clone the Standard ticket header widget
• Added a panel
• Tried to pull the {{::data.description}} into this panel.

I tried following this guide, with no success.

This is the code from the widget: 

<div ng-if ="data.canRead && data.headless && data.urLink" class="alert alert-info" ng-class="{'none': c.hide}">
  <span class="notification-icon icon-info"><span class="sr-only">Info Message</span></span>
  ${Some of these comments were hidden during ticket routing to protect your privacy. Refer to the originating ticket for current status and updates - }
  <a href={{data.urLink}} class="alert-link alert-text">{{::data.number.display_value}}</a>
  <button type="button" class="close btn-icon icon-cross" aria-label="Close" ng-click="hideMessage()"></button>
</div>
<div ng-if="data.canRead && !data.hideHeader">
  <div ng-if="data.primary_ticket_link" class="alert alert-warning">
    <span class="notification-icon icon-alert"><span class="sr-only">Info Message</span></span>
    ${The information shown below may have additional updates. To view the latest record, <a href={{data.primary_ticket_link}} class="alert-link alert-text">click here</a>}
  </div>
  <div class="panel-body no-padder">

    <div ng-if="!data.isEmpty" class= "form-group pull-left m-n">
      <label class="label-color m-n text-xs" for="data.number.name">{{::data.number.label}}</label>
      <div class="form-control no-padder no-border no-bg" id="data.number.name">{{::data.number.display_value}}</div>
    </div>

    <div ng-if="data.headerFields.length > 0" class="pull-right">
      <div class= "form-group inline m-n" 
           ng-if="field.value && (field.type != 'decimal' || field.type == 'decimal' && field.value != 0)" 
           ng-repeat="field in data.headerFields"
           ng-class="{'padder-md-r': !$last}">
        <label class="label-color m-n text-xs" for="field.name">{{::field.label}}</label>
        <div ng-switch="field.type">
          <div ng-switch-when="glide_date_time" title="{{::field.display_value}}" class="form-control no-padder no-border no-bg">
            <sn-time-ago timestamp="::field.value"></sn-time-ago>
          </div>
          <div ng-switch-default ng-class="{'font-bold': field.name == 'state'}" class="form-control no-padder no-border no-bg">{{::field.display_value}}</div>
        </div>
      </div>
    </div>
  </div>

  <div class="panel b">

    <div class="panel-heading bg-primary panel-la-jolla-default clearfix">
      <div class="flex-display title-padding">
        <h2 class="inline m-n m-r-sm" style="word-break: break-word;">{{::data.title}}</h2>
      	<div ng-if="!data.primary_ticket_link && c.data.currentActionWidget" class="inline pull-right" style="margin-left: auto;">
        	<sp-widget widget="c.data.currentActionWidget" page="{table:data.table, sys_id: data.sys_id}"></sp-widget>
      	</div>
      </div>
      
      <div ng-if="data.description" ng-init="c.description_toggle = false">
        <div ng-if="c.description_toggle" id="description-toggle" aria-hidden="{{!c.description_toggle}}">
          <h4 class="title-padding break-word" ng-bind-html="::data.description"></h4>
        </div>
        <button class="options-btn pull-left" id="wrapper" ng-click="c.description_toggle = !c.description_toggle" aria-expanded="{{c.description_toggle}}" aria-controls="description-toggle">
          <div ng-show="!c.description_toggle">${Show more}</div>
          <div ng-show="c.description_toggle">${Show less}</div>
          <span style="font-size: 10px; padding-left:10px" class="glyphicon" ng-class="c.description_toggle ? 'glyphicon-chevron-up' : 'glyphicon-chevron-down'"></span>
        </button>
      </div>
    </div>

    <div ng-if="!data.show_info_widget && data.fields.length > 0">
      <div class="panel-body">
        <div class="ticket-fields" ng-if="data.fields.length > 0">
          <div class= "col-md-2 col-sm-3 col-xs-4 break-word adjust-height"
               ng-if="(field.type != 'decimal' || field.type == 'decimal' && field.value != 0)" 
               ng-repeat="field in data.fields| filter: {type:'!workflow'}">
            <div ng-switch="field.type">
              <div ng-switch-when="glide_date_time" title="{{field.display_value}}">
                <p class="label-color size text-xs header-text">{{::field.label}}</p>
                <span class="padding-sm" ng-if="field.name == 'due_date' || field.name == 'estimated_delivery'" data-toggle="tooltip" title="{{field.display_value}}">{{::field.display_value}}</span>
                <span ng-if="field.name != 'due_date' && field.name != 'estimated_delivery'"><sn-time-ago class="padding-sm" timestamp="::field.value"/></span>
              </div>
              <div ng-switch-when="glide_list">
                <p class="label-color size header-text text-xs">{{::field.label}}</p>
                <span ng-if="field.reference == 'sys_user' && field.value" ng-repeat="user in field.user" data-toggle="tooltip" title="{{::user.name}}">
                  <sn-avatar ng-click="openProfile(user.userID)" primary="user" enable-tooltip="false" enable-context-menu="true" show-presence="true" ng-style="{'cursor':data.isExternalUser?'default':'pointer'}"></sn-avatar>
                </span>
                <span ng-if="field.reference != 'sys_user' && field.value">
                  <span  ng-repeat="item in field.display_value"  class="header-text">
	                  <span data-toggle="tooltip" title="{{::item}}">{{::item}}</span>
  	                <span ng-if="!$last">,</span>
                  </span>
                </span>
              </div>
              <div ng-switch-default ng-if="field.type != 'glide_list'">
                <span ng-if="field.reference == 'sys_user' && field.value" class="pull-left avatar" data-toggle="tooltip" title="{{::field.user.name}}">
                  <sn-avatar ng-click="openProfile(field.user.userID)" primary=field.user enable-tooltip="false" enable-context-menu="true" show-presence="true" ng-style="{'cursor':data.isExternalUser?'default':'pointer'}"></sn-avatar>
                </span>
                <p class="label-color size header-text text-xs">{{::field.label}}</p>
                <span ng-if="field.reference != 'sys_user' && field.value" class="header-text"><span data-toggle="tooltip" title="{{::field.display_value}}">{{::field.display_value}}</span></span>
                <a ng-if="field.reference == 'sys_user' && field.value" aria-label="{{::field.display_value}}" ng-click="openProfile(field.user.userID)"  class="header-text align-tooltip" ng-style="{'cursor':data.isExternalUser?'default':'pointer'}"><span data-toggle="tooltip" title="{{::field.display_value}}">{{::field.display_value}}</span></a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div ng-if="field.reference != 'sys_user' && field.value">
        <div class="panel-body padder-t-none">
          <p class="label-color size header-text text-xs">{{::field.label}}</p>
          <div class="padding-sm">
          <sp-widget widget="field.stageWidget"></sp-widget></div>
        </div>
      </div>
    </div>
    <div ng-if="data.show_info_widget">
      <hr>
      <div class="panel-body">
        <sp-widget widget= "c.data.info_widget" page="{table:data.table, sys_id: data.sys_id}"></sp-widget>
      </div>
    </div>
  </div>

  

  <!--- FULL DESCRIPTION --->
  <div class="panel b">
    <div class="panel-heading bg-primary panel-la-jolla-default clearfix">
      <div class="flex-display title-padding">
        <h2 class="inline m-n m-r-sm" style="word-break: break-word;">Henvendelse</h2>
      </div>
    </div>

    <div>
      <div class="panel-body">
       	<p>{{::data.description}}  
        </p>
      </div>
    </div>
    
  </div>
   <!--- /FULL DESCRIPTION --->

</div>

<div ng-if="!data.canRead || !data.canReadConfig" class="panel">
  <h3>
    ${Sorry, either the data don't exist or you don't have the access}
  </h3>
</div>

[John-Eilif]

Hello, thank you very much for your assistance. Sadly, your suggestion did not work. It completely removed the widget from the request page.

[John-Eilif · Accepted solution]

I waited a day and when testing again with charged motivation, it worked... could it be that the testing was done towards a cached version of the widget? Anyways, what i did was simply

Server script:

data.desc = $sp.getField(record, 'description').display_value;

Html:

{{::data.desc}} 

[Vinu1]

Hi John,

I have similar requirement to add an impact field. Can you please share the HTML also.

Thanks in advance.

Thanks,

Vinu

[John-Eilif]

I did so in original post. Basicly this is what you need i guess. 

  <!--- FULL DESCRIPTION --->
  <div class="panel b">
    <div class="panel-heading bg-primary panel-la-jolla-default clearfix">
      <div class="flex-display title-padding">
        <h2 class="inline m-n m-r-sm" style="word-break: break-word;">Henvendelse</h2>
      </div>
    </div>

    <div>
      <div class="panel-body">
       	<p>{{::data.desc}}  
        </p>
      </div>
    </div>
    
  </div>
   <!--- /FULL DESCRIPTION --->

[No_name]

sn_std_tkt_api.TicketConfig.getConfig does not return action_widget_param (for some reason)