Skip to content

Commit cb27990

Browse files
Pradeep567iafPradeep567iaf
authored
Cmdb ci lifecycle management UI page (#1530)
* Add files via upload This UI Page was developed to streamline the update process of the Install Status field for CMDB (Configuration Management Database) items in ServiceNow. Using Jelly XML scripting, the UI Page fetches details for a selected CI item, allows users to modify the Install Status, and save changes back to the CMDB record. Client script and Script include als used to fetch configuration item data and update it to table. * Delete UI Pages/CI lifecycle Management UI page directory * Create ci_lifecycle_ui_page.xml jelly page to user to fetch ci data and update configuration item status * Create client_srcript.js Client script file to glide Ajax the script include to query database table cmdb_ci to fetch ci records and update the ci record status * Create ci_script_include.js script include file to create a backend logic to fetch configuration item records and update the status retired , in maintenance, in stock and stolen * Rename client_srcript.js to ci_client_script.js update name
1 parent 7d4512f commit cb27990

File tree

3 files changed

+228
-0
lines changed

3 files changed

+228
-0
lines changed

‎UI Pages/CMDB CI Management UI page/ci_client_script.js‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
/* function to fetch the configuration item details like serial No, name , class , install status */
2+
function searchCI() {
3+
var ciNameorId = document.getElementById('ci_input').value;
4+
if (!ciNameorId) {
5+
alert('Please Enter the Configuration item Name or ID');
6+
} else {
7+
var ga = new GlideAjax('ci_lifecycle_management_script_include');
8+
ga.addParam('sysparm_name', 'get_ci_info');
9+
ga.addParam('sysparm_ci_name_or_id', ciNameorId);
10+
ga.getXMLAnswer(function(response) {
11+
var record = JSON.parse(response);
12+
document.getElementById("ci-info").style.display = "block";
13+
document.getElementById('ci_name').innerText = record.name;
14+
document.getElementById('serial_number').innerText = record.serial_number;
15+
document.getElementById('ci_class').innerText = record.ci_class;
16+
document.getElementById('ci_install_status').innerText = record.ci_install_status;
17+
var operations = ['Stolen', 'Retired','In Stock','In Maintenance'];
18+
operations.forEach((operation) => {
19+
var hidden_ele_id = operation.replace(/\s+/g, "");
20+
var elementId = "ci_"+hidden_ele_id;
21+
var ele = document.getElementById(elementId);
22+
if(operation == record.ci_install_status){
23+
ele.style.display = "none";
24+
}
25+
});
26+
});
27+
}
28+
}
29+
/* end of searchCI() */
30+
31+
/* function to update the status of Configuration item */
32+
function UpdateCI(status) {
33+
var ciNameorId = document.getElementById('ci_input').value;
34+
if (ciNameorId) {
35+
var updateci = new GlideAjax('ci_lifecycle_management_script_include');
36+
updateci.addParam('sysparm_name', 'update_ci_info');
37+
updateci.addParam('sysparm_ci_id_or_name', ciNameorId);
38+
updateci.addParam('sysparm_ci_status', status);
39+
updateci.getXMLAnswer(function(response) {
40+
var result = JSON.parse(response);
41+
if(result.updated == true){
42+
alert("Record Updated Successfully");
43+
}
44+
45+
});
46+
47+
48+
} else {
49+
alert('Facing issues to Update the CI');
50+
}
51+
52+
}
53+
/* function to update the status of Configuration item */

‎UI Pages/CMDB CI Management UI page/ci_lifecycle_ui_page.xml‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
<?xml version="1.0" encoding="utf-8" ?>
2+
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
3+
<!--basic style for html element-->
4+
<style>
5+
.ci-lifecycle-container {
6+
display: flex;
7+
justify-content: center;
8+
text-align: center;
9+
}
10+
.card {
11+
width: 400px;
12+
margin: 20px auto;
13+
border: 1px solid #ddd;
14+
border-radius: 8px;
15+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
16+
overflow: hidden;
17+
font-family: Arial, sans-serif;
18+
}
19+
.card-header {
20+
background-color: #007bff;
21+
color: #fff;
22+
padding: 16px;
23+
font-size: 18px;
24+
}
25+
.card-footer, .card-body {
26+
padding: 16px;
27+
}
28+
button {
29+
padding: 10px;
30+
font-size: 14px;
31+
color: #FFFFFF;
32+
background-color: #3cb371;
33+
border: none;
34+
cursor: pointer;
35+
margin: 5px;
36+
}
37+
#ci_input {
38+
padding: 5px;
39+
width: 100%;
40+
}
41+
#ci_search {
42+
margin-left: 1rem;
43+
padding: 15px;
44+
width: 30%;
45+
cursor: pointer;
46+
border-radius: 10px;
47+
background-color: yellow;
48+
}
49+
table {
50+
width: 100%;
51+
border-collapse: collapse;
52+
margin: 20px auto;
53+
font-size: 16px;
54+
border: 1px solid #ddd;
55+
}
56+
th, td {
57+
padding: 12px;
58+
text-align: left;
59+
}
60+
th {
61+
background-color: #f2f2f2;
62+
font-weight: bold;
63+
width: 30%;
64+
}
65+
.card-footer {
66+
background-color: #f9f9f9;
67+
border-top: 1px solid #ddd;
68+
display: flex;
69+
justify-content: center;
70+
}
71+
</style>
72+
<!-- end of styling -->
73+
<div class="ci-lifecycle-container"> <!-- container -->
74+
<div class="ci-lifecycle-header"> <!-- header -->
75+
<h1>CI Lifecycle Management</h1> <!-- header title -->
76+
<!-- search input box and search button -->
77+
<div style="display:flex;">
78+
<input type="text" name="ci_input" id="ci_input" placeholder="Enter CI Id ..." />
79+
<button id="ci_search" name="ci_search" onClick="searchCI()">Search CI</button>
80+
</div>
81+
<!-- end of search -->
82+
<!-- Display Configuration item details -->
83+
<div id="ci-info" style="display:none;">
84+
<div class="card" >
85+
<div class="card-header">
86+
Configuration Item
87+
</div>
88+
<div class="card-body" >
89+
<table>
90+
<tr>
91+
<th style="">Serial No</th>
92+
<td id="serial_number"></td>
93+
</tr>
94+
<tr>
95+
<th style="">Name</th>
96+
<td id="ci_name" ></td>
97+
</tr>
98+
<tr>
99+
<th>CI class</th>
100+
<td id='ci_class'></td>
101+
</tr>
102+
<tr>
103+
<th>Status</th>
104+
<td id="ci_install_status"></td>
105+
</tr>
106+
107+
</table>
108+
109+
110+
</div>
111+
<!-- end -->
112+
113+
<!-- button to change configuration item install status -->
114+
<div class="card-footer" style="">
115+
<!--stolen-->
116+
<button id="ci_Stolen" name="ci_Stolen" onClick="UpdateCI(8)">Stolen</button>
117+
<!--retired-->
118+
<button id="ci_Retired" name="ci_Retired" onClick="UpdateCI(7)">Retire CI
119+
</button>
120+
121+
<!--In stock-->
122+
<button id="ci_InStock" name="ci_InStock" onClick="UpdateCI(6)">In Stock
123+
</button>
124+
<!--In Maintainance-->
125+
<button class="ci_InMaintenance" id="ci_InMaintenance" onclick="UpdateCI(3)" >In maintainace</button>
126+
</div>
127+
<!-- end -->
128+
129+
</div>
130+
131+
</div>
132+
</div>
133+
</div>
134+
135+
136+
</j:jelly>

