PdfViewer

The PdfViewer widget allows you to show the PDF file from uploaded assets or the URL link.

Adding PdfViewer to Your Project

Here's how you can add the PdfViewer widget to your project:

1. Drag the PdfViewer widget from the Base Elements tab (in the Widget Panel) or add it directly from the widget tree.

2. Move to the Property Editor (on the right side of your screen) and scroll down to the PDF Viewer section.

3. Find the Network Path property and enter the URL for the pdf file.

Every PdfViewer widget added to the project shows a default PDf from an online source.

Changing the PDF Source

By default, the widget is set to show the PDF file from Network. However, you can change this to use the PDF file uploaded directly to your app.

Here's how you can change the PDF source:

1. Select the PdfViewer widget from the widget tree or from the canvas area.

2. Move to the Property Editor (on the right side of your screen) and scroll down to the PDF Viewer section.

3. Find the PDF Source dropdown. Change it to Asset.

4. Now, find the PDF Asset property, Click on the Upload Pdf button, select the pdf file and upload it.

If you want to use the same pdf file multiple times in your app, you don't need to upload the same pdf multiple times. You can use the uploaded pdf for other PdfViewer widgets as well.

Once you upload the pdf file, you can use it throughout your app. You can manage your uploaded pdfs with the Project Media/Asset Manager.

To use an uploaded pdf:

1. Select the PdfViewer widget from the widget tree or from the canvas area.

2. Move to the Property Editor (on the right side of your screen) and scroll down to the PDF Viewer section.

3. Find the PDF Source dropdown. Change it to Asset.

4. Click on No asset selected (inside the dropdown) and choose the pdf file.

Changing the Properties

The Properties Panel can be used to customize the appearance and behavior of your widget.

Add Padding

Here are the instructions on how to add padding.

Adjust the Alignment

Here are the instructions on adjusting the alignment.

Changing Display Size

You can change the displaying size of the PdfViewer using the height and width property.

To change the display size:

1. Select the PdfViewer widget from the widget tree or from the canvas area.

2. Move to the Property Editor (on the right side of your screen) and scroll down to the PDF Viewer section.

3. Find the Width and Height.

4. There are three ways to set the dimensions:

   • To set to an exact size, select PX and enter the desired values.

   • To set the dimensions as a % of the screen size, select % and enter the desired value.

   • To make the height or width of the PdfViewer the screen's height or width, just click on the infinity icon ().

Changing Scroll Direction

By default, the PdfViewer allows you to scroll to the next pages in the vertical direction. However, you can change this behavior to allow scrolling in the horizontal direction.

To change the scroll direction:

1. Select the PdfViewer widget from the widget tree or from the canvas area.

2. Move to the Property Editor (on the right side of your screen) and scroll down to the PDF Viewer section.

3. Find the Horizontal Scroll and checkmark it (click on it).

Show/Hide PdfViewer

Please find the instructions to show/hide the widget here