how to print variable set multirow value in ui page servicenow
Options
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
07-25-2023 08:38 PM
hello everyone, how can I print multirow data on the ui page, so that when pressing the Print BAST button, multirow data appears on the servicenow ui page.
which I have successfully configured are
1. create a ui action / button with the name print bast
2. when the print bast button is clicked, it displays the ritm variables data but not the multirow variable set data.
3. the name of the multirow variable set is data_asset
<?xml version="1.0" encoding="UTF-8"?>
<j:jelly xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null" trim="false">
<!--
In this 'evaluate' tag we use JavaScript to query the change_request table for current sys_id.
-->
<div style="height: 20px" class="print_hide text-align-right">
<button type="submit" onclick="javascript:window.print();">
<img src="images/printer.gifx"></img>
<span>Click to Print</span>
</button>
</div>
<style type="text/css">
table, td {
border-color:#000;
border-style:solid;
}
table {
border-collapse:collapse;
border-spacing:0;
border-width:0 0 1px 1px;
margin-top:14px;
}
td {
border-width:1px 1px 0 0;
margin:0;
padding:4px;
vertical-align:Bottom;
}
th {
border:1px solid black ;
padding:4px;
}
table.borderless, table.borderless td {
border:0px;
border-style:none;
}
table.borderAroundMe {
border:1px;
border-style:solid;
}
td.header {
background-color:#8DB4E2;
font-weight:bold;
}
.center {
text-align:center;
}
@media print {
html, body {
margin:0;
padding:0;
}
br.page-break {
display:block;
page-break-before:always;
}
table {
page-break-after:auto;
}
tr {
page-break-inside:avoid;
page-break-after:auto
}
td {
page-break-inside:avoid;
page-break-after:auto
}
thead {
display:table-header-group
}
thead tr{
background: sandybrown;
}
tfoot {
display:table-footer-group
}
img {
display:block;
}
div.printPage {
position:relative;
page-break-inside:avoid;
page-break-after:auto;
height:100%;
width:100%;
}
table.footer {
position:absolute;
bottom:0;
}
}
@page{
margin:80px auto;
}
</style>
<g:evaluate var="jvar_gr" object="true">
<!--query untuk item Permintaan perangkat TI -->
var numbers=1;
var req = new GlideRecord('sc_req_item');
req.get('${sysparm_id}');
req.addQuery('cat_item', '=', '8b4e5beedb5080d0a4fd12371b9619be');
req.query();
var data = JSON.parse(${jvar_gr.getValue('params')})
</g:evaluate>
<div>
<table class="borderless" width="100%">
<tr>
<td><img src="btpn-syariah.png" height="80px" class="chart"></img></td>
<td align="middle" style="vertical-align: middle;"><h3 style="margin:auto; ">
<b>BAST
${HTML:req.cat_item.getDisplayValue()}
</b></h3></td>
<td style="vertical-align: middle;">
<div style="float:right;">
<table style="border-style:inset; border-width:medium;">
<tr>
<td>
<font size="4">
<b>RITM #: ${HTML:req.number}</b>
</font>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<table class='borderless' style="border-style:solid; border-width:1px;" width="100%" align="center" cellspacing="0" cellpadding="0">
<tr>
<td width="10%">
<b>Nama:</b>
</td>
<td width="40%">
<b>${HTML:req.request.requested_for.first_name.getDisplayValue()}
${HTML:req.request.requested_for.last_name.getDisplayValue()}</b>
</td>
<td width="10%">
<b>Jabatan:</b>
</td>
<td width="40%">
<b>${HTML:req.variables.jabatan}</b>
</td>
</tr>
<tr>
<td width="10%">
<b>NIK:</b>
</td>
<td width="40%">${HTML: req.variables.nik}</td>
<td width="10%">
<b>Tanggal Request:</b>
</td>
<!--<td width="40%">${HTML: req.sys_created_on.toString().substring(0,10)}</td>-->
<td width="40%">${HTML: req.sys_created_on.getDisplayValue()}</td>
</tr>
<tr>
<td width="10%">
<b>Departement:</b>
</td>
<td width="40%">${HTML:req.request.requested_for.department.name}</td>
<td width="10%">
<b>Request:</b>
</td>
<td width="40%">${HTML:req.request.number}</td>
</tr>
</table>
<br />
<b>Item</b>
<table style="border:1px solid black !important;border-collapse:collapse !important;" width="100%" align="center" cellspacing="0" cellpadding="0">
<thead>
<!-- <j:if test="${gr4_1.next()}"> -->
<tr style="background: sandybrown;">
<th>No</th>
<th>Service MOnitor</th>
<th>Display Name</th>
<th>Serial Number</th>
<th>IMEI</th>
<th>Asset Critical</th>
<th>Nomer PO</th>
</tr>
<!-- </j:if> -->
</thead>
<tbody>
<j:while test="${jvar_gr.next()}">
<tr>
<td align="center">${(numbers++).toString()} </td>
<td>${data}</td>
<td>${req.display_name.getDisplayValue()}</td>
<td>${req.serial_number.getDisplayValue()}</td>
<td>${req.u_imei1.getDisplayValue()}</td>
<td>${req.u_asset_critical.getDisplayValue()}</td>
<td>${req.po_number.getDisplayValue()}</td>
</tr>
</j:while>
</tbody>
</table>
<br />
<table class="borderless" width="100%" align="center" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" align="left">
<b>Deskripsi:</b>
</td>
</tr>
<tr border="solid 1px">
<td width="100%" align="left">
<b>${HTML:gr4.description}</b>
</td>
</tr>
</table>
<br />
<table class="borderless footer" width="100%" align="center" cellspacing="0" cellpadding="0">
<tr>
<td width="50%" align="left">Requestor <br/><br/></td>
<td width="50%" align="right">IT Asset <br/><br/></td>
</tr>
<tr>
<td width="50%" align="left"></td>
<td width="50%" align="right"></td>
</tr>
<j:while test="${ticket.next()}">
<tr>
<td width="50%" align="left"> ${HTML:ticketing} <br/>${HTML: ticket.closed_at.getDisplayValue()}</td>
</tr>
</j:while>
<tr>
<td width="50%" align="left">___________________________________</td>
<td width="50%" align="right">___________________________________</td>
</tr>
</table>
</div>
</j:jelly>
please help and direction because I am still confused about the logic of the multirow itself 😁
1 REPLY 1
Options
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
07-26-2023 03:36 AM
Hi @Topan Kamil ,
Here's the modified script to achieve this:
<!-- Add this script to your UI Page -->
<?xml version="1.0" encoding="UTF-8"?>
<j:jelly xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null" trim="false">
<!-- Your existing code... -->
<b>Item</b>
<table style="border:1px solid black !important;border-collapse:collapse !important;" width="100%" align="center" cellspacing="0" cellpadding="0">
<thead>
<!-- Add a header row -->
<tr style="background: sandybrown;">
<th>No</th>
<th>Service Monitor</th>
<th>Display Name</th>
<th>Serial Number</th>
<th>IMEI</th>
<th>Asset Critical</th>
<th>Nomer PO</th>
</tr>
</thead>
<tbody>
<!-- Loop through each row of the 'data_asset' variable set -->
<g:evaluate var="variableSetGr" object="false">
var variableSetName = 'data_asset';
var variableSetSysId = 'YOUR_VARIABLE_SET_SYS_ID'; // Replace with the actual sys_id of the 'data_asset' variable set
var variableSetGr = new GlideRecord('item_option_new');
var variableSetQuery = 'name=' + variableSetName + '^request_item=' + variableSetSysId;
variableSetGr.addEncodedQuery(variableSetQuery);
variableSetGr.query();
</g:evaluate>
<j:while test="${variableSetGr.next()}">
<g:evaluate var="variableValues" object="true">
var variableValues = JSON.parse(${variableSetGr.getValue('value')});
</g:evaluate>
<!-- Generate table rows for each row of the 'data_asset' variable set -->
<tr>
<td align="center">${(numbers++).toString()} </td>
<td>${variableValues.service_monitor}</td>
<td>${variableValues.display_name}</td>
<td>${variableValues.serial_number}</td>
<td>${variableValues.imei}</td>
<td>${variableValues.asset_critical}</td>
<td>${variableValues.po_number}</td>
</tr>
</j:while>
</tbody>
</table>
<!-- Your existing code... -->
</j:jelly>
Replace 'YOUR_VARIABLE_SET_SYS_ID' in the script with the actual sys_id of the "data_asset" variable set that corresponds to the RITM record.
This modified script will loop through each row of the "data_asset" variable set and generate HTML table rows dynamically to display the multi-row data on the ServiceNow UI page.
Thanks,
Ratnakar