‎UI Pages/CMDB CI Management UI page/ci_script_include.js‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
var ci_lifecycle_management_script_include = Class.create(); // script include class name
2+
ci_lifecycle_management_script_include.prototype = Object.extendsObject(global.AbstractAjaxProcessor, {
3+
/* function to query the cmdb_ci table to update the status of configuration item */
4+
update_ci_info: function() {
5+
var ci_id = this.getParameter('sysparm_ci_id_or_name');
6+
var cistatus = this.getParameter('sysparm_ci_status');
7+
var gr = new GlideRecord('cmdb_ci');
8+
gr.addQuery('sys_id',ci_id);
9+
gr.query();
10+
if(gr.next()){
11+
gr.setValue('install_status', cistatus);
12+
gr.update();
13+
return JSON.stringify({
14+
"updated":true
15+
});
16+
}
17+
},
18+
/* end of update_ci_info function */
19+
20+
21+
/* function to query the cmdb_ci table to fetch configuration item details according to ci sys_id*/
22+
get_ci_info:function(){
23+
var ciNameOrId = this.getParameter('sysparm_ci_name_or_id');
24+
var gr = new GlideRecord('cmdb_ci');
25+
if(gr.get(ciNameOrId)){
26+
var record = {
27+
success:true,
28+
name: gr.getValue('name'),
29+
serial_number: gr.getValue('serial_number'),
30+
ci_class : gr.getValue('sys_class_name'),
31+
ci_install_status : gr.getDisplayValue('install_status')
32+
};
33+
return JSON.stringify(record);
34+
35+
}
36+
},
37+
/* end of get_ci_info() */
38+
type: 'ci_lifecycle_management_script_include'
39+
});

0 commit comments

Comments
 (0)