Adding ViziApps' Document Viewer To An App

The document viewer lets users open a document within an app rather than having to leave the app to view the document and possibly not return to the app. The document viewer can display:

• Microsoft Office documents – .doc, .docx .ppt .pptx .xls .xlsx
• Images – .jpg .gif .png .apng .svg
• Audio – .mp3 .wav .ogg
• Video – .mpeg4 .webm .ogg
• Other documents – .pdf .tiff .zip .htm .html

Adding the document viewer to your app involves four steps:

1.       Upload the document, create a shareable URL, and enable sharing.

2.       Set up the ViziApps Javascript library.

3.       Call the document viewer.

4.       Pass the document’s URL to the viewer.

These steps can get complex but, in this discussion, are largely copy and paste.

Upload…

The options vary depending on the target. For more information, see the ViziApps wiki here:

http://auth.viziapps.mobi/wiki/document_viewer?utm_source=Include+A+Document+Viewer+In+Your+Mobile+Apps&utm_campaign=Newsletter+-+Document+Viewing&utm_medium=email  

To read about the Google Drive ID, see http://www.alicekeeler.com/teachertech/2013/08/03/google-docs-unique-id/

1.       Create the document.

2.       Upload the document to Google Drive.

3.       Enable sharing and select either:

·         On – Public On the Web or

·         On – Anyone With the Link

4.       Reopen the Share With Others dialog box and copy the URL.

5.       Open the Google Drive Direct Link Generator https://sites.google.com/site/gdocs2direct/

6.       Paste the URL and click the Create Direct Link button.

7.       Copy the URL in the Output Link field for use in a fieldhelp.viewer('docurl'); command that opens the link (described below).

Set Up the Javascript Library

1.       Go to the ViziApps wiki page (see the Upload section above).

2.       Scroll down to and copy the four lines of code under Set up the Library, shown below.

3.       Return to ViziApps and click the HTML Header button in the upper left.

4.       Paste the code in the text box, click the Update Custom HTML Header button, wait for the confirmation message above the button, then close the Custom HTML Header dialog box.

Call the Document Viewer

1. Go to the page that will contain the document viewer “launcher” and add an element, such as a button, that will launch the viewer by using the command fieldhelp.viewer(docurl)

·         docurl is a hidden field that contains the actual URL.

·         docurl is case-sensitive for hidden field names.

Pass the URL to the Viewer

1. Create a hidden field containing the actual URL.
2. Call that field in fieldhelp.viewer.

Practice Steps

Upload the Document and Set Its Permissions

Follow these steps for a live introduction to the document viewer. The steps follow the process described earlier but are general, so you’ll have to adapt them a bit to your app and document. First, you’ll upload the document, modify its URL, and set its permissions. Next, insert Javascript in the app to enable the document viewer. Then add a hidden field to hold the document’s URL. Finally, create a button to open the document. Most of this is simple GUI work.

1.      Open a new browser window and go to http://docs.google.com.

2.      Log into your Google Docs account.

3.      Click the Drive.Google.com link in the yellow bar below the blue Docs bar.

4.      Click the Upload option on the red button in the upper left corner of the screen (next to the Create button) and select Files. The Open dialog box displays.

5.      Select the file to upload and click Open. An upload status window displays, then a message that the file was uploaded. The header on the upload status window reads Upload Complete.

6.      Close the upload status window.

7.      Click the Last Modified column header to bring the document to the top of the list.

8.      Right-click on the document and select Share > Share. The Share With Others dialog box opens.

9.      Click on the Advanced option in the bottom right corner of the dialog box. The Sharing Settings dialog box opens.

10.  Click the Change option under Who Has Access… The Link Sharing dialog box opens.

11.  Click the check box for On–Public on the Web.

12.  Click the Save button. You return to the Sharing Settings dialog box.

13.  Click Done.

14.  Right-click on the document and select Share > Share. The Share With Others dialog box opens.

15.  Select and copy the URL, then click the Done button.

16.  Open a new browser window and go to https://sites.google.com/site/gdocs2direct/

17.  Paste the URL from step 15 in the Enter Your Sharing URL field and click the Create Direct Link button.

18.  Highlight and copy the entire URL in the Output Link field.

19.  Start Word and create a new document to temporarily hold the Output Link URL.

20.  Paste the Output Link URL in the new Word document. You’ll come back to it shortly.

Enable the ViziApps document viewer

1.      Open a new browser window and go to auth.viziapps.mobi/wiki/document_viewer

2.      Scroll down to the Set Up the Library section and copy the four lines of code in the shaded window.

3.      Switch back to ViziApps.

4.      Click the HTML Header button in the upper left corner of the screen. The Custom HTML Header window opens.

5.      Paste the four lines of code in the text window.

6.      Click the Update Custom HTML Header button, then close the Custom HTML Header window.

7.      Click the Save button on the Design page.

Add a hidden field with the URL to the document

1.      Click the App Page pulldown and select the page on which to add the document viewer.

2.      Click the Hidden Field button. Its Properties dialog box opens.

3.      In the ID field, type docurl.

4.      Copy the URL you pasted in Word, return to ViziApps, and paste the URL in the Default Value field.

5.      Click the Insert Hidden Field button.

6.      Click the Save button on the Design page.

Add a button that opens the document

1.         Click the Button button. Its Properties dialog box opens.

2.         Click in the ID field and type btn_doc_view

3.         Click the Button Label field and type View Document or something similar.

4.         Set any font options you want.

5.         Click the check box for Before the main action…, click in the entry field, and type fieldhelp.viewer( 'docurl' );

6.         Click the Insert Button button.

7.         Click the Save button on the Design page.

Preview the document viewer

1.         Start the ViziApps app on your phone.

2.         Navigate to the page where you inserted the document viewer.

3.         Tap the button to display the document. Then tap the Done link at the lower left corner of the page to close the document and return to the app.