need help to print the pop up UI page

[harika19]

I Have  created an ui action button on incident table, which  pop up a ui page after clicking that , and  that ui page contains a print button  after clicking it it has to print only the UI page BUT NOT the whole page (which contains incident from in the background and ui pop up page)

can any one help  me with this how to mention the code to print only the information in ui page

below is my HTML code in ui page:

<?xml version="1.0" encoding="utf-8" ?>

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<p>Hello</p>
<br></br>
<form>
<input type="text" name="fname" placeholder=" xxxxxxx" />
</form>

<input type="button" value="Print this page" onClick="window.print()"/>

<script type="text/javascript">
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
w=window.open();
w.document.write(printContents);
w.print();
w.close();
}
</script>

</j:jelly>

[Matthew Glenn]

This Stack Overflow article may help you out. I've tested it with a standalone UI Page, but not one being called as a popup or in a dialog window

Essentially, you need to identify what it is you want to print with an id tag, then add in some CSS that, when called, hides everything else.

Give this a try and report back, please. I'm curious if this works with popups.

[harika19]

Hi Thank you for the quick response, please check below Alok's reply, it has worked for me 

[Alok Kumar2]

Hello,

You can give it a try by doing the below changes to your 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">
<div id="printableArea">
	<p>Hello</p>
<br></br>
<form >
<input type="text" name="fname" placeholder=" xxxxxxx" />
</form>
<input type="button" value="Print this page" onClick="printDiv('printableArea')"/>
	</div>

</j:jelly>

Then in the client script add the below code.

function printDiv(divName) {
	var printContents = document.getElementById(divName).innerHTML;
	var originalContents = document.body.innerHTML;
	document.body.innerHTML = printContents;
	window.print();
	document.body.innerHTML = originalContents;
}

Let me know if this works.

Note: Please mark it correct or helpful it works!!

[harika19]

thanks for the quick reply, it has worked for me