PDF Viewer

PDF Viewer

Asset Version: 2.0.1
  • Version 2.0.1
  • Version 2.0.0
  • Version 1.0.0
Last Published: Jun 4, 2018 By: Kony Team
749 2 9 109
Plug and play component to display PDF files- it can render files available locally in user's device as well as from a web URL.

Requirements

  • Visualizer Enterprise
 

Devices

 

Platforms


  • Version 2.0.0 can render PDF file stored locally in user's device also, in addition to from web URLs. Version 1.0.0 could render PDF files from web URL only.
  • Configure web URL/ local file path etc. properties directly from Visualizer's property panel or use the API

Rajesh Parmar Getting error when trying to import component

Hi, i am getting below error when trying to import this component/ Importing component failled:Invalid import dir: There is no .metadata file. Thanks Rajesh

SaiPavan Kumar

Hi Rajesh, Which version of Visualizer are you using? The component only works for Visualizer 8.0 and above. You can find the same in the documentation as well. Thanks,Pavan

SRINAG BODA Online PDF Viewer vs Browser widget

How effective is Online PDF Viewer compared to Browser widget? Aren't these the same? Thanks

Hugo Leite NSURL not initialise

Hi, I'm getting an error in IOS when using this component, "NSURL init] called; this results in an NSURL instance with an empty URL string. Please use one of the documented NSURL initialisation methods instead (initWithString:, initFileURLWithPath:, etc.)." Works on App preview but not in Xcode. Someone has an idea why? Thanks, HugoL

sai kumar

Hi Hugo, I have retested the component, I am unable to reproduce your issue. Can you please provide me your visualizer plugin details, device screenshot with error message, the device logs while the application is running and sample code where you are invoking this component (setting the Url property) . Thanks, Sai

NagaBhavani Karri File not found exception in android

Hi am getting file not found exception while trying to view file from local path. I have used below code this.view.pdfviewer.pdfType = "Local File Path"; this.view.pdfviewer.setAndroidPath = "/storage/emulated/0/sample.pdf"; Also in Iphone we are unable build application, we are getiing below error I_OBJC_PROTOCOL_$_NSITEM ProviderWritingInstanceExports_" referenceded from Could you please help us.

sai kumar

Hi, you will get this exception when you are trying to access a file which is not present at that location.You can refer to this for more information https://developer.android.com/reference/java/io/FileNotFoundException.html . Thanks, Sai Kumar

NagaBhavani Karri

Hi, We have placed sample.pdf in the path mentioned above and accessing, still it is throwing file not found exception.

sai kumar

As we have discussed Your android issue is solved and for your Iphone issue I am looking through it and we will give a fix for that.

PDF Viewer is a plug and play component to display PDF in your app. It can render PDF files from the user's device or from a web URL. PDF Viewer uses Native function API's.

The component uses the following frameworks under the hood:

pdfviewer_api2.png

pdfviewer_api1.png

The following sections help you use the PDF Viewer component in your app.

Prerequisites

Before you start using the PDF Viewer component, ensure you have the following:

  1. Kony account.
  2. Kony Visualizer Enterprise V8
Note:

Ensure that the following Native APIs are added to your project.

pdfviewer_api2.png

pdfviewer_api1.png

Importing the PDF Viewer Component

Before you start importing the component to Kony Visualizer, you must download the component from the Kony Marketplace website.

You can import the marketplace components only into the apps that are of the Kony Reference Architecture type.

To import the pdfviewer component, do the following:

  1. Open your app project in Kony Visualizer.
  2. On the File menu, point to Import, and click Component. The Open dialog appears.
  3. Navigate to the location where you have downloaded the component (zip file) on your computer, select the component, and click Open. The Import Marketplace Item dialog appears.
    pdfviewer_import.png
  4. In the Library Name box, type a name if you want to create a new library. Otherwise, you can select the existing library name
  5. In the Collection Name box, type a name if you want to create a new collection. Otherwise, you can select the existing collection name.
  6. In the Component Name box, the com.konymp.pdfviewer name is displayed by default. If you want, you can rename it.

When you import a component, the component is imported to Visualizer's workspace, but not directly into your app. Thus, after you import a component, you must add the component to your app.

Adding a PDF Viewer Component into your App

You can add an pdfviewer component only to FlexForms.

To add a pdfviewer component, do the following:

  1. Open your app, and then open the form to which you want to add the component.
  2. On the My Libraries tab, select the defined Marketplace library from the drop-down list in which the component exists.
    library.png
  3. From the Collections tab, drag the component onto the form on the Visualizer canvas. The component will be added to the form. You will also see a new element, com.konymp.pdfviewer, under the component section on the Templates tab.
