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.
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
- 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
- Create
a hidden field containing the actual URL.
- 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.
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.
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.
