[RESOLVED] How to set up a print form button in UI designer
I am working with Bonitasoft 7.1.3. Any ideas on how to set up a simple print button in a UI designer form (opens the ctrl+p print window in browser)? I tried to do it with a Javascript expression (put "window.print()" in a Javascript expression variable print and invoked the print Variable in a submit button's Data sent on click parameter). It didn't work. Any other ideas?
2 answers
Create a Custom Widget:
In Template delete everything and add
<button ng-click="ctrl.printOnClick()"
type="button"
>
Print
</button>
type="button"
>
</button>
In Controller delete everything and add
function($scope, $window){
this.printOnClick = function () {
window.print();
};
}
this.printOnClick = function () {
window.print();
};
}
hope that helps,
regards
Seán
PS: If this reply answers your question, please mark a resolved.
PPS: tested and it works!
Comments
Super easy solution, and works. But when it prints the page it puts every widget on a new line, any idea how to make it print as it looks in browser?
Thanks!
Nope, it's just a windows print...
If you want the Screen view then just click Print Screen and take a screen shot, then paste into the document you want to put the picture in and print that.
CNTRL->Print Screen will only do the active Window if you have many windows open.
regards
I did a quick test on the solution proposed by Seán and it work just fine: widgets are layout in the same way as displayed.
Are you able to share a form to reproduce the issue? Also which browser are you using? I did my test with Chrome.
Thanks Antoine,
I realized after posting that I had the preview page set to mobile. Once I changed the preview to desktop mode it did print in roughly the same layout as on the screen. I was also able to create a page break custom widget to better manipulate where the page breaks would occur on the form. For the custom widget, I just added the below lines to the template section.
<div style="page-break-after:always;">
</div>