Note:

Ensure that the component is set to occupy 100 percent width of the device. You can achieve this by setting the width of the parent widget to 100 percent.

After adding a component to a form, you can configure the component the way you want it using the Look, Skin, and Action tabs on the Properties pane. Configuring the properties on the Properties pane is similar to configuring the properties of any widget in Kony Visualizer. For more information, refer to Button Widget.

You can also see that a new Component tab, is added on the Properties pane. The Component tab contains assorted properties relevant to the component that allows you to customize the component as required. The properties on the Component tab are categorized as General, Color, Image, and Skin properties.

You can also add an PDF Viewer component dynamically. To do so:

  1. In the Project Explorer, on the Projects tab, click Controllers section to access the respective formController. Create a method and implement the code snippet similar to the sample code mentioned below.
    /*Creating the component's object*/
    var pdfviewer = new com.konymp.pdfviewer(
    {
    	"clipbounds": true,
    	"height": "100%",
    	"id": "pdfviewer",
    	"isVisible": true,
    	"layoutType": kony.flex.FREE_FORM,
    	"left": "0dp",
    	"masterType": constants.MASTER_TYPE_USERWIDGET,
    	"skin": "CopyslFbox",
    	"top": "0%",
    	"width": "100%"
    }, {}, {});
    
    /* Setting the component's properties */
    pdfviewer.url = "http://forms.kony.com/rs/konysolutions/images/DS-Kony-Marketplace.pdf";
    pdfviewer.pdfType = "Online";
    pdfviewer.setIphonePath = "";
    pdfviewer.setAndroidPath = "";
    
    /*Adding the component to a form*/
    this.view.add.(pdfviewer);

    In the code snippet, you can edit the properties of the component as per your requirement. For more information, see Setting Properties.

  2. Save the file.

Setting Properties

The properties provided on the Component tab allow you to customize the UI elements in the pdfviewer component. You can set the properties directly on the Component tab or by writing a JavaScript.

General Properties

Type
Description: Sets the type of the PDF file to render. It has two values:
  • Online
  • Local File Path
Syntax: pdfType
Type: List Selector
Read/Write:

Read + Write

Example:
this.view.componentID.pdfType = "Online";
URL
Description: Specifies the URL to be rendered to the component at the run time.
Syntax: url
Type: String
Read/Write:

Read + Write

Remarks:

Changes made to this property are reflected only during runtime.

Example:
this.view.componentID.url = "http://forms.kony.com/rs/konysolutions/images/DS-Kony-Marketplace.pdf";

Local File Path Properties

Android
Description: Specifies the file to open on Android at runtime.
Syntax: setAndroidPath
Type: String
Read/Write:

Read + Write

Remarks:

There should be an installed PDF viewer to open the PDF file, otherwise the component throws an exception.

Example:
this.view.componentID.setAndroidPath = "/storage/emulated/0/sample.pdf";
iOS
Description: Specifies the file to render on iOS at runtime.
Syntax: setIphonePath
Type: String
Read/Write:

Read + Write

Remarks:

The PDF file should be in either of two locations:

  • The raw folder - <workspace>\<project>\resources\mobile\native\iphone\raw
  • Stored in the project level storage - You will need to provide the file path.
    /var/mobile/Containers/Data/Application/<Application-sandboxid>/Documents/sample.pdf
Example:
this.view.componentID.setIphonePath = "sample";

 

APIs

The following API pertains to the pdfviewer component.

setURL

This API sets the URL to be loaded into the PDF viewer.

Syntax
setURL(url)
Parameters

String

Return Value

None

Example
setAndroidFilePath

This API sets the Android file path for the PDF viewer.

Syntax
setAndroidFilePath(path)
Parameters

String

Return Value

None

Example
this.view.componentID.setAndroidFilePath("/storage/emulated/0/sample.pdf");
setIphoneFilePath

This API sets the iOS file path for the PDF viewer.

Syntax
setIphoneFilePath(path)
Parameters

String

Return Value

None

Example
this.view.componentID.setIphoneFilePath("sample");

Limitations

  • To change the URL dynamically in the same form, you need to use the setURL API instead of setting the url property.
  • To change the path dynamically in the same form, you need to use the setIphoneFilePath and setAndroidFilePath APIs instead of setting the setAndroidPath and setIphonePath properties.
Note:

You can use the Properties to set the URL and File Path if you are navigating to any other form that has the component.

Known Issues

  • On Android, the file does not scroll if Form Scrolling and Bounce are enabled.