Html variable is not visible on service portal requested item view

[ghzelmed]

Hello,

I'm experiencing an issue where HTML type variables (as well as label and macro UI types) are not being displayed in the Ticket Fields widget in Service Portal. I was directed to KB article KB0820434 which explains that modifying a specific line in the widget’s HTML should resolve this issue. According to the KB, the line in question is:

<div class="m-b break-word" ng-repeat="variable in data.variables | filter:{visible_summary:true}">

However, after thoroughly reviewing the Ticket Fields widget’s HTML code in my instance, I couldn’t find this line (line 37) or any similar code snippet that would allow me to apply the suggested fix.

Could someone please help me understand:

1. Where can I locate this line or the equivalent logic within the Ticket Fields widget?
2. How can I adjust the widget to ensure that HTML type variables are properly displayed on the Service Portal?

Any guidance or pointers to documentation would be greatly appreciated.

Thank you in advance for your help.

Best regards,

[ghzelmed]

Hello,

I’d like to provide some additional information regarding the issue. I’m currently running on the Washington DC version, and both my client instance and my PDI instance are using the same out-of-the-box Ticket Fields widget.

Below is the HTML code for this widget:

<div ng-if="data.canRead" class="panel b">
  <div class="panel-heading bg-primary panel-la-jolla-default">
    <div ng-init="spSearch.targetRequests()">
      <sp-c-link target="form" table="data.table" id="data.sys_id"></sp-c-link>
    </div>
    <h2 class="sr-only">${Ticket details}</h2>
    <span ng-if="data.agent" >
      ${Agent working on this {{data.tableLabel}}}:
      <div>{{data.agent}}</div>
    </span>
    <span aria-live="assertive">
    <span ng-if="!data.agent && data.agentPossible" >${Your request has been submitted}</span>
    </span>
    <span ng-if="!data.agentPossible">${{{data.tableLabel}} record details}</span>
  </div>

  <div class="panel-body">
    <dl class="ticket-fields" ng-if="data.fields.length > 0">
        <dt class= "col-md-6 col-sm-12 col-xs-6 break-word"
            ng-if="field.value && (field.type != 'decimal' || field.type == 'decimal' && field.value != 0)"
            ng-repeat-start="field in data.fields">{{field.label}}</dt>
        <dd class= "col-md-6 col-sm-12 col-xs-6 break-word"
            ng-repeat-end ng-switch="field.type"
            ng-if="field.value && (field.type != 'decimal' || field.type == 'decimal' && field.value != 0)">
          <div ng-switch-when="glide_date_time" title="{{field.display_value}}">
            <sn-time-ago timestamp="::field.value"></sn-time-ago>
          </div>
          <div ng-switch-when="multi_small"><pre class="multi-lines">{{field.display_value}}</pre></div>
          <div ng-switch-default><span class="pre-wrap">{{field.display_value}}</span></div>
        </dd>
    </dl>
    <sp-widget widget="data.variableSummarizerWidget"></sp-widget>
  </div>

  <div ng-if="data.agentPossible && !data.agent && options.pickup_msg" class="panel-footer">
    <div id="ticket_fields_footer" class="text-center text-muted" style="font-style: italic;" ng-bind-html="data.pickupMsg">
    </div>
  </div>

</div>
      

 Thanks for your help 😅

[Medi C]

Hi @ghzelmed,

I hope you are doing well. The widget you need to clone and modify is: Variable Summarizer (ID: sc-variable-summarize).
URL: https://YOUR_INSTANCE_NAME.service-now.com/nav_to.do?uri=sp_widget.do?sys_id=3e2bcf17b7220010bcd5071...

Please clone this widget and adjust the line as suggested per the KB and note down the new widget ID as you would need it.

Next, please go back to the "Ticket Fields" Widget and clone it as well:

URL: https://YOUR_INSTANCE_NAME.service-now.com/nav_to.do?uri=sp_widget.do?sys_id=5736bf52cb30020000f8d85...

In the Server Script, line 39: Place the ID of the cloned widget in the previous step:

Go to the Service Portal page where Ticket Fields are displayed. CTRL and right click on the widget/page and click "Page in Designer"

Remove the existing Ticket Fields widget from the form. Search for the cloned Ticket fields you created previously and place it in the page where the other one used to exists.

I hope this help!

[ghzelmed]

Thank you for your prompt response.

I have already reviewed the out-of-box widget "sc_variable_summarize." According to the KB article, the recommended solution involves removing the filter {visible_summary:true} from line 37:

<div class="m-b break-word" ng-repeat="variable in data.variables | filter:{visible_summary:true}">

However, after checking the widget, I confirmed that this specific filter {visible_summary:true} is not present in our version of the widget, exactly as shown in your screenshot. Therefore, cloning the out-of-box widget and replacing the indicated line would have no effect, as the filter does not exist in our current widget configuration.This is the html of sc_variable_summarizer

<div ng-if="c.data.variables.length > 0" ng-init="c.variable_toggle = c.toggle">
  <button class="btn variables-toggle-btn" aria-expanded="{{c.variable_toggle}}" aria-label="{{data.ariaLabel}}" ng-click="c.variable_toggle = !c.variable_toggle" ng-if="!c.hide_control">
    <span style="font-size: 12px;" class="glyphicon" ng-class="c.variable_toggle ? 'glyphicon-chevron-down' : 'glyphicon-chevron-up'"></span>
    {{data.label}}
  </button>

  <div ng-if="c.variable_toggle" id="variables-toggle" aria-hidden="{{!c.variable_toggle}}">
    <hr role="presentation" ng-if="!c.hide_control">
    <div class="m-b break-word" ng-repeat="variable in c.data.variables">
      <label class="m-t-xs m-b-none text-muted"><b>{{::variable.label}}</b></label>
      <div ng-if="!variable.multi_row">
        <div ng-switch="variable.type">
          <!-- 27 is type URL, 33 is type Attachment -->
          <a ng-switch-when="27" class="pre-wrap" title="{{::variable.label}}" href="{{::variable.display_value}}" target="_blank">{{::variable.display_value}}</a>
          <span ng-switch-when="33" class="file-attachment">
          	<a ng-if="::variable.state != 'not_available'" class="pre-wrap" title="{{::variable.label}}" href="javascript&colon;void(0);" ng-click="scanAttachment(variable)" aria-label="${Download {{variable.display_value}}}">{{::variable.display_value}}</a>
            <span ng-if="::variable.state == 'not_available'" class="error">
							<a class="pre-wrap" title="{{::variable.label}}" href="javascript&colon;void(0);" ng-click="scanAttachment(variable)" aria-label="${File {{variable.display_value}} failed security scan}">{{::variable.display_value}}</a>
             	(${File failed security scan})
            </span>
          </span>
          <span ng-switch-default class="pre-wrap">{{::variable.display_value}}</span>
        </div>
      </div>
      <div ng-if="variable.multi_row">
        <a href="javascript&colon;void(0)" class="hidden-xs" uib-popover-template="'sp_multirow_vs_summarizer.html'" popover-title="{{variable.label}}" popover-placement="auto top" popover-append-to-body="true" popover-trigger="outsideClick">${Click to view}</a>
        <a href="javascript&colon;void(0)" class="visible-xs" ng-click="c.openMrvsModal(variable)">${Click to view}</a>
      </div>
    </div>
  </div>
</div>

[Medi C]

@ghzelmed 

Could you please confirm that there is data in the description field? (Description field should not be empty)