Hi,
I am Beginner in ServiceNow and Learning how to Develop the Custom Cards in the ServicePortal. I am trying to get a value of the open Incidents for selected Priority in the card using Glide Query. I achieved the basic functionality. Now I want to send the selected Priority Value to Server and get the updated value to the card. I am posting code here.
HTML Code:
<html>
<head>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Arima+Madurai:100,200,300,400,500,700,800,900" rel="stylesheet">
<script>https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
</head>
<div class="card">
<div class="card-container">
<h3>Active Incidents</h3>
<!--Trial dropdown code-->
<!-- Single button -->
<span id="idnum1">Critical</span><div class="btn-group">
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul id="demolist" class="dropdown-menu">
<li><a href="#" data-value="1">Critical</a></li>
<li><a href="#" data-value="2">High</a></li>
<li><a href="#" data-value="3">Medium</a></li>
<li><a href="#" data-value="4">Low</a></li>
</ul>
</div>
<!-- End dropdown -->
<div class="content">
<div class="main-info">
<p id= "fr1num" class="Inc-num">{{c.data.incidents}}</p>
</div>
</div>
</div>
</div>
</html>
CSS:
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
height: 300px !important;
background-color: #eff0f0;
}
.card-container {
padding: 0 16px;
}
p
{
font-size:120px;
color: black;
text-align: center;
font-family: "Verdana";
font-weight: normal;
}
h3
{
padding-top: 10px;
font-size: 25px;
}
.btn-group
{
padding-top: 0px;
padding-bottom: 3px;
}
.glyphicon.glyphicon-alert {
font-size: 20px;
}
Client Script:
function () {
var c = this;
/*Color Change for the number*/
$(document).ready(function(){
if(c.data.incidents > 10){
$('#fr1num').css({'color':'Red'});
}
else{
$('#fr1num').css({'color':'Green'});
}
});
/*On click Event for Dropdown*/
$('#demolist li').on('click', function(){
var priority = $(this).text();
document.getElementById('idnum1').innerHTML = priority;
});
}
Server Script:
(function() {
var varpriority =2;
/* populate the 'data' object */
/* e.g., data.table = $sp.getValue('table'); */
var count = new GlideAggregate('incident');
- count.addQuery('active', 'true');
- count.addQuery('priority', '=', varpriority);
- count.addAggregate('COUNT');
- count.query();
var incidents = 0;
if (count.next()) {
data.incidents = count.getAggregate('COUNT');
}
})();
I know I might not have written Proper Coding. Please help if I need to change the way I have written to improve it. However, all I wanted is how to change the number in the card when I select a priority.
Thanks,
Jagadeesh.
