How to call one widget data fromn another widget.

thaduri sai · ‎01-28-2024

we have two widgets. in one widget we have a buton called Action. Basically by using this button the end user can perform action oin their incidents like Resove, Reopen, Close.

so now we are implementing a functionality which supports Escation from the incident from.

so we have created a widget called "Escalation' and defined funcitons to work accordingly.

now the requiremnt is we have to embed that Escalation button in the exisiting Action menu.

Please sinf the screenshot below

Please find the widget Scripts we wrote and kindly alter / update to work

Escalation widget Scripts:

Body HTML Template:

<div class="action_button panel b" ng-if="data.showWidget" >

<button type="button" class="btn btn-danger btn-block" ng-click = "c.uiAction('cancel')" ng-disabled = "data.first_escalation"> <font size = "+1" face="Arial" color="white" data-toggle="tooltip" title="Click to escalate this issue to the Support Team Manager." > ${Escalation} </font> </button>
</div>

<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</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

var gr = new GlideRecord(data.table);

if (!gr.isValid())

return;

// Valid sys_id

if (!gr.get(data.sys_id))

return;

// set assigned to value to send email notification

var inc = new GlideRecord(data.table);

inc.addQuery('sys_id',data.sys_id);

inc.query();

if(inc.next()){

if(inc.sys_class_name == 'incident' && inc.caller_id == gs.getUserID() && inc.sys_created_on < gs.hoursAgo(24) && (inc.state == 2 || inc.state == 3)){

data.showWidget = true;

}else {

data.showWidget = false;

}

if(input.action){

if(inc.u_escalate_count <= 1){

inc.work_notes = "Escalation by caller";

inc.u_escalate_count += 1;

inc.u_escalated_state = 'escalation_proposed';

inc.update();

inc.setWorkflow(false);

}

if (inc.u_escalate_count <= 1)

{data.first_escalation = true;

}

else

{

data.first_escalation = false;

}

})();

Client Controller:

