Document Viewer

Many apps are required to show some kind of document to the user, however mobile phones aren't equipped to show many common document formats. Another challenge is having the document viewer as an integral part of the app, rather than sending the user to an external app to view a document. You can add this kind of document viewing capability easily to your app, for many kinds of office docs and multimedia files, using the ViziApps field_helper.js library.

Word Doc	PowerPoint	Excel	PDF	Image

The field_helper.js library will support viewing the following kinds of documents:

The first step is to install the ViziApps JavaScript library field_helper.js into your app's HTML Header.

<script src="https://s3.amazonaws.com/viziapps/apps/field_helper_1.0.4.js"></script>
<script>
var fieldhelp = new v.fieldHelper();
</script>

The document viewer is called using JavaScript. You can call the viewer from several places:

• a ViziApps Field event statement, such as a button or table row
• a Device Action statement from a Manage Data query set
• within a function in your HTML Header.

There are two ways to pass the document URL to the document viewer:

• Directly with the URL of a document. This is useful when you need to invoke the viewer from within JavaScript code and may be building the document URL dynamically.
• With the name of a ViziApps field which contains the URL. This is useful when the document URL is preset in a Hidden Field or Table, or when the URL is retrieved from a database query.

var myDocUrl = 'https://s3.amazonaws.com/viziapps/apps/Studio/TemplateApps/docs/CapitolFactBook.xlsx';

// call with URL directly:
fieldhelp.viewer( myDocUrl );

// call with a field containing the URL:
setFieldValue( 'docUrlField', myDocUrl );
fieldhelp.viewer( 'docUrlField' );

For viewing MS Office Documents, the field_helper.js library uses Microsoft Online Document Viewer technology.

Larger documents will take a longer time to upload their content to the viewer from their source location, so you may experience some delay with a blank page.

The Microsoft viewer technology will use a different viewer for smartphones versus desktop apps such as App Preview mode. The mobile version will optimize the rendering to make it easier to view the document content on a small device, so it may not appear as a pixel-perfect representation of the document as it appears in its original format.

The ViziApps Document Viewer also includes the capability to handle several types of multimedia files:

• Images: The document viewer will format graphics and photos to fit the frame of your mobile app, and provide pinch-zoom and scrolling gestures to change the image size and position.
• Audio: Setting the document viewer to an audio file will also popup a new window, however the user will be shown the device's audio player so they can pause and restart the audio.
• Video: Setting the document viewer to a video file is similar to the audio file experience - the user will be shown the device's video player with media controls.

Some websites or cloud services may require a login or other credentials in order to allow the downloading of a document. It is necessary that a document be made publicly viewable in order for the ViziApps Document Viewer to access and show the document. Here are two examples.

To make a document that is on Google Drive accessible to the Document Viewer, you must set the document's Sharing to either of these options:

• Public on the web
• Anyone with the link

You can send a Google Drive document to the ViziApps Document Viewer using the following URL, replacing drive_document_id with your document's Google Drive ID. https://docs.google.com/uc?export=download&id=drive_document_id

If your documents are hosted on Amazon S3, you have two options:

• Setup your bucket to be a Static Website, and then make each File Public.
• You can use the AWS SDK for JavaScript in the Browser, then use the getSignedUrl() method to retrieve a short-lived URL that has access permission.