Is it possible to have UI Actions on the ticket portal page?

[Nicolas17]

Dear community,

I'm trying to get the 'Close incident' UI Action (or any other) on the 'ticket' portal page.

I discovered that using the form widget I can see any UI Action I intend to use on the portal. But we'd like the ticket layout and would love to stick a little bit to it.

Any idea if I could see UI Actions on the widgets used in this page? It could be on the 'Ticket Fields' or the 'Conversation' widgets or even an extra custom one displaying only UI Actions...

Thanks in advance.

Regqrds,

Nicolas

[VigneshMC]

Checkout below link

https://serviceportal.io/create-custom-action-buttons-service-portal/

Thanks

[Brian Lancaster]

Here is a blog that should get you started.  This is for reopening an incident but it should not require to many change to make it for closing an incident.

https://community.servicenow.com/community?id=community_article&sys_id=db298e11db97d380fece0b55ca961...

[Mike Patel · Accepted solution]

Thanks Brian, I did create widget for it.

Create new Widget called 

Name: Resolve Incident

ID: resolve-incident

HTML:

<div class="panel b" ng-if="data.showWidget">
 <div class="panel-heading bg-primary">Actions</div>
 <div class="panel-body">
   <div>
     <a>If this ticket is no longer needed, click this button to mark it Resolved:</a>
   </div><br>
 <button type="button" class="btn btn-danger btn-block" ng-click="c.openModalResolve()" ng-if="data.showResolve">Resolve</button>
 <div ng-if="data.response1" class="alert alert-info">{{::data.response1}}</div>
 </div>
</div>

Server:

(function() {

	// Get table & sys_id
	data.table = input.table || $sp.getParameter("table");
	data.sys_id = input.sys_id || $sp.getParameter("sys_id");

	// Valid GlideRecord
	var gr = new GlideRecord(data.table);
	if (!gr.isValid())
		return;

	// Valid sys_id
	if (!gr.get(data.sys_id))
		return;

	//Button Visibility
	if(data.table == 'incident' && gr.active == true && gr.incident_state != 6 && (gr.caller_id == gs.getUserID() || gr.u_requested_for == gs.getUserID() || gr.opened_by == gs.getUserID())){
		data.showWidget = true;
		data.showResolve = true;

	} else {
		data.showWidget = false;
		data.showResolve = false;
	}

	//input
	if (input && input.action == 'resolve') {

		// If Incident table
		if (data.table == 'incident') {
			
			var jr = new GlideRecord('incident');
			jr.get(data.sys_id);
			jr.setValue('incident_state', 6);
			jr.setValue('state', 6);
			jr.setValue('resolved_by', gs.getUserID());
			jr.setValue('close_notes', input.resolveComments);
			jr.setworkflow(false);
			jr.update();
		}
	}
})();

Client:

function ($uibModal, $scope, spUtil) {
	var c = this;

	$scope.$on('record.updated', function(name, data) {
		spUtil.update($scope);
	});

	c.uiAction = function(action) {
		c.data.action = action;
		c.server.update().then(function() {
			c.data.action = undefined;
		spUtil.addInfoMessage("Incident has been Resolved", 3000);
		});
		c.modalInstance.close();
	};
	c.openModalResolve = function() {
		c.modalInstance = $uibModal.open({
			templateUrl: 'modalTemplateResolve',
			scope: $scope
		});
	};
	c.closeModal = function() {
		c.modalInstance.close();
	};
}

ng-template

ID: modalTemplateResolve

<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Provide a reason for the resolve</h4>
</div>
<div class="panel-body wrapper-xl">
<form name="modalTemplateResolve" ng-submit="c.uiAction('resolve')">
<div class="form-group">
<textarea required sp-autosize="true" ng-required="true" ng-model="data.resolveComments" id="resolveComments" placeholder="Comments required" class="form-control ng-pristine ng-valid ng-scope ng-empty ng-touched" aria-invalid="false" style="overflow: hidden; word-wrap: break-word; resize: horizontal;"></textarea>
</div>
<input class="btn btn-primary" type="submit" />
</form>
</div>
</div>

