Printly

A drop-in print button for OutSystems Reactive Web that produces clean, uncluttered printouts instead of the ugly, chrome-filled default. Prints the whole screen or a specific area, hides navigation and buttons on paper, and gives developers a simple no-print class to mark anything they want kept off the page.

1. Overview

window.print() alone is a trap — it prints everything on the page: your top bar, side menu, buttons, footer, form controls, the works. Users end up with cluttered paper or ugly PDFs.

Printly wraps window.print() with a print-friendly stylesheet that strips the usual Reactive Web chrome, a no-print class the developer can add to any widget they want kept off paper, and an option to print just a specific container instead of the whole page. Pure client-side, no dependencies.

Key features

• One button, one line of setup — click and it prints.
• Print-friendly CSS strips headers, menus, buttons, backgrounds, and shadows.
• no-print class hides any widget on paper (per-element control).
• Optional print-a-specific-area mode via TargetElementId.
• Adds URLs after links so paper versions stay useful.
• Restores the on-screen layout after the print dialog closes.
• No dependencies, no server calls.

2. Compatibility

3. Installation

1. Install Printly from the Forge (or the .oap via Service Center).
2. In Manage Dependencies, select the module and check the Printly block.
3. Apply and publish.

4. Quick start

Printly
   Label = "Print"

Drop it on a screen, click it, and the browser opens its print dialog with a cleaned-up version of the page. That's the whole default flow.

5. Reference — the Printly block

Two inputs — nothing else. Everything else is styling, controlled via CSS.

6. The no-print class

Add the class no-print to any widget you want hidden on paper:

• A container with editing controls at the top of the page → no-print.
• A row of action buttons → no-print.
• A sidebar with filters → no-print.

The Printly button itself already has no-print, so it never appears on the printout.

This is the primary way you tune what does and doesn't print.

7. Printing a specific area

Sometimes you don't want the whole page — you want just an invoice, a report, a receipt. Give that container an id and pass it as TargetElementId:

Container (Name: Invoice)
   [invoice content]

Printly
   Label           = "Print invoice"
   TargetElementId = Invoice.Id

When the button is clicked, everything on the page is temporarily hidden except that container, the print dialog opens with just it, and the on-screen layout is restored when the dialog closes. Neither the user nor other pages notice anything happened.

8. What the built-in print CSS does

When printing (whole page or targeted), Printly applies a stylesheet that:

• Hides common Reactive chrome: top bar, side menu, footer, breadcrumbs, buttons.
• Hides anything with the no-print class.
• Removes all backgrounds, shadows, and text shadows.
• Switches to a serif font at print sizes and forces black text on white.
• Appends the URL after external links so the printed page is still useful (Click here (https://…)).
• Prevents page breaks in the middle of headings and images.

If your app's theme uses non-standard class names for chrome and something slips through, either add no-print to that widget or override in your app theme:

@media print {
  .my-custom-nav { display: none !important; }
}

9. Setting the PDF filename

When the user picks "Save as PDF," most browsers use the page's document.title as the default filename. Set your screen or page title accordingly before showing the Printly button, and the printed PDF gets a sensible default name.

10. Troubleshooting / FAQ

Header/footer/menu still shows on the printout.Your theme probably uses non-standard class names for those regions. Either add no-print to the relevant widgets, or add a small @media print override in your app theme to hide them.

Nothing prints, or the page is blank.If you're using TargetElementId, make sure it references a real, rendered container. Test in the browser console: document.getElementById("YourId") should return an element, not null.

On-screen layout looks wrong after cancelling print.The block restores the layout on the browser's afterprint event, plus a 2-second safety timeout. If you see lingering wrong state, refresh the page — and tell us which browser, since afterprint behavior varies.

Very long targets print oddly across pages.For most printouts (an invoice, a report section) the isolation works cleanly. Extremely tall targets that span many pages can have quirky page-break behavior in some browsers — a known limitation of print CSS in general, not specific to Printly.

I want to trigger printing from another action, not a button.Use the Printly block's built-in trigger by placing the block and calling its click via your own action, or roll your own window.print() call. Future versions may expose a public Print action for direct invocation.

11. Best practices

• Add no-print to every widget the user shouldn't see on paper — buttons, filters, tabs, editing controls.
• For structured outputs (invoices, receipts, reports), wrap the content in a named container and use TargetElementId — it's a much cleaner result than the whole-page mode.
• Set a meaningful page title so "Save as PDF" produces a sensible default filename.
• Test the print preview (Ctrl/Cmd+P) after every layout change — chrome shifts as your theme evolves.
• Don't put critical actions behind print — some users cancel the dialog, and your app should handle that gracefully.

12. Version history

13. License

Published on the OutSystems Forge as open, reusable code. Free to use and adapt in your OutSystems projects.