HI All,
I have created a servicenow widget to display the problem count for the last 12 months that is if today is 24-01-2024 from this month to last 11months where i am getting the data correctly.
all i want is to print the months is the correct order.
currently the months are printing in the order of
| Jan'24 | Dec'23 | Nov'23 | Oct'23 | Sep'23 | Aug'23 | Jul'23 | Jun'23 | May'23 | Apr'23 | Mar'23 | Feb'23 |
i want to reverse the order to
| Feb'23 | Mar'23 | Apr'23 | May'23 | Jun'23 | Jul'23 | Aug'23 | Sep'23 | Oct'23 | Nov'23 | Dec'23 | Jan'24 |
let me provide you the Scripts:
HTML:
<body>
<div class="panel panel-default">
<div class="panel-heading"><i class="fa fa-calendar"></i> ${Status History - Problem Tickets*}</div>
<div class="panel-body custom-panelbody">
<!-- Wrap the table with a container div -->
<div class="table-container">
<table class="table">
<thead>
<tr>
<th scope="col" class="ServiceName">Service</th>
<!-- Loop through the months to create table headers -->
<th scope="col" class="monthcalander" ng-repeat="monthObj in data.calander">
<span>{{ monthObj[0].month }}</span>
<span>{{ monthObj[1].month }}</span>
<span>{{ monthObj[2].month }}</span>
<span>{{ monthObj[3].month }}</span>
<span>{{ monthObj[4].month }}</span>
<span>{{ monthObj[5].month }}</span>
<span>{{ monthObj[6].month }}</span>
<span>{{ monthObj[7].month }}</span>
<span>{{ monthObj[8].month }}</span>
<span>{{ monthObj[9].month }}</span>
<span>{{ monthObj[10].month }}</span>
<span>{{ monthObj[11].month }}</span>
</th>
<th scope="col" class="All-Problems">
<!-- Make the total problem count clickable -->
<span>
Open<br />Problems
</span>
</th>
</tr>
</thead>
<tbody>
<!-- Loop through each service data to create table rows -->
<tr ng-repeat="serviceData in data.table.list">
<td class="service-name">{{ serviceData.service }}</td>
<!-- Loop through the problem counts for each month and display them in table cells -->
<td ng-repeat="monthObj in data.calander">
<span ng-if="serviceData[$index].problemCount > 0" ng-click="openChildWidget(serviceData, [$index])">
<!-- Display problem count icons based on the data -->
<i ng-if="serviceData[$index].problemCount === 0" class="fa fa-check-circle"></i>
<i ng-if="serviceData[$index].problemCount > 0 && serviceData[$index].color === 'purple'" class="fa fa-minus-circle"></i>
<i ng-if="serviceData[$index].problemCount > 0 && serviceData[$index].color === 'amber'" class="fa fa-minus-circle"></i>
<i ng-if="serviceData[$index].problemCount > 0 && serviceData[$index].color === 'red'" class="fa fa-exclamation-circle"></i>
</span>
<span ng-if="serviceData[$index].problemCount === 0">
<!-- Display the icon as text when count is 0, making it not clickable -->
<i class="fa fa-check-circle"></i>
</span>
</td>
<!-- Display the open problem count in the corresponding cell -->
<td>
<!-- Make the total problem count clickable only if it's greater than 0 -->
<span ng-if="serviceData.totalOpenProblemCount > 0" ng-click="openTotalProblemWidget(serviceData, 'Open')">
<i class="fa fa-plus-circle"></i>
</span>
<span ng-if="serviceData.totalOpenProblemCount === 0">
<!-- Display the icon as text when count is 0, making it not clickable -->
<i class="fa fa-plus-circle" ng-class="{'green-plus-circle': serviceData.totalOpenProblemCount === 0}"></i>
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
<div>
{{ data.table }}
</div>
<div>
{{ data.calander }}
</div>
Server script
(function(spModal) {
/* populate the 'data' object */
/* e.g., data.table = $sp.getValue('table'); */
data.table = {
'list': []
};
var grSDO = new GlideRecord('sys_dictionary_override');
if (grSDO.get('74c5af4a4f62e2000e65c0f18110c759')) { //problem reference qualifier.
var Query = grSDO.getValue('reference_qual');
}
var grCCS = new GlideRecord('cmdb_ci_service');
grCCS.addEncodedQuery(Query);
grCCS.orderBy('name');
grCCS.setLimit('1');
grCCS.query();
while (grCCS.next()) {
var service_sysID = grCCS.getValue('sys_id');
var obj = {};
obj.service = grCCS.getValue('name');
var monthTranslations = {
1: "Jan",
2: "Feb",
3: "Mar",
4: "Apr",
5: "May",
6: "Jun",
7: "Jul",
8: "Aug",
9: "Sep",
10: "Oct",
11: "Nov",
12: "Dec"
};
data.calander = [];
var openProblemCount = 0;
var openProblemNumbers = [];
var currentDate = new GlideDate();
for (var i = 11; i >= 0; i--) {
var obj_1 = {};
currentDate.setDayOfMonth(1);
var days = currentDate.getDaysInMonth();
var mon = currentDate.getMonthNoTZ();
var year = currentDate.getYearNoTZ().toString();
var digit = year;
var last2 = digit.substr(2);
currentDate.addMonths(-1);
// Declare problemData here
var problemData = [];
var grProblem = new GlideRecord('problem');
grProblem.addEncodedQuery("u_technical_service=" + service_sysID + "^sys_created_onBETWEENjavascript:gs.dateGenerate('" + year + "-" + mon + "-01','00:00:00')@javascript:gs.dateGenerate('" + year + "-" + mon + "-" + days + "','23:59:59')");
grProblem.addEncodedQuery('resolution_code!=canceled^ORresolution_code=NULL');
grProblem.addEncodedQuery('priorityIN1,2,3');
//grProblem.addActiveQuery();
grProblem.query();
//gs.log(i + ": query = " + grProblem.getEncodedQuery(), 'Shyam@2');
var hasP1orP2 = false;
var hasP3 = false;
while (grProblem.next()) {
var problemNumber = grProblem.getValue('number');
var priority = grProblem.getValue('priority');
problemData.push({
number: problemNumber,
});
if (grProblem.active == true) {
openProblemCount++;
openProblemNumbers.push(problemNumber);
}
// Check priority and set flags accordingly
if (priority == 1 || priority == 2) {
hasP1orP2 = true;
} else if (priority == 3) {
hasP3 = true;
}
}
// Determine the color based on priority conditions
var monthColor;
if (hasP1orP2 && !hasP3) {
monthColor = 'red';
} else if (!hasP1orP2 && hasP3) {
monthColor = 'amber';
} else {
monthColor = 'red';
}
var month = monthTranslations[mon];
var monthYear = month + "'" + last2; // Combine month and year
var mon_index = (i);
obj[mon_index] = {
month: monthYear,
problemCount: problemData.length,
problemData: problemData,
color: monthColor // Set the color for each month
};
// Update open and closed problem counts for this service
obj.totalOpenProblemCount = openProblemCount;
// Store open problem numbers in the object
obj.openProblemNumbers = openProblemNumbers;
obj_1[mon_index] = {
month: monthYear,
index: i
};
data.calander.push(obj_1);
}
data.table.list.push(obj);
}
})();
Client Script:
api.controller = function($scope, $sce, spUtil, snRecordWatcher, $rootScope, spModal) {
/* widget controller */
var c = this;
$scope.openChildWidget = function(serviceData, index) {
alert("serviceData = " + JSON.stringify(serviceData.problemData));
alert("index = " + index);
// Create an array to store problem numbers
var problemNumbers = [];
// Populate problemNumbers with data as needed
// For example, if serviceData has a property called 'problemData' that contains problem numbers:
problemNumbers = serviceData[index].problemData.map(function(problem) {
return problem.number;
});
// Open the child widget with widgetInput Details
spModal.open({
title: '<h3 style="margin-top: 10px;"><i class="fa fa-info-circle text-primary"></i> ' + serviceData.service + '</h3>',
widget: 'monthly_count_child_widget', //widget name
size: 'lg',
widgetInput: {
service: serviceData.service,
month: index,
number: problemNumbers
},
});
};
$scope.openTotalProblemWidget = function(serviceData, type) {
// Create an array to store the selected problem numbers (either open or closed)
var selectedProblemNumbers = [];
// Depending on the 'type', fetch the corresponding total problem count
var totalProblemCount = type === 'Open' ? serviceData.openProblemNumbers : serviceData.closedProblemNumbers;
// Open the child widget with widgetInput Details
spModal.open({
title: '<h3 style="margin-top: 10px;"><i class="fa fa-info-circle text-primary"></i> ' + serviceData.service + '</h3>',
widget: 'child_widget_total_problem', //widget name
size: 'lg',
widgetInput: {
number: totalProblemCount
},
});
};
};
output of {{ data.table }} given below:
{"list":[{"0":{"problemCount":1,"month":"Feb'23","color":"amber","problemData":[{"number":"PRB0052221"}]},"1":{"problemCount":0,"month":"Mar'23","color":"red","problemData":[]},"2":{"problemCount":0,"month":"Apr'23","color":"red","problemData":[]},"3":{"problemCount":0,"month":"May'23","color":"red","problemData":[]},"4":{"problemCount":0,"month":"Jun'23","color":"red","problemData":[]},"5":{"problemCount":0,"month":"Jul'23","color":"red","problemData":[]},"6":{"problemCount":0,"month":"Aug'23","color":"red","problemData":[]},"7":{"problemCount":1,"month":"Sep'23","color":"amber","problemData":[{"number":"PRB0052851"}]},"8":{"problemCount":0,"month":"Oct'23","color":"red","problemData":[]},"9":{"problemCount":0,"month":"Nov'23","color":"red","problemData":[]},"10":{"problemCount":0,"month":"Dec'23","color":"red","problemData":[]},"11":{"problemCount":0,"month":"Jan'24","color":"red","problemData":[]},"openProblemNumbers":[],"totalOpenProblemCount":0,"service":"Access Management"}]}
output of {{ data.calander }} given below:
[{"11":{"month":"Jan'24","index":11}},{"10":{"month":"Dec'23","index":10}},{"9":{"month":"Nov'23","index":9}},{"8":{"month":"Oct'23","index":8}},{"7":{"month":"Sep'23","index":7}},{"6":{"month":"Aug'23","index":6}},{"5":{"month":"Jul'23","index":5}},{"4":{"month":"Jun'23","index":4}},{"3":{"month":"May'23","index":3}},{"2":{"month":"Apr'23","index":2}},{"1":{"month":"Mar'23","index":1}},{"0":{"month":"Feb'23","index":0}}]
what changes i have to make to achieve the solution.
please help me
