"Options" Part along with variables in Ticket Fields widget is not visible to End User

Sohithanjan G · ‎09-11-2021

Hi,

"Options" Part along with variables in Ticket Fields widget is not visible to End User, but its visible for admin users. Ticket Fields widget has both snc_external & snc_internal roles. Please help me with any suggestions.

Please mark as Accepted Solution if this solves your query and HIT Helpful if you find my answer helped you. This will help other community mates too..:)

Ishaan Shoor · ‎09-11-2021

Can you update the variable summarizer to the below and try again:

HTML

<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: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: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: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:void(0)" class="visible-xs" ng-click="c.openMrvsModal(variable)">${Click to view}</a>
      </div>
    </div>
  </div>
</div>

Server Script:

(function() {
	data.label = options.label || gs.getMessage("Options");
	if(options.task)
		data.ariaLabel =  gs.getMessage("{0} for {1}", [data.label, options.task]);
	else
		data.ariaLabel = data.label;
	if (options.variables) {
		data.variables = filterVariables(options.variables);
		return;
	}
	data.labelClose = gs.getMessage("Close");
	var tableName = options.table || $sp.getParameter('table');
	var sysId = options.sys_id || $sp.getParameter('sys_id');
	var record = sn_std_tkt_api.TicketConfig.getTicketRecord(tableName, sysId);
	
	if (record == null)
		return;

	data.canRead = record.canRead();
	if (!data.canRead)
		return;
	
	data.variables = filterVariables(new GlobalServiceCatalogUtil().getVariablesForTask(record, true));
	
 })();

function filterVariables(variables) {
	if (variables == null || variables.length == 0)
		return variables;
	
	var filteredVariables = [];
	variables.forEach(function(variable) {
		if (variable.visible_summary)
			filteredVariables.push(variable);
	});
	
	return filteredVariables;
}

Client Script:

function($scope, snAttachmentHandler, i18n, spModal) {
  /* widget controller */
  var c = this;
	c.toggle = c.options.toggle || false;
	c.hide_control = c.options.hide_control || false;
	c.task = c.options ? c.options.task : "";
	
	/* Open mrvs data in a model for mobile screen */
	c.openMrvsModal = function(data) {
		spModal.open({
			title: data.label,
			widget: "template_renderer",
			widgetInput: {data: data, template: "sp_multirow_vs_summarizer.html"}, 
			buttons: [{label:c.data.labelClose, primary: true}]
		});	
	}
	
	$scope.scanAttachment = function(variable) {
		if (variable.state == 'not_available')
			snAttachmentHandler.showMessage('error',i18n.getMessage('Upload file scan failed').withValues([variable.display_value]));
		else
			snAttachmentHandler.scanAttachment({'sys_id' : variable.value});
	}
}

CSS:

button.variables-toggle-btn {
		background: none;
		border: none;
		color: $link-color;
		&:hover, &:focus{
		color: $link-hover-color;
		text-decoration: $link-hover-decoration;
	}
}

Hope this helps!
BR.
Ishaan Shoor

View solution in original post

Sohithanjan G · ‎09-11-2021

Its being called from Ticket Fields Widget. When it is calling from widget it is not displaying.

Please mark as Accepted Solution if this solves your query and HIT Helpful if you find my answer helped you. This will help other community mates too..:)

Ishaan Shoor · ‎09-11-2021

Is that widget customised?

Hope this helps!
BR.
Ishaan Shoor

Sohithanjan G · ‎09-11-2021

No OOB. When calling from another widget then not displaying. When separately inserted from page designer, its working.

When I inspect in end user scenario, the html class is showing as ng-isolate-scope

Please mark as Accepted Solution if this solves your query and HIT Helpful if you find my answer helped you. This will help other community mates too..:)

Ishaan Shoor · ‎09-11-2021

Can you share both the widgets xml here.

Hope this helps!
BR.
Ishaan Shoor

Sohithanjan G · ‎09-11-2021

This is where we are calling the below widget

<sp-widget widget="data.variableSummarizerWidget"></sp-widget>

Variable Summarizer Widget:

HTML

<div ng-if="c.data.variables.length > 0" ng-init="c.variable_toggle = c.toggle">
  <a href="javascript:void(0)" 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}}
  </a>

  <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 | filter:{visible_summary:true}">
      <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: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: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:void(0)" 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>
      </div>
    </div>
  </div>
</div>

Server Side:

(function() {
    data.label = options.label || gs.getMessage("Options");
    if (options.task)
        data.ariaLabel = gs.getMessage("{0} for {1}", [data.label, options.task]);
    else
        data.ariaLabel = data.label;
    if (options.variables) {
        data.variables = options.variables;
        return;
    }

    var tableName = options.table || $sp.getParameter('table');
    var sysId = options.sys_id || $sp.getParameter('sys_id');
    var record = sn_std_tkt_api.TicketConfig.getTicketRecord(tableName, sysId);

    if (record == null)
        return;

     data.canRead = record.canRead();
     if (!data.canRead)
         return;

    data.variables = new GlobalServiceCatalogUtil().getVariablesForTask(record, true);

})();

Client Side:

function($scope, snAttachmentHandler, i18n) {
  /* widget controller */
  var c = this;
	
	c.toggle = c.options.toggle || false;
	c.hide_control = false;
	//c.hide_control =c.options.hide_control || flase
	c.task = c.options ? c.options.task : "";
	
	$scope.scanAttachment = function(variable) {
		if (variable.state == 'not_available')
			snAttachmentHandler.showMessage('error',i18n.getMessage('Upload file scan failed').withValues([variable.display_value]));
		else
			snAttachmentHandler.scanAttachment({'sys_id' : variable.value});
	}
}

Please mark as Accepted Solution if this solves your query and HIT Helpful if you find my answer helped you. This will help other community mates too..:)