[jsnmllr1981]

I got the resolved button to work, and I am trying to add other buttons to this widget like a close button, I got the button to work but I can not get it to refresh the page and hide the button like the resolved button does

(ignore the onclick comment in the html, was trying something)

Here is my code

HTML:

<div class="panel b" ng-if="data.showWidget">
 <div class="panel-heading bg-primary">Actions</div>
 <div class="panel-body">
   <button type="button" class="btn btn-success btn-block" ng-click="c.openModalResolve()" ng-if="data.showResolve">Resolve</button>
   <button type="button" class="btn btn-success btn-block" ng-click="c.uiAction('close')" ng-if="data.showClose">Close Ticket</button>
   <div ng-if="data.response1" class="alert alert-info"></div>
 </div>
</div>
<!-- onclick="location.reload()" -->
<script type="text/ng-template" id="modalTemplateResolve">
	<div class="panel panel-default">
		<div class="panel-heading">
			<h4 class="panel-title">Provide a reason for the resolve</h4>
  		</div>
      <div class="panel-body wrapper-xl">
      <form name="modalTemplateResolve" ng-submit="c.uiAction('resolve')">
        <div class="form-group">
          <textarea required sp-autosize="true" ng-required="true" ng-model="data.resolveComments" id="resolveComments" placeholder="Comments required" class="form-control ng-pristine ng-valid ng-scope ng-empty ng-touched" aria-invalid="false" style="overflow: hidden; word-wrap: break-word; resize: horizontal;"></textarea>
        </div>
        <input class="btn btn-primary" type="submit" />
      </form>
    </div>
  </div>
</script>

Server Script:

(function() {

 // Get table & sys_id
 data.table = input.table || $sp.getParameter("table");
 data.sys_id = input.sys_id || $sp.getParameter("sys_id");

 // Valid GlideRecord
 gr = new GlideRecord(data.table);
 if (!gr.isValid())
   return;

 // Valid sys_id
 if (!gr.get(data.sys_id))
   return;

  //Button Visibility
  if(data.table == 'incident' && gr.active == true && gr.state != 6  && gr.caller_id == gs.getUserID()){
    data.showWidget = true;
	data.showClose = false;
    data.showResolve = true;
  }
  else if(data.table == 'incident' && gr.active == true && gr.state == 6  && gr.caller_id == gs.getUserID()) {
    data.showWidget = true;
	data.showClose = true;
    data.showResolve = false;
  }

 //input
 if (input && input.action) {
   var action = input.action;

   //Incident table
   if (data.table == 'incident') {
     if (action == 'resolve' && input.resolveComments !='') {
       gr.setValue('incident_state', 6);
       gr.setValue('state', 6);
       gr.setValue('resolved_by', gs.getUserID());
       gr.setValue('close_notes',"Closed by caller with comment: "+ input.resolveComments);
       gr.update();
       //data.response1 = gs.getMessage('Incident '+gr.number+' was resolved');
     }
	if(action == 'close') {
		gr.setValue('incident_state', 7);
		gr.setValue('state', 7);
		gr.update();
	}
   }
 }
})();

Client Controller:

function($uibModal, $scope, spUtil) {
	var c = this;

	$scope.$on('record.updated', function(name, data) {
		spUtil.update($scope);
	})

	c.uiAction = function(action) {
		c.data.action = action;
		c.server.update().then(function() {
			c.data.action = undefined;
		})
		c.modalInstance.close();
	}
	c.openModalResolve = function() {
		c.modalInstance = $uibModal.open({
			templateUrl: 'modalTemplateResolve',
			scope: $scope
		})
	}
	c.closeModal = function() {
		c.modalInstance.close();
	}
}