PDF

What is PDF?

The PDF component is a feature or element that allows users to view and interact with PDF documents within the application. It provides functionality for rendering, navigating, and manipulating PDF files, enabling users to access and work with PDF content seamlessly.

Properties

Properties	Description
PDF source	specify the source of the pdf to be displayed
Show tool bar	controls the visibility of the toolbar within the PDF component
Tooltip	add a tooltip or a descriptive text that appears when the user hovers over the pdf
Scale page to	determines the scaling behavior of the PDF pages within the component
Hidden	determines the visibility of the PDF component

Method

You can use other components to control the component. We support the following methods:

• setFileUrl

dynamically change the source or URL of the pdf file.

Properties	Description
PDF Source	pdf source url

Data

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property name	Description
displayName	A string value that represents the name or title of the pdf.
height	the vertical dimension or size of the PDF component
hidden	A boolean value that determines whether the pdf component is hidden from the user interface.
scaleMode	specifies how the PDF document is scaled or fit within the available display area of the component
showToolBar	whether a toolbar or control panel is displayed along with the PDF component
tooltipText	string value that represents the tooltip or hovers text to display when the user hovers over the pdf component.
url	source of the PDF file to be displayed in the component
width	the horizontal dimension or size of the PDF component

Example: {{pdf1.displayName}}

Use case

Next, we will demonstrate how to control the pdf display with a button.

Step 1 Add Components

Add a PDF component and a button component to the canvas.

Step 2 Configure the component

For the button component, we can configure it to set the image source of the PDF component to a pdf address.

1. Click the **button** component to open its inspect page. Under Event handler, click **+ New**.
2. In the Edit event handler, select Control component in action, and select the PDF component that you want to change as the target of the event.
3. Choose the setFileUrl action
4. Put the new image address in the Value field

Step 3 Test

Now that when you click the "Play" button, the image should switch