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.
what else you are thinking whats the code for 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.
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.
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.
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.
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.
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
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>A press is an event for the button in SAPUI5 which fires when the user clicks or taps on the control.
Here in our code onPrintis the function name which triggers when press event fired.
Let us define a function with the name onPrint in our controller.js file
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
- SAP Managed Tags:
8 Comments
