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.
Load the template app called Document Viewer to see the following examples in action.
The field_helper.js library will support viewing the following kinds of documents:
MS Office Docs | .doc .docx .ppt .pptx .xls .xlsx |
---|---|
Images | .jpg .gif .png .apng .svg |
Audio | .mp3 .wav .ogg |
Video | .mpeg4 .webm .ogg |
Other Docs | .pdf .tiff .zip .htm .html |
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:
There are two ways to pass the document URL to the document viewer:
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:
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:
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: