PDF Viewer Control

Description

Displays a PDF.

Discussion

The PDFViewer control displays a PDF in a web or mobile application. The PDF Viewer can be used instead of an iFrame to display PDFs. The control allows you to navigate from page to page in a multi-page PDF document.

PDF Viewer Control in Live Preview displaying a PDF
PDF Viewer Control in Live Preview displaying a PDF

The PDF Viewer includes a toolbar above the area where the PDF is displayed. Using the icons and controls in the toolbar, you can navigate pages, change the page zoom, download the document, or view info about the PDF presented as a JSON object. The toolbar options shown are customized in the PDF Viewer's properties (described below).

PDF Viewer toolbar
PDF Viewer toolbar

To add a PDF Viewer control, select [PDFViewer Control] from the Other Controls section. Your app can include as many PDFViewer controls as needed in your app.

images/pdfViewerControl.png

Configuring the PDF Viewer 

The PDF Viewer's size, default PDF, and container style is configured in the PDFViewer Properties.

images/pdfViewerControlProperties.png
Property
Description
Control ID

The ID of the PDF Viewer Control.

Width

Defaults to 8in. The width of the PDF Viewer. The Width is defined using CSS units (in, cm, pt, px).

Height

Defaults to 6in The height of the PDF Viewer. The Height is defined using CSS units (in, cm, pt, px).

PDF name

Optional. The PDF file to display. The PDF name is a URL, either to a remote file or a PDF published to the webroot on Application Server. PDFs in the local webroot are referenced using a relative URL.

If displaying a PDF from the webroot in an application with the security framework enabled, you must make sure to configure security permissions for the PDF to allow access. Otherwise, Alpha Anywhere will deny access to the PDF file.

Use the {dialog.object}.pdfViewerLoad() method to dynamically set the PDF at runtime.

Container class name

One or more optional classes to apply to the container that contains the PDF Viewer.

Container in-line style

One or more CSS style attributes applied to the container that contains the PDF Viewer.

Break

Defines if a column break should be added after the control. Options are After and None.

Break
Description
After

A column break will be added after the PDF Viewer control. The vertical height of the break is defined by Break height.

None

No break will be added.

Break height

The size of the break. Break value is a vertical distance between the control and the next control. This property is only available when Break is set to After.

Background color

The background color shown behind the PDF. Color is specified as a CSS color value. Click the smart field button for the Background color property to open the Color Picker.

Has file download button

If checked, the file download icon is shown in the PDF Viewer's toolbar.

Has PDF Info button

If checked, the PDF info icon is shown in the PDF Viewer's toolbar.

Fill Panel Card

If checked, the PDF Viewer will fill the Panel Card that contains it.

Initial resolution

The initial page resolution. Defaults to Fit to page. The resolution can be Fit to page or a numeric value representing the zoom scale (in percent.) E.g. if Initial resolution is set to 100, the PDF will be displayed at 100%.

Control bar hide

If checked, hides the toolbar that contains the PDF page navigation buttons, page scale, etc.

Viewing PDFs Stored in Amazon S3 

The PDF Viewer can be used to view PDF files stored in Amazon S3. In order to view the files, however, you allow the 'GET' method in your bucket CORS policy. For example:

[
    {
        "AllowedHeaders": [
            "Content-Type",
            "x-amx-acl",
            "origin"
        ],
        "AllowedMethods": [
            "PUT",
            "GET"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3000
    }
]

The 'GET' method is used to request a resource (i.e. read), such as a PDF file, from Amazon S3. To learn more about setting up Amazon S3 for use with Alpha Anywhere, see How to Configure an Amazon S3 Bucket.

PDF Viewer Methods 

The following methods can be used with the PDF Viewer control:

Method
Description
{dialog.object}.pdfViewerLoad()

Loads a PDF to display in the PDF Viewer.

{dialog.object}.setControlDisplay()

Shows or hides the PDF Viewer.

{dialog.object}.getPointer()

Gets a pointer to the container that contains the PDF Viewer control.

{dialog.object}.getControl()

Gets the object for the PDF Viewer control.

Videos 

How to Display PDF Files using the PDFViewer Control

In this video, we show how to display a PDF file in a UX component using the PDFViewer control.

2020-09-14

See Also