This is the ui page which i have created , when we are clicking on search we are getting some data populated,
In the same way if we click on print the whole html page with data should save in one of ServiceNow table and page should download in PDF format.
can any suggest me to achieve the same.
Below is the script that we have used:
HTML code:
<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<style>
label {
display: inline-block;
width: 250px;
}
h1 {text-align: center;}
h2 {text-align: center;}
p,b { line-height: 120%; text-align: left; margin-left:15px; background: transparent }
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
}
tr:nth-child(even){background-color: #f2f2f2}
th {
background-color: #4CAF50;
color: white;
}
body {
margin-left:50px;
}
page {
background: white;
display: block;
margin: 0 auto;
margin-bottom: 0.5cm;
box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
page[size="A4"] {
width: 21cm;
height: 29.7cm;
}
page[size="A4"][layout="portrait"] {
width: 30cm;
height: 21cm;
}
@media print {
page {
margin: 0;
box-shadow: 0;
}
}
</style>
<!--<input type="text" id="citytext" size="4"></input>-->
<table>
<div>
<b> Account: </b>
<g:ui_reference id="account" name="account" table="customer_account"/>
<button onclick="showUsers()">Search</button>
<button onclick="print()">Print</button>
</div>
</table>
<br/>
<div id="panel" style="display:none">
<page size="A4">
<body >
<br/>
<h1><b>ServiceNow</b></h1>
<h2><b>The definition of ITSM</b></h2>
<h2 style="font-size:18px"><b>ServiceNow ITSM </b></h2>
<br/>
<b>ServiceNow Agreement and Affiliate Agreement:</b>
<br/>
<p>ServiceNow is a cloud-based company that provides software as a service (SaaS) for technical management support</p>
<p> ServiceNow is a cloud-based workflow automation platform that enables enterprise organizations to improve operational efficiencies by streamlining and automating routine work tasks.</p>
<p><b>1.Servicenow acknowledgment, confirmation and declaration</b></p>
<p> By its signature below, Customer hereby acknowledges, confirms and declares that:</p>
<p>1.IT Service Management (ITSM for short) focuses on customer needs and IT services for customers rather than on IT systems. ITSM stresses continual improvement.</p>
<p>2.The main idea behind ITSM is the delivery of IT as a service. This goes beyond traditional IT support. Instead, ITSM is more inclusive. It describes the processes and tools IT teams use to manage IT services, end to end, and covers all information technologies within an organization. </p>
<p>3. ITSM aligns an IT team's goals with the broader objectives of the business, and that their actions support the overall mission.</p>
<h2>2. ServiceNow Delivered Devices and Accessory Summary </h2>
<div id="dvTable">
</div>
<br/>
</body>
</page>
</div>
<p id="no_users" style="color:blue;display:none">No users matching query</p>
</j:jelly>
Client Script:
function showUsers() {
document.getElementById("panel").style.display = "block";
var city = gel('account').value;
var tableHeaders = ['User', 'country code', 'Email', 'Manager', 'company'];
var queryString = 'streetIN1201 S 2ND ST,12';
var gr = new GlideRecord("customer_account");
if (city != '') {
gr.addQuery('sys_id', city);
gr.encodedQuery = queryString;
gr.query();
if (gr.rows.length > 0) {
var table = document.createElement("TABLE");
table.border = "2";
table.padding = "10px";
table.id = "myTable";
var columnCount = tableHeaders.length;
var row = table.insertRow(-1);
for (var i = 0; i < columnCount; i++) {
var headerCell = document.createElement("TH");
headerCell.innerHTML = tableHeaders[i];
row.appendChild(headerCell);
}
while (gr.next()) {
row = table.insertRow(-1);
var country = row.insertCell(0);
var email = row.insertCell(1);
var manager = row.insertCell(2);
var company = row.insertCell(3);
var user = row.insertCell(0);
if (gr.name != '') {
user.innerHTML = gr.name;
} else {
user.innerHTML = '';
}
if (gr.number) {
// var rec = new GlideRecord('sys_user');
// rec.get(gr.manager);
manager.innerHTML = gr.number;
}
if (gr.phone) {
// var rec1 = new GlideRecord('core_company');
// rec1.get(gr.company);
company.innerHTML = gr.phone;
}
if (gr.city)
email.innerHTML = gr.city;
if (gr.country)
country.innerHTML = gr.country;
var dvTable = document.getElementById("dvTable");
dvTable.innerHTML = "";
dvTable.appendChild(table);
}
document.getElementById('no_users').style.display = 'none';
} else {
document.getElementById('no_users').style.display = '';
var Table = document.getElementById("dvTable");
Table.innerHTML = "";
}
} else {
var Table = document.getElementById("dvTable");
Table.innerHTML = "";
}
}
function printpage() {
//Get the print button and put it into a variable
var printButton = document.getElementById("printpagebutton");
var postButton = document.getElementById("postnews");
var reenterButton = document.getElementById("reenterthenews");
//Set the button visibility to 'hidden'
printButton.style.visibility = 'hidden';
postButton.style.visibility = 'hidden';
reenterButton.style.visibility = 'hidden';
//Print the page content
window.print()
//Restore button visibility
printButton.style.visibility = 'visible';
postButton.style.visibility = 'visible';
reenterButton.style.visibility = 'visible';
}
Thanks in Advance,
Hi Kasi,
Actually we are not using that function.
if i am clicking on print , automatically it should download , but it is showing in this format.
it should download pdf format automatically
can you please me to achieve this
thanks in advance
