Technical Articles
Printing Digital Form in SAPUI5/SAP FIORI
Hi guys, I was written a blog on Transforming your Paper forms into Digital forms in SAPUI5 and FIORI.
The following is the blog URL.
https://blogs.sap.com/2018/08/27/transform-your-paper-forms-into-digital-forms-using-sapui5/
The following is an example digital form which i developed in the above-mentioned blog.
and then the immediate questions come to me How do you use such a form in the daily business though (like making it available for vendors)? Do you provide a PDF export? Or does the user print it out from the browser?
well, The question was valid, right? yes, it is valid. If we don’t have PDF export or print option how it will use by vendors?
So In this blog, I want to explain how to give printing feature to Digital form in SAPUI5/SAP FIORI.
in your XML view just place a print button as follows.
<Button text="Print" press="onPrint" type="Accept"></Button>Here in our code onPrintis the function name which triggers when press event fired.
onPrint: function() {
}what else you are thinking whats the code for print?
window.print();The print() method opens the Print Dialog Box, which lets the user select preferred printing options.
Let’s see the result
The print is working but on the top, we are getting print and download buttons which are not required for customer right?
By using window.print(); we can print the contents of the current window.it means the entire page.
but sometimes we need only specific area only from the page to avoid like buttons in our case.
var hContent = '<html><head></head><body>';
var bodyContent = $(".printAreaBox").html();
var closeContent = "</body></html>";
var htmlpage = hContent + bodyContent + closeContent;
var win = window.open("", "PrintWindow");
win.document.write(htmlpage);
win.print();
win.stop();
By using the above code I can give a print to a specific area in my HTML.
$(“.printAreaBox”).html(); will give HTML of selected area. printAreaBox is the HTML selector(we can use either CSS class or DIV id here).
And we just constructing a simple HTML with a specific area of the HTML.
Creating a window object : var win = window.open(“”, “PrintWindow”);
Writing html into window object : win.document.write(htmlpage);
Now print and stop the window: win.print();
win.stop();
Lets see result
Oh my god now I am able to print what I need from my HTML but the bad thing is my HTML page did not come with CSS in print.so it looks ugly.
What we miss is when we construct HTML we are not including CSS.
Let’s include CSS while constructing HTML.
var print_Url = $.sap.getModulePath("com", "/css/");
var printCssUrl = print_Url + "style.css";
var hContent = '<html><head><link rel="stylesheet" href=' + printCssUrl +' type="text/css" /></head><body>';After adding style.css still, my print did not look good.
Here a bit challenging is when we develop a form using SAPUI5 we used default library CSS provided by the SAPUI5 framework.
And for print, we are constructing HTML and adding our custom style.css which does not have this default library CSS.
Now I came up with 4 different approaches to overcome this issue.
1)Add more CSS to style.css which makes look like form in the page and print both are same.
Write custom CSS in style.css and apply print media query for this CSS.
@media print {
//CSS which are apply in only print
}If we have written CSS in @media print it will apply in only print.
2)copy the default library CSS and paste into style.css
You can find default library CSS by inspecting our application in developer tools.
Copy this CSS and paste into Style.css
3)Define an HTML view and then copy past library CSS in HTML View and call this view as the subview in our main view.
Instead of placing default library CSS in our custom Style.css we can create HTML type View and place copied library.css in it. Now include this view in our actual view as SubView.
4)Dynamically we can get what are the CSS files are applying to our page and those CSS links can be added into our print HTML.
In all the above cases along with custom CSS, we are using library.css by copying and paste.
But in this case, by using the script we can get library.css dynamically and include it in print content.
I have posted a question in Stackoverflow on How to use SAPUI5 default CSS in print
and I got some good answer which is more useful.
$.each(document.styleSheets, function(index, oStyleSheet) {
if(oStyleSheet.href){
var link = document.createElement("link");
link.type = oStyleSheet.type;
link.rel = "stylesheet";
link.href = oStyleSheet.href;
//win.document.head.appendChild(link); --> this doesn't work in IE
win.document.getElementsByTagName("head")[0].innerHTML = win.document.getElementsByTagName("head")[0].innerHTML + link.outerHTML;
}
});Please add above code between “var win…” and “win.document.write…”.
Let see the result now
Wow, we got a good print.
Are we done?
No, we have one more issue.
window.print will work fine in the browser but not working in SAP Fiori Client it
Most of the SAPUI5 applications will use in Tablets and mobile with the help of SAP Fiori Client.
For this, we have Cordova plugin for print.
cordova.plugins.printer.print(htmlpage, {
duplex: 'long'
}, function(res) {
alert(res ? 'Done' : 'Canceled');
});
By using this line we can check Device is desktop or Tablet.
sap.ui.Device.system.desktop;
So based on this value we can write condition if the device is a desktop use window.print
If the device is Tablet use cordova.plugins.printer.print
Hop this blog is useful for printing forms.
Thanks & Regards,
Srinivas Gadilli
Hi Srinivas,
thank you for taking the time to answer my question on your original post!
As I excepted, the printing is actually pretty complex, especially because of the CSS and Fiori Client issues. I don't think it's a good idea to copy the whole standard CSS library into your application files, for compatibility and performance reasons. I guess the fourth solution is the best one...
Maybe it would be easier to implement the user inputs as SAPUI5 forms and generate the document in the backend as Smartforms oder Adobe Form?! What do you think?
BR, Klaus
yes, you are correct Klaus 4th option is the best one and also implementing from backend using smartforms and Adobe is a good idea. But you may face difficulty while developing signature and QR code in smart forms where the user will do signature in frontend. If you don't have these signature and QR code its always better to do it in the backend.
Hi Srinivas,
I am following your blog with print option, everything is working fine. The issue is, I have User Input Fields in my Form, when I enter the values in Input Fields and press print, it shows blank values, and the form prints perfectly but without User Input Values. What could be issue? Suggestion required to fix the issue?
Thanks in Advance,
Raghu
Hi Raghu,
Basically, when you binding values to form input fields, it will bind and show data in screen but it's not set to HTML DOM. While we are printing it's taking the content from DOM only.
while printing just takes the values from the form and set as below which sets a value in the DOM.
var value = sap.ui.getCore().byId("inputId").getValue();
sap.ui.getCore().byId("inputId").setAssociation("value", value );
It works for me.
Thanks,
G Srinivas
Hi Srinivas,
Thanks for the reply and solution as well. I will check this. Thank you once again.
Regards,
Raghuram
Hi @Srinivas Gadilli,
I tried this, everything works fine but the CSS property are not getting applied. I used the 4th way of applying CSS. Please can you help
Regards,
Anirup
Hello, if I need to select a printer instead of the default printer when printing, can it be achieved? Thanks a lot
Hi,
The user input values are not shown in the print. I tried with the below code:
var value = this.getView().byId("name").getValue();
sap.ui.getCore().byId("name").setAssociation("value", value );
its is giving me error "Cannot read properties of undefined (reading 'setAssociation')".
Can anybody please help.