Skip to content

Commit e2cf3cb

Browse files
pinkeshmarspinkeshmars
committed
Added PDF viewer widget
1 parent 49ad641 commit e2cf3cb

File tree

3 files changed

+166
-1
lines changed

3 files changed

+166
-1
lines changed

‎docs/ff-concepts/file-handling/media-widgets/_category_.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"label": "Media Widgets",
3+
"position": 0
4+
}

‎docs/ff-concepts/file-handling/media-widgets/pdf-viewer.md

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
---
2+
title: PdfViewer
3+
slug: /concepts/file-handling/pdf-viewer
4+
sidebar_position: 1
5+
tags: [Media, Widget]
6+
keywords: [Media, PdfViewer, Display PDF File]
7+
---
8+
# PdfViewer
9+
The PdfViewer widget allows you to show the PDF file from uploaded assets or the URL link.
10+
11+
## Adding PdfViewer Widget
12+
13+
Here's how you can add the PdfViewer widget to your project:
14+
15+
1. Drag the **PdfViewer** widget from the **Base Elements** tab (in the Widget Panel) or add it directly from the widget tree.
16+
2. Move to the Property Editor (on the right side of your screen) and scroll down to the **PDF Viewer** section.
17+
3. Find the **Network Path** property and enter the **URL** for the pdf file.
18+
19+
:::info
20+
Every PdfViewer widget added to the project shows a default PDf from an online source.
21+
:::
22+
23+
<div style={{
24+
position: 'relative',
25+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
26+
height: 0,
27+
width: '100%'}}>
28+
<iframe
29+
src="https://demo.arcade.software/zHqODKoDIJNa7XlaoPBo?embed&show_copy_link=true"
30+
title=""
31+
style={{
32+
position: 'absolute',
33+
top: 0,
34+
left: 0,
35+
width: '100%',
36+
height: '100%',
37+
colorScheme: 'light'
38+
}}
39+
frameborder="0"
40+
loading="lazy"
41+
webkitAllowFullScreen
42+
mozAllowFullScreen
43+
allowFullScreen
44+
allow="clipboard-write">
45+
</iframe>
46+
</div>
47+
<p></p>
48+
49+
## Changing PDF Source
50+
51+
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.
52+
53+
Here's how you can change the PDF source:
54+
55+
1. Select the **PdfViewer** widget from the widget tree or from the canvas area.
56+
2. Move to the Property Editor (on the right side of your screen) and scroll down to the **PDF Viewer** section.
57+
3. Find the **PDF Source** dropdown. Change it to **Asset**.
58+
4. Now, find the **PDF Asset** property, Click on the **Upload Pdf** button, select the pdf file and upload it.
59+
60+
<div style={{
61+
position: 'relative',
62+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
63+
height: 0,
64+
width: '100%'}}>
65+
<iframe
66+
src="https://demo.arcade.software/jcPtu9MVPreMM032Ydfm?embed&show_copy_link=true"
67+
title=""
68+
style={{
69+
position: 'absolute',
70+
top: 0,
71+
left: 0,
72+
width: '100%',
73+
height: '100%',
74+
colorScheme: 'light'
75+
}}
76+
frameborder="0"
77+
loading="lazy"
78+
webkitAllowFullScreen
79+
mozAllowFullScreen
80+
allowFullScreen
81+
allow="clipboard-write">
82+
</iframe>
83+
</div>
84+
<p></p>
85+
86+
:::tip
87+
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.
88+
:::
89+
90+
To use an uploaded pdf:
91+
92+
1. Select the **PdfViewer** widget from the widget tree or from the canvas area.
93+
2. Move to the Property Editor (on the right side of your screen) and scroll down to the **PDF Viewer** section.
94+
3. Find the **PDF Source** dropdown. Change it to **Asset**.
95+
4. Click on **No asset selected** (inside the dropdown) and choose the pdf file.
96+
97+
<div style={{
98+
position: 'relative',
99+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
100+
height: 0,
101+
width: '100%'}}>
102+
<iframe
103+
src="https://demo.arcade.software/gW1fpZP0QILlMJ7DE9pP?embed&show_copy_link=true"
104+
title=""
105+
style={{
106+
position: 'absolute',
107+
top: 0,
108+
left: 0,
109+
width: '100%',
110+
height: '100%',
111+
colorScheme: 'light'
112+
}}
113+
frameborder="0"
114+
loading="lazy"
115+
webkitAllowFullScreen
116+
mozAllowFullScreen
117+
allowFullScreen
118+
allow="clipboard-write">
119+
</iframe>
120+
</div>
121+
<p></p>
122+
123+
## Customizing
124+
125+
You can customize the appearance and behavior of this widget using the various properties available under the properties panel.
126+
127+
### Changing Scroll Direction
128+
129+
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.
130+
131+
To change the scroll direction:
132+
133+
1. Select the **PdfViewer** widget from the widget tree or from the canvas area.
134+
2. Move to the Property Editor (on the right side of your screen) and scroll down to the **PDF Viewer** section.
135+
3. Enable the **Horizontal Scroll**.
136+
137+
<div style={{
138+
position: 'relative',
139+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
140+
height: 0,
141+
width: '100%'}}>
142+
<iframe
143+
src="https://demo.arcade.software/vS9KPa9hRcBKL6UAnZGd?embed&show_copy_link=true"
144+
title=""
145+
style={{
146+
position: 'absolute',
147+
top: 0,
148+
left: 0,
149+
width: '100%',
150+
height: '100%',
151+
colorScheme: 'light'
152+
}}
153+
frameborder="0"
154+
loading="lazy"
155+
webkitAllowFullScreen
156+
mozAllowFullScreen
157+
allowFullScreen
158+
allow="clipboard-write">
159+
</iframe>
160+
</div>
161+
<p></p>

‎firebase.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -570,7 +570,7 @@
570570
},
571571
{
572572
"source": "/widgets-and-components/widgets/base-elements/pdfviewer",
573-
"destination": "/",
573+
"destination": "/concepts/file-handling/pdf-viewer",
574574
"type": 301
575575
},
576576
{

0 commit comments

Comments
 (0)