Hi @Allen A ,
Please find below Code for the OOB widget I am referring to .Please review and let me know how can I make changes .
Also I am looking for adding a new field called Assignment group on this Widget , please guide.
HTML Template :
<!-- HRM Case Info STARTS -->
<div id="case_info_{{data.caseNumber}}" ng-if="data.caseTitle && data.showHeader" class="panel-title info caseInfo" ng-class="{'info-top': !data.isSummary && !mobileDevice}">
<i alt="{{data.caseTitle}}" aria-hidden="true" ng-if="!data.isSummary"></i>
<div class="row" ng-if="!data.isSummary">
<div>
<h1 class="case-title" ng-class="{'case-mobile-title' : mobileDevice}">
{{data.caseTitle}}
</h1>
</div>
</div>
<div class="row" ng-class="{'info-split':!mobileDevice}">
<!--Left side elements - Case Number, state, updated and Cancel Request-->
<div class="col-sm-6 header-info" ng-if="!data.isSummary">
<ul id="case-title-footer-left">
<li class="case-number" ng-class="{'row col-xs-12':mobileDevice}">
${{{data.caseNumber}}}
</li>
<li class="header-sub-components state">
{{data.state}}
<span ng-show="data.transferredTo"> - ${Transferred to}
<span ng-if="data.isHRCase">
<a href="{{data.transferredToUrl}}" target="_blank">{{data.transferredToDisplayValue}}</a>
</span>
<span ng-if="!data.isHRCase">
{{data.transferredToDisplayValue}}
</span>
</span>
</li>
<li class="header-sub-components updated">
${uppercase_updated}
<sn-time-ago timestamp="data.lastUpdatedOn" />
</li>
<li ng-if="data.isCaseCancellable" class="header-sub-components cancel-request">
<a href="javascript:void(0)" class="link" ng-click="$event.stopPropagation();cancelCase()">
${Cancel Request}
</a>
</li>
</ul>
</div>
<!--Next div elements - Details, Approvers, Attachments, History and Chat -->
<div ng-if="data.infoTabs" class="col-sm-12 info-tabs" ng-class="{'info-tabs-bottom': !data.isSummary, 'todo-info-tabs': data.isSummary}">
<sp-widget widget="data.infoTabs"></sp-widget>
</div>
<div ng-if="!data.infoTabs && data.isSummary && !mobileDevice" class="todo-case-padder"></div>
</div>
</div>
<!-- Case info grid STARTS -->
<div ng-if="data.defaultMoreInfo && data.showHeader" id="detailsRow">
<a ng-if="mobileDevice && !data.infoTabs" id="more_information" href="javascript:void(0)" class="col-xs-12 custom-information" ng-click="moreInfoCollapsed = !moreInfoCollapsed" data-toggle="collapse" data-target="{{data.isSummary? '.todo-case-more-info': '.more-info'}}" aria-expanded="false">
${More Information}
<i ng-show="moreInfoCollapsed" class="fa fa-caret-down collapse-margin" aria-hidden="true"></i>
<i ng-show="!moreInfoCollapsed" class="fa fa-caret-up collapse-margin" aria-hidden="true"></i>
</a>
<hr-m-custom-case-descriptor
hr-case-id="{{data.parentCaseId}}"
too-short-input="{{data.s2InputShort}}"
save="updateListFields(name, list)"
ng-class="{'custom-header-configurations' : !mobileDevice,
'collapse': mobileDevice,
'more-info': mobileDevice && !data.isSummary,
'todo-case-more-info':mobileDevice && data.isSummary,
'todo-case-padder' : !mobileDevice && data.isSummary}"/>
</div>
<!-- Case info grid ENDS -->
<!-- HRM Case Info ENDS -->
Client Script :
function hrmCaseInfoController($scope, $http, spUtil, $timeout, spModal, i18n, $window) {
var c = this;
$scope.firstLoad = true;
var MOBILE_DEVICE_SCREEN_WIDTH = 767;
$scope.mobileDevice = c.data.isMobile || ($window.innerWidth < MOBILE_DEVICE_SCREEN_WIDTH);
$scope.moreInfoCollapsed = true;
$scope.$on('activitySetSelected', function(name, options) {
if (options == null || !options.clickActivitySetFromMobile || options.uncheckViewAllToDosFromMobile)
return;
$scope.toggleShowHeader();
});
$scope.$on('sn_hr_sp.navigateToActivitySetList', function(name, options) {
$scope.toggleShowHeader();
});
$scope.toggleShowHeader = function() {
c.data.showHeader = !c.data.showHeader;
};
$scope.loadData = function(callback) {
var input = {action:"loadData",
isSummary:c.data.isSummary,
parentCaseId:c.data.parentCaseId};
$scope.server.get(input).then(function(resp){
$scope.data = resp.data;
callback();
});
};
//Record watcher
spUtil.recordWatch($scope, "task", 'sys_id=' + $scope.data.parentCaseId, function(name) {
if (name.data.changes.length > 0 || name.data.operation == "delete")
$scope.loadData(init);
});
spUtil.recordWatch($scope, "sysapproval_approver", "sysapproval=" + $scope.data.parentCaseId, function(name) {
if (name.data.changes.length > 0 || name.data.operation == "delete")
$scope.loadData(init);
});
$scope.cancelCase = function() {
var confirmMsg = $scope.data.i18n.cancelMsgNoChildren;
$http.get('/api/sn_hr_core/utils/getGlideRecord?sysparm_name=getGlideRecordSecureSetData&sysparm_tableName=sn_hr_core_case&sysparm_query=active=true^stateNOT IN1,3,4,7^parent=' + $scope.data.parentCaseId).then(function(response) {
if (response.data && JSON.parse(response.data.result).length > 0)
confirmMsg = $scope.data.i18n.cancelMsgOpenChildren;
spModal.confirm(confirmMsg).then(function() {
$scope.data.action = 'cancelCase';
$scope.server.update(init);
});
});
};
$scope.updateListFields = function(fieldName, list) {
$scope.data.action = 'updateListFields';
$scope.data.updateListFields.fieldName = fieldName;
var fieldValues = [];
for (var i = 0; i < list.length; i++) {
fieldValues.push(list[i].id + '');
}
$scope.data.updateListFields.fieldValue = fieldValues;
$scope.server.update(init);
};
function init (setFirstload) {
if (setFirstload)
$scope.firstLoad = false;
if(!c.data.isSummary) {
$timeout(function() {
$rootScope.$broadcast('sp.update.breadcrumbs', $scope.data.breadcrumbs);
});
}
}
if (c.data.async)
$scope.loadData(init);
$scope.$on('sn_hr_sp.filterCountUpdate', function(event, taskInfo) {
if (taskInfo == null || !$scope.firstLoad)
return;
$scope.data.hasTask = false;
for (var pane in taskInfo.pane_filter) {
if (taskInfo.pane_filter[pane] > 0) {
$scope.data.hasTask = true;
break;
}
}
init(true);
});
$(document).ready(function() {
if ($scope.firstLoad){
init(false);
}
});
}
Server Script:
(function() {
data.isMobile = gs.isMobile();
data.showHeader = true;
data.s2InputShort = gs.getMessage("Please enter {0} or more characters");
var grCase = new GlideRecord('sn_hr_core_case');
data.updateListFields = {fieldName : "", fieldValue : []};
if (input && input.parentCaseId)
data.parentCaseId = input.parentCaseId;
else
data.parentCaseId = options.sys_id || hr_PortalUtil.getParentFromUrl($sp.getParameter("sys_id"), $sp.getParameter("table"));
if (input && input.isSummary)
data.isSummary = input.isSummary;
else
data.isSummary = options.isSummary? options.isSummary : false;
if (input && input.action == 'cancelCase') {
grCase.get(data.parentCaseId);
grCase.state = 7;
grCase.update();
}
if (input && input.action == 'updateListFields') {
grCase.get(data.parentCaseId);
var name = input.updateListFields.fieldName;
var values = String(input.updateListFields.fieldValue);
if (name) {
grCase.setValue(name, values);
grCase.update();
}
}
data.async = true;
if (data.async && (!input || input.action != "loadData"))
return;
if (input && !gs.nil(input.isOpen))
data.isOpen = input.isOpen;
if (grCase.get(data.parentCaseId)) {
var util = new hr_PortalUtil(grCase);
data.caseTitle = util.getCaseTitle();
data.openForView = util.isOpenedForView();
data.isApprovalRequired = util.isApprovalRequired(data.parentCaseId, gs.getUserID());
data.lastUpdatedOn = String(grCase.sys_updated_on);
data.caseNumber = String(grCase.number);
data.state = grCase.getDisplayValue('state');
data.transferredTo = String(grCase.transferred_to);
data.transferredToDisplayValue = grCase.transferred_to ? grCase.transferred_to.getDisplayValue() : '';
data.isHRCase = new sn_hr_core.hr_CoreUtils().isCase(grCase.transferred_to.sys_class_name);
data.transferredToUrl = "?id="+$sp.getParameter('id') + '&sys_id=' + data.transferredTo;
data.defaultMoreInfo = showDetailsOption(grCase);
data.breadcrumbs =[{label: data.caseTitle, url: '#'}];
if (data.openForView || data.isApprovalRequired) {
//Setting up case info - For OpenedFor Users View
data.shortDescription = grCase.getDisplayValue('short_description');
data.subjectPerson = grCase.getDisplayValue('subject_person');
data.openedForPerson = grCase.getDisplayValue('opened_for');
data.assignedTo = grCase.getDisplayValue('assigned_to');
data.subjectPersonId = getProfileLink(String(grCase.subject_person));
data.assignedToId = getProfileLink(String(grCase.assigned_to));
data.openedForId = getProfileLink(String(grCase.opened_for));
data.due = getDateLabel(grCase.getDisplayValue('due_date'));
data.isCaseCancellable = checkCaseCancellable(grCase);
data.infoTabs = $sp.getWidget('hrm-info-tabs', {
sys_id : grCase.getUniqueValue(),
isParentCase: true,
isSummary: data.isSummary
});
}
} else {
var task = new GlideRecord('task');
if (task.get(data.parentCaseId))
data.breadcrumbs =[{label: String(task.number), url: '#'}];
}
function getProfileLink(user){
var link = user == gs.getUserID() ? '?id=hri_user_profile&sys_id=' : '?id=user_profile&sys_id=';
return link + user;
}
function getDateLabel(date) {
var gd = new GlideDate();
gd.setValue(date);
return gd.getDisplayValue();
}
function checkCaseCancellable(hrCase) {
if (!hrCase.active || !data.openForView)
return false;
var caseOptions = hrCase.hr_service.case_options;
var optionsGr = new GlideRecord('sn_hr_core_service_option');
optionsGr.get('value', 'UserCannotCancel');
if (!gs.nil(caseOptions) && caseOptions.indexOf(String(optionsGr.sys_id)) > -1)
return false;
return true;
}
// determine whether to show Peoples row and Details row in the mobile view under more information
function showDetailsOption(caseGr) {
var portalUtil = new hr_PortalUtil(caseGr);
return portalUtil.getPeopleInfoFromCaseConfig().peoplesInfo.length > 0 || portalUtil.getAdditionalFieldsInfo().additionalFields.length > 0;
}
data.i18n = {};
data.i18n.cancelMsgNoChildren = gs.getMessage('Are you sure you want to cancel this case?');
data.i18n.cancelMsgOpenChildren = gs.getMessage('Are you sure you want to cancel this case? Canceling this case will also close child cases.');
})();
