To continue with this content, please log in with your Data Access ID or create a new account.
Cancel Data Access ID
You may not be authorized to see this content. Please contact Data Access Europe for more information.
Cancel Data Access Europe

DataFlex Courses

Information

PdfViewer
Introduction (0m 36s)
How to integrate the PdfViewer (5m 40s)
Next lesson:
Cancel

Custom Control: PdfViewer

Lesson 1: How to integrate the PdfViewer

In this lesson we’ll look at how to integrate the PdfViewer in your application. To get the component, you can download it from the Data Access website. After downloading, we’re going to unpack the zip file and perform the standard actions to add a Custom Control library to our workspace.


Demonstration

  • In preparation of this video I’ve prepared a workspace that comes with the necessary files.
  • So we’ve got a 19.1 Workspace here with a WebApp project, as well as an Uploads folder that contains the PDF’s we’re going to display.
  • The README in the folder lists the steps to take to include the library in your workspace, so let’s follow those.
  • Step 1: Add the correct version of the cWebPdfViewer workspace as a library.
  • Go to tools and select Maitain Libraries.
  • Click Add Library.
  • Select the rigth workspace.
  • Click OK.
  • Second step in the README: Copy the contents of the cWebPdfViewer workspace's AppHtml Folder to your workspace's AppHtml Folder.
  • Let's do that!
  • The third step in the README: Update your Index.html.
  • Copy the lines from the README to your Index.html.
  • In this video course we're going to skip the fourth step of the README: have a look at the code in the demo workspace (Dashboard.vw) for in-code usage. 
  • Now that we’ve added the library to our workspace, let’s use the PdfViewer in our view.
  • The first thing I’m going to do is create a button, we’ll use this to load a PDF in a bit.
  • Drag & Drop the cWebButton from the Class Palette.
  • After that, we’ll add a use statement for our cWebPdfViewer package.
  • Next we’ll create a PdfViewer object below our button.
  • To make it display properly, we’ll set the piMinHeight to 500 and the pbFillHeight to true.
  • Next we’ll use our button we created earlier to load a PDF. 
  • To do this we simple call on LoadPdf of our pdfviewer and pass the path to our file, in this case that would be: "Uploads/Scheduler-information.pdf".
  • Note that I’ve already registered the DownloadFolder in the WebApp source, to allow the WebApp to actually access the files inside.
  • That’s everything, Let’s see what we’ve built!
  • So we’ll compile and run our project and navigate to our WebApp URL.
  • When we click the button, you’ll see the PDF load nicely into our viewer. We can zoom in or out, navigate back and forth, etc.


Conclusion

In this course we’ve taken a look at the PdfViewer, a custom control that allows you to display PDF's easily in your WebApps. We’ve looked at how to integrate it, as well as demonstrated its usage. You can download the PdfViewer on the Data Access Website.