Print button to open standard print dialogue

Scriptcase 9 General
#1

Thinking someone else has already done this - so why recreate the wheel? I want the print button to open the print dialogue on the user’s computer - to print the current document displayed on screen - without printing the buttons, etc. that are shown on screen. The standard print button in SC opens a window asking what I want to print and then displays the text on its own page - leaving the user to have to figure out how to print that. New to all this so could use a little help. I watched a video that Carlos did the other day (Rental Management) and saw that he created a javascript button to “go back” - so thought I could do the same with print.

Option 1 - Using SC Button (this works - but also prints the buttons on the toolbar of the grid)
Create a Button - jsPrint - and put this code there:
window.print() ;

Option 2 - Using HTML template - works flawlessly and only prints the document - not the buttons - but the buttons are a part of the html document and not the grid; I would rather use the buttons in SC so that things are consistently styled the same.

<head>
<!-- PRINT FUNCTION -->
<script type=“text/javascript”>
function PrintDiv() {
var contents = document.getElementById(“dvContents”).innerHTML;
var frame1 = document.createElement(‘iframe’);
frame1.name = “frame1”;
frame1.style.position = “absolute”;
frame1.style.top = “-1000000px”;
document.body.appendChild(frame1);
var frameDoc = frame1.contentWindow ? frame1.contentWindow : frame1.contentDocument.document ? frame1.contentDocument.document : frame1.contentDocument;
frameDoc.document.open();
frameDoc.document.write(’<html><head><title>{title}</title>’);
frameDoc.document.write(’</head><body>’);
frameDoc.document.write(contents);
frameDoc.document.write(’</body></html>’);
frameDoc.document.close();
setTimeout(function () {
window.frames[“frame1”].focus();
window.frames[“frame1”].print();
document.body.removeChild(frame1);
}, 500);
return false;
}
</script>

</head>

<body>
<!-- PRINT BUTTON -->
<input type=“button” onclick=“PrintDiv();” value=“Print” />

#2

Going with Option 1, you can use CSS to hide the button when printing:


@media print {
  #change-this-to-button-id {
    display: none !important;
  }
}
#3

I guess I don’t know where to put that - can’t make it work.

#4

You can put in one of the events, maybe onApplicationInit. The full code would be like this:


echo "
<style>
@media print {
  #change-this-to-button-id {
    display: none !important;
  }
}
</style>
";
#5

That doesn’t work either. Tried several variations - in all of the events of the grid - doesn’t work.

#6

Did you change the part #change-this-to-button-id? What are you changing it to?

Another way would be using JavaScript to hide the button, call the window.print() function, and then show the button again (this could be placed in jsPrint button):


$("#change-this-to-button-id").hide();
window.print();
$("#change-this-to-button-id").show();
#7

<style>
@media print {
jsPrint {
display: none !important;
}
}
</style>;

#8

I must be doing something wrong - can’t make this work either:
$("#jsPrint").hide();
window.print();
$("#jsPrint").show();

#9

I think the ID of the button is not just “jsPrint”. SC usually creates the elements with some kind of “preffix”.

To find the real ID of an element you can use Google Chrome’s inspector, as shown in this video:
https://youtu.be/dqX0fFRSs4g

PS: you must add “#” before the ID, e.g., “#bt-id {” or $("#bt-id")

#10

Solved. Thank you very much for your help!

Step 1. Create a javascript button and put this code on it (not sure it matters; but I read somewhere that it is important for the button name to be lowercase)
window.print() ;

Step 2. Run the application and inspect the button (I am using Google Chrome). When you click the button you will see a block of code highlighted. Look for the “id” value; something like this: id- ‘sc_js print top’

Step 3. Put this code in OnApplicationInit
//2017-0127 Hide the js_print button from printing (note the open / close php tags)
?>
<style>
@media print {
#sc_js_print_top {
display: none !important;
}
}
</style>
<?php

#11

I’m glad I was able to help you :slight_smile: