Adobe PDF Embed API – Component Documentation

Embed interactive PDFs into OutSystems Reactive Web and Mobile apps using the free client-side Adobe PDF Embed API. Supports rendering from both URLs (ViewPDFByLocation) and OutSystems Binary Data (ViewPDFBinary).

1. Setup & Configuration

Step 1: Get Your Free Adobe Client ID

Adobe PDF Embed API is free with unlimited usage, but requires a domain-registered Client ID:

1. Go to the Adobe PDF Embed API Credentials Portal (or the Adobe Developer Console) and sign in.
2. Create a new PDF Embed API credential and specify your OutSystems environment domain without https:// or paths (e.g., my-env.outsystemscloud.com or personal-xyz.outsystems.app).
   Note: Registering a parent domain like outsystemscloud.com or your custom root domain covers all subdomains. Otherwise, create one Client ID per environment (Dev, QA, Prod).
3. Copy the generated Client ID (API Key).

Step 2: Configure Site Properties in Service Center

In Service Center (Factory > Modules > AdobePDFEmbedAPI > Site Properties), configure:

• AdobeClientID (Text, Mandatory, Default: ""): Paste the Client ID from the Adobe Developer Console. (Throws ConfigurationException if left empty).
• AdobeScriptURL (Text, Optional, Default: https://acrobatservices.adobe.com/view-sdk/viewer.js): Official Adobe View SDK CDN URL. Only change this if your organization proxies, self-hosts, or pins a specific version of viewer.js.

CSP / Network Note: The component automatically injects and awaits AdobeScriptURL once per page. If your environment enforces Content Security Policy (CSP), allow https://acrobatservices.adobe.com and https://*.adobe.io in script-src, frame-src, and connect-src.

2. Public Web Blocks & Signatures

Both Web Blocks (UI Flows > PDFViewer) automatically re-render on the client when input parameters change (OnParametersChanged) and clean up listeners on unmount (OnDestroy).

• ViewPDFByLocation: Renders a PDF from a URL (LocationURL).
• ViewPDFBinary: Renders a PDF from OutSystems BinaryData (PDFBinary).

Input Parameters

• LocationURL (Text, Mandatory on ViewPDFByLocation): Direct URL to the PDF. External hosts must allow CORS (Access-Control-Allow-Origin) from your OutSystems domain.
• PDFBinary (Binary Data, Mandatory on ViewPDFBinary): Raw PDF binary (converted client-side into an ArrayBuffer). Ideal when CORS blocks URL access or files live in the database.
• FileName (Text, Mandatory): Display title and download filename (include .pdf, e.g., "Invoice.pdf").
• EmbedMode (EmbedMode Identifier, Mandatory, Default: Entities.EmbedMode.SizedContainer): Viewer layout mode (FullWindow, SizedContainer, InLine, Lightbox).
• LightboxTrigger (Text, Optional, Default: ""): Widget .Id (e.g., MyButton.Id) that opens the modal on click when EmbedMode = Entities.EmbedMode.Lightbox.
• DefaultViewMode (ViewMode Identifier, Optional, Default: Entities.ViewMode.FIT_WIDTH): Initial zoom/spread (FIT_WIDTH, FIT_PAGE, TWO_COLUMN, TWO_COLUMN_FIT_PAGE).
• DocumentId (Text, Optional, Default: FileName): Unique ID (metaData.id) used by Adobe to track and persist user annotations.
• ShowAnnotation (Boolean, Optional, Default: False): Enables sticky notes, highlights, and drawing tools (FullWindow mode only).
• EnableFormFilling (Boolean, Optional, Default: True): Enables interactive PDF AcroForm field entry (FullWindow mode only).
• ShowLeftPane (Boolean, Optional, Default: False): Shows the left sidebar (FullWindow & InLine only). Must be True for Thumbnails or Bookmarks to appear.
• ShowThumbnails (Boolean, Optional, Default: True): Shows page thumbnails in the left pane (requires ShowLeftPane = True).
• ShowBookmarks (Boolean, Optional, Default: True): Shows document outline/bookmarks in the left pane (requires ShowLeftPane = True).
• ShowPageControls (Boolean, Optional, Default: False): Shows the page navigation and zoom toolbar.
• DockPageControls (Boolean, Optional, Default: True): Docks the page control bar to the bottom (True) or floats it (False).
• ShowZoomControl (Boolean, Optional, Default: True): Shows + / - zoom buttons in the page controls.
• ShowFullScreen (Boolean, Optional, Default: True): Shows the full-screen toggle button (FullWindow & SizedContainer).
• ShowDownloadPDF (Boolean, Optional, Default: False): Shows the Download PDF button.
• ShowPrintPDF (Boolean, Optional, Default: False): Shows the Print PDF button.
• EnableLinearization (Boolean, Optional, Default: False, ViewPDFByLocation only): Streams linearized (Fast Web View) PDFs via HTTP 206 Partial Content byte-ranges so Page 1 renders immediately.

3. Operating Guide & Adobe Embed Modes

Adobe’s SDK behaves differently depending on the selected Entities.EmbedMode (Adobe Embed Modes Documentation):

• Entities.EmbedMode.FullWindow (FULL_WINDOW): Fills 100% of the parent container (min-height: 500px applied by default). The only mode that supports ShowAnnotation and EnableFormFilling. Also supports ShowLeftPane (Thumbnails / Bookmarks), DefaultViewMode, and all toolbar controls.
• Entities.EmbedMode.SizedContainer (SIZED_CONTAINER, Default): Compact viewer designed for cards or dashboard panels. Supports DefaultViewMode, ShowFullScreen, ShowPageControls, ShowZoomControl, Download, and Print. (Does not support Left Pane or Annotations).
• Entities.EmbedMode.InLine (IN_LINE): Renders all PDF pages vertically inline with your page scroll (no inner scrollbar). Supports ShowLeftPane, Download, and Print.
• Entities.EmbedMode.Lightbox (LIGHT_BOX): Opens the PDF in a full-screen modal overlay when the element passed to LightboxTrigger (e.g., BtnPreview.Id) is clicked—or immediately if LightboxTrigger is blank.

Initial Zoom & Page Layout (Entities.ViewMode)

Passed to DefaultViewMode (applies to FullWindow, SizedContainer, and Lightbox):

• Entities.ViewMode.FIT_WIDTH (Default) – Fits page horizontally to container width.
• Entities.ViewMode.FIT_PAGE – Fits entire page height and width inside the container.
• Entities.ViewMode.TWO_COLUMN – Side-by-side two-page spread fitted to width.
• Entities.ViewMode.TWO_COLUMN_FIT_PAGE – Side-by-side two-page spread fitted to page height.

4. Helpful Links & Adobe Documentation

• Get Adobe PDF Embed API Credentials
• Adobe PDF Embed API – Official Developer Guide & Embed Modes
• Adobe PDF Embed API – UI Customization & View Modes Reference
• Interactive Demo Sandbox (Adobe)