Skip to main content


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.


PDF sourcespecify the source of the pdf to be displayed
Show tool barcontrols the visibility of the toolbar within the PDF component
Tooltipadd a tooltip or a descriptive text that appears when the user hovers over the pdf
Scale page todetermines the scaling behavior of the PDF pages within the component
Hiddendetermines the visibility of the PDF component


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.

PDF Sourcepdf source url


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

Property nameDescription
displayNameA string value that represents the name or title of the pdf.
heightthe vertical dimension or size of the PDF component
hiddenA boolean value that determines whether the pdf component is hidden from the user interface.
scaleModespecifies how the PDF document is scaled or fit within the available display area of the component
showToolBarwhether a toolbar or control panel is displayed along with the PDF component
tooltipTextstring value that represents the tooltip or hovers text to display when the user hovers over the pdf component.
urlsource of the PDF file to be displayed in the component
widththe 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