Display embedded PDF file

Open PDF Example

Skill level: basic app development with MobiOne

This example shows how to include a pdf file in a MobiOne project and open it. The pdf file is rendered using the default pdf viewer installed on the device. The MobiOne project described below can be found as an attachment at the end of this article.

step-0: Create a simple UI
This is a simple example so the UI that I’m using has a simple button. See attachment overview.png

step-1: Include PDF file
Include the pdf file as an additional file of your project. In the outline click the top node to reveal the screen’s basic properties. Select the Additional Files property to open a file browser. Navigate to the pdf file you want included in the project and select it. When the MobiOne code generator runs it will copy all additional files into the root directory of the project. See attachment step1.png

step-2: Use Show URL action to open
Select the button in the UI. Set its On Click action to a “Go to URL”. In the URL file of the action enter the name of the pdf file. Because the pdf file is in the root directory of the project you can include a relative url to the file, i.e., do not prefix the path with the typical “http://” prefix.
Also be sure to set the “Open URL in” property to the type of display you are seeking.
See attachment step2.png

step-3: Test
You can run your project in the Simulator or on a device. The Simulator will provide a basic level of emulation of the Cordova InAppBrowser if you set the Go to URL action to use one of the native-only popup display options.

Screencast running the project in the Simulator

Discussion:
Use of the default pdf player limits customization of the pdf rendering experience. For example you can not set a default zoom level other settings.