service portal widget to update a record

raycallan
Giga Guru

Hi Community,

I have a requirement to add a widget to the service portal to allow a user to escalate an incident. This is my fist time working with widgets so I have difficulty passing values between the html template and the server script

if it is not already escalated

  • They will select a escalate reason from an sn-record-picker
  • Enter their comment in a multiline textarea
  • Submit their comments which will update the incident record

if it is escalated

  • hide the widget

3 issues i have

  1. I'm unable to get the html template to get the value of the u_escalated filed (true/false). it always sees a 'false' value (log shows [object Object])
  2. I'm unable to get the the value of the sn-record-picker, (log shows 'undefined' value')
  3. My recording is not updating (not getting to gr.update)

Here is screen caps of my code

Escalate_html.PNG

Escalate_server.PNGEscalate_client.PNG

This is the log

Escalate_log.PNG

Thanks Ray

11 REPLIES 11

Hi Reddy,

Here is the code. This is still working in out current instance which is Rome. I have also attached the XML

Body HTML template

<div ng-show="data.table == 'incident'" class="panel b">
  <div class="panel-heading bg-primary">
    <h4 class="panel-title pull-left">
      <div ng-if="data.state.value < '6'">${Escalation}</div>
      <div ng-if="data.state.value === '6'">${Ticket Resolved}</div>
      <div ng-if="data.state.value === '7'">${Ticket Closed}</div>
    </h4>
    <div class="clearfix"></div>
  </div>

  <div class="panel-body">
    <div ng-if="data.state.value < '6'">
      <div ng-if="data.escalated.value === '0'">
        <div class="row pull-left">
          ${If you feel your ticket is not being responded to in an appropriate manner, please complete the form below to escalate}
        </div>
        <div class="row">
          <label>${Escalate Reason}</label>
          <sn-record-picker field="reason_picker" table="'sys_choice'" placeholder="${Select a resaon}"
                            display-field="'label'" value-field="'value'" 
                            default-query="'element=u_escalate_reason'"></sn-record-picker>
          <input class="form-control" ng-model="c.data.reason" type="hidden" />
        </div>
        <div class="row">
          <label>${Escalate Comments}</label>  
          <textarea class="form-control" ng-model="c.data.comments"></textarea>     
        </div>
        <div class="clearfix"></div>
        <div class="row">
          <button type="button" class="btn btn-primary btn-block" ng-click="c.uiAction('escalate')">${Escalate Incident}</button> 
        </div>
      </div>
      <div ng-if="data.escalated.value === '1'">
        <div class="row pull-left">
          ${This ticket has already been escalated!}
        </div>
        <div class="row">
          <div class="col-md-12 col-sm-12 col-xs-6 m-b break-word" ng-repeat="field in data.fields" 
               ng-if="field.value && (field.type != 'decimal' || field.type == 'decimal' && field.value != 0)" >
            <label class="m-n">{{field.label}}</label>
            <span ng-switch="field.type">
              <div ng-switch-when="glide_date_time" title="{{field.display_value}}">
                <sn-time-ago timestamp="::field.value" />
              </div>
              <div ng-switch-default >{{field.display_value}}</div>
            </span>
          </div>
        </div>
      </div>
    </div>
    <div ng-if="data.state.value === '6' || data.state.value === '7'">
      <div ng-if="data.state.value === '6'">
        <div class="row pull-left">
          ${We now believe the issue has been resolved and is due to close on {{data.closeDate}}}
        </div>
        <div class="row pull-left">
          ${If the issue still exists or you feel that it is not resolved to a satisfactory level please update the comments box at the top of the main section (left) and click Post. This will re-open the ticket}
        </div>
      </div>
      <div ng-if="data.state.value === '7'">
        <div class="row pull-left">
          ${This ticket is closed. If this issue is not resolved you will need to open a new ticket.}
        </div>
      </div>
      <div>
         ${The close notes are as follows.}
      </div>
      <div ng-bind-html="data.closeNotes.display_value" class="wrapped italic">
        {{data.closeNotes.display_value}}
      </div>
    </div>
  </div>
</div>

CSS

textarea {
  height: 10em;
}

.row {
  padding-bottom: 10px;
}

.wrapped{
  white-space:pre-wrap;
}

.italic{
  font-style: italic;
}

Server Script

(function(){
	var widget = 'Escalate Widget: '; //debug
	var rec = $sp.getRecord();
	if (rec == null){
		return;
	}
	
	
	data.table = input.table || $sp.getParameter("table")|| options.table;
	data.sys_id = input.sys_id || $sp.getParameter("sys_id") || options.sys_id;
	
	if(data.table == 'incident'){
		var escalated = $sp.getField(rec, 'u_escalated');
		var fields = $sp.getFields(rec, 'u_escalate_reason,u_escalate_comments');
		var state =  $sp.getField(rec, 'state');
		var resolveDate = $sp.getField(rec, 'resolved_at').value;
		var closeDate =  new Sisk_Scripts().getIncidentCloseDate(resolveDate);
		
		data.escalated = escalated;
		data.fields = fields;
		data.state = state;
		data.closeNotes = $sp.getField(rec, 'close_notes');
		data.resolveDate = resolveDate;
		data.closeDate = closeDate.toString();
		
	}
	
	// Valid GlideRecord
	var gr = new GlideRecord(data.table);
	if (!gr.isValid())
		return;
	
	// Valid sys_id
	if (!gr.get(data.sys_id))
		return;
	
	if (input) {
		var action = input.action;
		// If Incident table
		if (data.table == 'incident') {
			if (action == 'escalate') {
				// Escalate Incident
				gr.setValue('u_escalate_reason', input.reason);
				gr.setValue('u_escalate_comments', input.comments);
				gr.setValue('u_escalated', true);
				gr.setValue('u_escalated_by', gs.getUserID());
				gr.setValue('comments', 'incident escalated');
				gr.update();
			}
		}
	}
	
})();

Client Controller

function ($scope, spUtil) {
	
	var c = this;
	
	$scope.$on('record.updated', function(name, data) {
		spUtil.update($scope);
  });
	
	$scope.$on("field.change", function(evt, parms) {
		//if (parms.field.name == 'reason_picker'){		
			c.data.reason = parms.displayValue;
		//}
	});
	
	c.uiAction = function(action) {
		if(c.data.comments == undefined || c.data.reason == '') {
			(alert("Please ensure you have selected a reason and entered comments"));
			return;
		}
		if(!confirm("Are you sure you wish to escalate?")) 
			return;
		c.data.action = action;
		c.server.update().then(function() {
			c.data.action = undefined;
		});
	};
}

Hi Ray,

 

Above Solution only working for admins , choices are not loading for ITIL users . Could you provide solution for ITIL users.??

 

Thanks 

Pooja Das