PDF Generation in OutSystems Reactive Apps: Complete Guide

The Ultimate PDF component (by OutSystems Labs) is available at forge.outsystems.com. It uses a headless Chromium browser running on the OutSystems server to render any URL as a PDF. In Service Studio: go to the Forge icon in the top toolbar → search 'Ultimate PDF' → click Install → follow installation wizard (installs to your environment). After installation, in your module: Module → Manage Dependencies (Ctrl+Q) → search 'UltimatePDF' → select it → check the GeneratePDF Server Action and any needed Structures → click Apply. In ODC, use the ODC Asset Library instead: ODC Portal → Assets → search 'Ultimate PDF' → install to your stage. Then reference it in ODC Studio via the same Manage Dependencies dialog.

Ultimate PDF renders a screen URL. Create a screen dedicated to PDF output — it should look like a printed page, not a web app. Interface tab → UI Flows → right-click → Add Screen. Name it 'InvoicePDFScreen'. Add an Input Parameter: InvoiceId (Invoice Identifier). Screen design guidelines for print: - Set container width to 800px (A4 landscape) or 600px (A4 portrait) - Remove all navigation elements (header, menu, footer) - Use static styles, not OutSystems UI themes (themes load external CSS which may not render in headless browser) - Ensure all images are inline (base64) or served from the same domain - Use print-safe fonts (Arial, Times New Roman) not Google Fonts (may fail in headless) Set the screen's Roles to Anonymous so the headless browser can access it without login.

Logic tab → Server Actions → right-click → Add Server Action. Name it 'GenerateInvoicePDF'. Add: - Input: InvoiceId (Invoice Identifier) - Output: PDFContent (Binary Data) Action flow: Start → Assign: ScreenURL = GetOwnerURLPath() + 'InvoicePDFScreen?InvoiceId=' + IntegerToText(InvoiceId) → GeneratePDF (drag from Logic tab → Referenced Actions → UltimatePDF) URL: ScreenURL WaitForSelector: '.invoice-ready' (CSS selector that appears when data is loaded) (other defaults are fine for basic use) → Assign: PDFContent = GeneratePDF.PDF → End The WaitForSelector parameter tells the headless browser to wait until a specific CSS class appears in the DOM before rendering — this ensures the data has loaded before capture. Add class 'invoice-ready' to the outermost container of InvoicePDFScreen.

1/* Assign node for URL building */
2ScreenURL = GetOwnerURLPath() + "InvoicePDFScreen?InvoiceId=" + IntegerToText(InvoiceId)
3
4/* GeneratePDF parameters */
5URL:             ScreenURL
6WaitForSelector: ".invoice-ready"
7Orientation:     Landscape  /* or Portrait */
8Format:          A4
9
10/* Output assignment */
11PDFContent = GeneratePDF.PDF

Create a button on the Invoice detail screen. Right-click → Add OnClick Client Action 'ButtonDownloadPDFOnClick'. Action flow: Start → GenerateInvoicePDF (Server Action): InvoiceId = CurrentInvoice.Invoice.Id → Download: FileContent: GenerateInvoicePDF.PDFContent FileName: 'Invoice_' + IntegerToText(CurrentInvoice.Invoice.InvoiceNumber) + '.pdf' MimeType: 'application/pdf' → End Note: GeneratePDF typically takes 2-8 seconds for the headless browser to render. Add a loading indicator (ButtonLoading pattern or a Spinner widget) to communicate progress. Show the spinner before the Server Action call and hide it after (in a Client Action, use a Local Variable IsLoading = True before the call, set False after).

1/* ButtonDownloadPDFOnClick */
2Start
3  --> Assign: IsLoading = True
4  --> GenerateInvoicePDF: InvoiceId = CurrentInvoice.Invoice.Id
5  --> Assign: IsLoading = False
6  --> Download:
7        FileContent: GenerateInvoicePDF.PDFContent
8        FileName:    "Invoice_" + IntegerToText(CurrentInvoice.Invoice.InvoiceNumber) + ".pdf"
9        MimeType:    "application/pdf"
10  --> End
11
12Exception Handler (AllExceptions)
13  --> Assign: IsLoading = False
14  --> Message: "PDF generation failed. Please try again." (Error)
15  --> End

In ODC, two additional challenges apply: 1. 5.5 MB file size limit: Ultimate PDF in ODC enforces a maximum output file size of 5.5 MB. Reduce image resolution, compress images, and avoid embedding large assets directly in the PDF screen. 2. Authentication for PDF screen: ODC apps use secure authentication. The PDF template screen must be either (a) set to Anonymous role — acceptable for non-sensitive documents, or (b) passed an authentication token in the URL. For sensitive documents, use option (b): In GenerateInvoicePDF Server Action, generate a short-lived token: - Create a PDFAccessToken entity with Token (Text), ExpiresAt (DateTime), InvoiceId - Create a token: CreatePDFAccessToken record with Token = GenerateToken(), ExpiresAt = AddMinutes(CurrDateTime(), 5) - Pass token in URL: ScreenURL = ... + '&Token=' + TokenValue - In InvoicePDFScreen, validate the token before displaying data This pattern keeps sensitive invoices secure while allowing the headless browser to access them.

1/* ODC token-based URL pattern */
2ScreenURL = GetOwnerURLPath()
3          + "InvoicePDFScreen"
4          + "?InvoiceId=" + IntegerToText(InvoiceId)
5          + "&Token=" + AccessToken
6
7/* InvoicePDFScreen OnInitialize */
8Start
9  --> ValidatePDFToken: Token = Token, InvoiceId = InvoiceId
10  --> If: not ValidatePDFToken.IsValid
11       [True] --> Exception: Raise SecurityException
12  --> (load invoice data)
13  --> End