function ($scope,spUtil, spModal) {

var c = this;

spUtil.recordWatch($scope, $scope.data.table, "sys_id=" + $scope.data.sys_id);

c.uiAction = function(action){

spModal.open({

message: "${Are you sure you want to escalate the ticket?}",

title: "${Escalation Confirmation}",

footerStyle: {},

size: "md",

buttons: [

{

label: "${Cancel}",

cancel: true

},

{

label: "${Ok}",

primary: true

}

]

}).then(function() {

c.disable = true;

c.data.action = action;

c.server.update().then(function() {

c.data.action = undefined;

})

});

}

------------------------------------------------------------

Cloned Widget Script for Action Button:

Body HTML:

<div>
<div class="dropdown" id="child-case-tabs" ng-if="data.showActions">
<button type="button" id="actions-button" class="btn btn-default dropdown-toggle action-btn" data-toggle="dropdown" style="width : 100%" aria-haspopup="true" ng-init="setFocusOnActionButtons()">
${Actions}
<span class="fa fa-caret-down"></span>
</button>
<ul class="dropdown-menu pull-right" id="actionList">
<li ng-if="data.canResolve">
<a href="javascript&colon;void(0)" ng-click="$event.stopPropagation();resolveIncident()">${Resolve}</a>
</li>
<li ng-if="data.canReopen">
<a href="javascript&colon;void(0)" ng-click="$event.stopPropagation();reopenIncident()">${Reopen}</a>
</li>
<li ng-if="data.canClose">
<a href="javascript&colon;void(0)" ng-click="$event.stopPropagation();closeIncident()">${Close}</a>
</li>
</ul>
</div>

</div>

Server Script:

(function() {

var incidentGr = new GlideRecord('incident');

var incidentSysId = options.sys_id;

if (!incidentSysId && $sp.getParameter('table') == 'incident')

incidentSysId = $sp.getParameter('sys_id');

if (!incidentSysId && $sp.getParameter('table') == 'universal_request') {

var urGr = new GlideRecord('universal_request');

urGr.get($sp.getParameter('sys_id'));

incidentSysId = urGr.primary_task + "";

}

/* Actions - Start */

if (input && input.action == 'resolveIncident' && incidentGr.get(incidentSysId) && hasPermissions(incidentGr, "write")) {

incidentGr.incident_state = global.IncidentState.RESOLVED;

incidentGr.state = global.IncidentState.RESOLVED;

incidentGr.resolved_by = gs.getUserID();

data.isIncidentResolved = incidentGr.update();

}

if (input && input.action == 'reopenIncident' && incidentGr.get(incidentSysId) && hasPermissions(incidentGr, "write")) {

incidentGr.incident_state = global.IncidentState.IN_PROGRESS;

incidentGr.state = global.IncidentState.IN_PROGRESS;

data.isIncidentReopened = incidentGr.update();

gs.addInfoMessage(gs.getMessage("Request reopened"));

}

if (input && input.action == 'closeIncident' && incidentGr.get(incidentSysId) && hasPermissions(incidentGr, "write")) {

incidentGr.incident_state = global.IncidentState.CLOSED;

incidentGr.state = global.IncidentState.CLOSED;

data.isIncidentClosed = incidentGr.update();

}

/* Actions - End */

/* Load incident data */

if (incidentGr.get(incidentSysId) && hasPermissions(incidentGr, "read")) {

var incidentUtils = new global.IncidentUtils();

data.canResolve = incidentUtils.canResolveIncident(incidentGr);

data.canReopen = incidentUtils.canReopenIncident(incidentGr);

data.canClose = incidentUtils.canCloseIncident(incidentGr);

data.showActions = data.canResolve || data.canReopen || data.canClose;

}

function hasPermissions(gr, operation) {

if (operation == "read" && gr.canRead())

return true;

if (operation == "write" && gr.canWrite())

return true;

return (gr.getValue("caller_id") == gs.getUserID()) || (gr.getValue("opened_by") == gs.getUserID());

}

data.i18n = {};

})();

Client Controller:

function incidentTicketActions($scope, $http, spUtil, $timeout, spModal, i18n, $window, $uibModal, spAriaUtil) {

/* widget controller */

var c = this;

c.doneLoading = false;

c.resolvedIncidentMsg = "${Resolved Incident}";

c.closedIncidentMsg = "${Closed Incident}";

c.reopenedIncidentMsg = "${Reopened Incident}";

var MOBILE_DEVICE_SCREEN_WIDTH = 767;

$scope.mobileDevice = c.data.isMobile || ($window.innerWidth < MOBILE_DEVICE_SCREEN_WIDTH);

$scope.resolveIncident = function() {

$scope.data.action = 'resolveIncident';

$scope.server.update(init).then(function(response){

if (response.isIncidentResolved)

spAriaUtil.sendLiveMessage(c.resolvedIncidentMsg);

});

$scope.$emit('focusOnActions', {"isFocusRequired": true});

};

$scope.closeIncident = function() {

$scope.data.action = 'closeIncident';

$scope.server.update(init).then(function(response){

if (response.isIncidentClosed)

spAriaUtil.sendLiveMessage(c.closedIncidentMsg);

});

var elm = document.getElementById('short-desc')

elm.focus();

};

$scope.reopenIncident = function() {

$scope.data.action = 'reopenIncident';

$scope.server.update(init).then(function(response){

if (response.isIncidentReopened)

spAriaUtil.sendLiveMessage(c.reopenedIncidentMsg);

});

$scope.$emit('focusOnActions', {"isFocusRequired": true});

};

function init() {}

$(document).on('click', 'div.modal-footer button.btn, ul#child-case-tabs .dropdown-menu', function(e) {

e.stopPropagation();

});

$(document).bind('dragover drop', function(event) {

event.preventDefault();

return false;

});

$scope.$on('sp_loading_indicator', function(e, value) {

if (!value && !c.doneLoading) {

c.doneLoading = true;

}

});

}\

LINK:

function link(scope, element, attrs, controller) {

scope.setFocusOnActionButtons = function() {

if (scope.widget.isFocusRequired) {

var elm = element.find('#actions-button')[0];

elm.focus();

}

Community Alums · ‎01-28-2024

Hi @thaduri sai ,

HTML

<div>
  <div>
<sp-widget widget="data.example"></sp-widget>
  </div>
</div>

Server

data.example = $sp.getWidget('anotherwidgetid', {});

Also, watch this video : https://www.youtube.com/watch?v=uEK0SWiiZ3E