[RESOLVED] How to set up a print form button in UI designer

Q&A
1

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

Create a Custom Widget:

In Template delete everything and add

Print

In Controller delete everything and add

function($scope, $window){ 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!

3

Does not recognize printers in bonitasoft. In other applications there is no problem.

Message say:
“Please install a printer before selecting Print Preview.”

4

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!

5

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

6

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.

7

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.