Best way to print a record

[gunnery]

I have a table query which show up the main things I need lets use for example a,b,c

However I have a button which I want to be able to print the full record with the relevant information such as

information - a
information - b
information - c
information - d
information - e
information - f
etc etc

any suggestions ??

[TomD]

I don’t have much experience printing web pages but it’s something which will be increasing useful/needed - from my point of view at least. I did a little experimenting with it recently.

Within Wappler, you can choose which items should not be included when printing. Bootstrap has some useful defaults related to printing - eg background colours etc. are omitted.

I think this is a very useful article concerning css and printing.

In my testing, Chrome produces the most reliable results - eg for controlling page breaks (using useful css properties such as page-break-inside:avoid). When testing, the browser print facility with the preview option is very helpful.

My number one feature request for Wappler would probably be a printing to PDF facility.

[gunnery]

What I’m looking for is a way to automatically print the full record when clicking the button in the repeat table.
I done want it to go to another page.
@Teodor any suggestions ??

[Teodor]

Hey Peter,
Maybe show a modal with all the info and place the print button there?

[Dave]

@Teodor

Maybe show a modal with all the info and place the print button there?

We were using this we found on Stack Overflow.

Modal Footer:

<div class="modal-footer">
    <button type="button" class="btn btn-default" onclick="js:window.print()">print modal content</button>
</div>

CSS:

@media print {
    /* on modal open bootstrap adds class "modal-open" to body, so you can handle that case and hide body */
    body.modal-open {
        visibility: hidden;
    }

    body.modal-open .modal .modal-header,
    body.modal-open .modal .modal-body {
        visibility: visible; /* make visible modal body and header */
    }
}

[gunnery]

Cheers for that Dave, Found a way for me to do it.
I did not want the modal showing up I only wanted the print button.

So what I have done is created a select record button and set out the way I needed it printed and selected only that to print on page print. Hid that section with the information on all devices and hey presto, it works perfectly.
Click the select button, no window and the information prints Works like a charm.

[ebenezer_paul_Buckma]

@gunnery

Cheers for that Dave, Found a way for me to do it.
I did not want the modal showing up I only wanted the print button.

So what I have done is created a select record button and set out the way I needed it printed and selected only that to print on page print. Hid that section with the information on all devices and hey presto, it works perfectly.
Click the select button, no window and the information prints Works like a charm.

can someone help with the step by step instruction on how to do this on wappler?

[gunnery]

sorry for they delay in coming back to you. Have had a crazy few days.
Method is simple:
Create your query and add a print button in where ever your results are being displayed (mine is in a repeat region).
In Server select, create a select record using $_GET
Add server connect in App Structure for both the filter and the select (2 seperate ones) - With the select record click ‘No Auto Load’
Create your form in Wappler on the same page, design it in the way you want it to print and use dynamic data from the Select.
On the print button you need to add:
Dynamic Events - Load Select record (use what ever ID you need to from the search results) for mine it was an ID in a repeat record region.
Give this a try and make sure all your data is correct on the form, once it is working well you need to make sure everything apart form the form you want to print has a no print (in App Structure)

Once done in the Server Connect for the select record, click that and add Static Event for when it is DONE and add js:window.print()
Give this a try and make sure all your data is correct on the form, once it is working well you need to make sure everything apart form the form you want to print has a no print (in App Structure)

Once this is working - Hide the form on ALL devices.

Any issues let me know/

[ebenezer_paul_Buckma]

Thanks peter. Got it. Working fine

[gunnery]

Thats good news

[Teodor]

A print action has been added to the browser component. You can call it using the dynamic events.