in this video we'll show how you can use

the pdf viewer control to display

pdf files on a ux component

so previously to display a pdf file

uh on a ux component you had to display

a iframe and then set the iframe source

to the

pdf file but now you can display pdfs

directly using the pdf viewer control so

you can see here we have a list

control that is displaying the names of

a bunch of pdf files

and then as i tap on each row in the

list

we're displaying the pdf file in the

pdf viewer control so the pdf viewer

control

has it comes with a toolbar here so you

can see you can

open up the toolbar to navigate by page

you can close the toolbar down and you

can also open up this menu here

to display various options such as the

document properties or

to search within the pdf file

etc or to rotate the pdf file etc so

let's take a look now at how this was

built so first of all let's go back to

the project properties here we can see

that

inside this project we've placed a whole

bunch of pdf files

so these are files that are in the

web project folder so that they'll be

published to the web route

at the time this project

is published and then you can see we've

gone over to

our list control over here and we've got

a static

data source where we've got the names of

all of the pdf files

and then what we've done is we've gone

to

the toolbox here and we've selected the

pdf

viewer control from the available

controls this is in other controls

you'll see there

we've got the pdf viewer and we've

configured the pdf viewer to

basically have a height of 6 inches

and a width of 60 of 50 percent and we

could also have set

the initial pdf file to display uh

had we wanted to so now let's go take a

look at this list

and if we look at the list we can see

that the list has an event

in the on click event so the on click

event is going to basically

get the value of the pdf file

in the current row of the list so that's

going to be this dot selection data 0

dot pdf name and i can get that

uh information by just going to more

help over there

and then i basically call the pdf viewer

load

method and i specify the name of the

pdf file to load so that was that's all

that was necessary

in order to display the um

pdf file that i'm pointing to over here

in the

pdf viewer so now i can go here and go

to say uh 125 and then

look at this pdf in a little bit more

detail so the ability to display

pdfs directly on a ux using the

pdf viewer control is a

nice enhancement that is easier to use

than using

iframes to display pdf files thanks very

much for watching