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.

Slide Panel for App Navigation

This feature, on the Design screen, creates a "panel" containing a list of links that slides into view from the left side of the screen. You might use it to create a "table of contents" panel as an alternative to using an entire page as a table of contents, like the one shown below.

Here's a page with a "Show Slide Panel" button.

Tap the button and the slide panel slides into view from the left and contains the table of contents, shown below.

Tapping either of the links opens the target page, as shown below.

The Home icon in the upper left corner of the screen jumps users back to the page where they began.
Creating a slide panel is a simple, two-step process - defining the panel and invoking it.

Defining the Slide Panel

Here's the slide panel properties dialog box.

Slide Panel ID is the name by which ViziApps refers to the field programmatically, such as slide_panel_home_page. This entry is required.

Select Background Color lets you set the panel color.

Page Names To Go To lets you specify the names of pages to open when the user taps the corresponding Menu Names Displayed entry.

Menu Names Displayed is the entries that appear on the panel.

Note: The implication of these two properties is that you've already defined and created the app pages.

Here's the completed Slide Panel Properties dialog box for the sample slide panel at the top of this topic.

Here's the resulting slide panel, with options Neil A and Neil B and a yellow background color.

When you finish creating the slide panel, you'll see the slide panel icon on the canvas, shown below.

Users won't see this icon. It only displays on the canvas during development.

Invoking the Slide Panel

You can invoke a slide panel from a button or image button. Just create the button and set the action to Show Slide Panel and specify the panel. The Button Properties dialog box shown below creates the green Show Slide Panel button on the home page shown at the top of this topic.

All the options are standard button options except for the action, for which you select Show Slide Panel and specify the panel (which means you can create different slide panels for use at different places in your app).

App Sharing

When you're working on an app, you may want to let other people see or even work on the app but you don't want to share your ViziApps login information. The solution is app sharing.

App sharing lets you easily give another ViziApps developer access to the app. Why share an app? Many reasons, such as

• Share your app with another developer for evaluation and/or testing. You control whether the other developer has full ViziApps capabilities or can only test the app.
• Share your app with a UI designer for consultation. 
• Share your app with a contractor for the duration of the project, then revoke the sharing when the project ends.
• Share your app with the client to let them approve and test the design and functionality.

Note: Although you can share an app, only the original developer (the app's "owner") can publish it.

To invoke app sharing, click the Share This App button on the canvas, shown below.

This opens the Share An App dialog box, shown below.

In the Share with Username field, enter the desired user's ViziApps user name.

In the Message From You field, enter any instructions or notes for the recipient. ViziApps will automatically add your message to an email and send it to the recipient.

The App Sharing Type options let you specify whether the other developer can open the app and modify it in ViziApps (the Developer option) or open the app in the ViziApps simulator app on their mobile device but not be able to modify it (the Tester option).

To unshare an app, select it in the Shared Apps field list box and click Remove.

ViziApps Operations - Registering the API

Your app can read data from or write data to Google Drive spreadsheets using four commands - insert, select, update, and delete. You set up these commands in the Manage Data page in ViziApps and associate them with an object, such as a button, in the app.

Before your app can connect to the spreadsheet, you must assign a registered API to your Google Drive account and specify some API information to authenticate it for the app. You should only need to do this once for the spreadsheet for a particular project. (The previous sentence may sound like a huge leap in complexity, but the process is largely mechanical and covered step-by-step in this section.)

Note - Google can change processes unexpectedly. If a step in these instructions is wrong, see the DIY Mobile blog at http://diymobileblog.blogspot.com/ and the ViziApps help. (To be notified of updates, follow me on Twitter at NeilEric.)

Note – Before starting this process, enable popups in your browser. (In IE, select Tools > Internet Options, select the Privacy tab, and deselect Turn On Popup Blocker.)

Follow these steps, starting in ViziApps:

1. Select any page in your app that uses data in the spreadsheet to start the process.
2. Click the Manage Data button. The Manage Data... screen opens.
3. Click the New App Data Source icon to the right of the All App Data Sources field. The New Data Source Type field displays to the right of the icon.
4. Open the New Data Source Type pulldown and select Google Spreadsheet. The Google Spreadsheet Data Source dialog box displays.
5. In the Data Source ID field, type an ID, such as GoogleDataSource. This is important because ViziApps lets you use multiple data sources for the objects on an app page, and the ID is what you’ll use to select the source when you click on the Select a Data Source... field pulldown on the Manage Data page.
6. Click the help icon in the upper right corner of the dialog box. The help displays.
7. Right-click the URL in step 3 of the help and select Open Link in New Window. The Google Developers Console displays.

8.       If this is your first API registration, click the Create Project button and follow the instructions on the screen. You only need to do this once no matter how many spreadsheets you have.

If you have already registered the API, go to step 9.

9. Click APIs & auth in the navigation list on the left. After a few seconds, you’ll see a list of service options to the right of the navigation list.
10. Scroll down the services list and set the status for Drive API and Drive SDK to ON. These two items will move to the “Status ON” section at the top of the list of services.
11. Click on Web Application (this is required) and click the Register button.
12. Click Credentials in the navigation list on the left. A large red Create New Client ID button displays.
13. Click on the red Create New Client ID button. The Create Client ID dialog box displays.
14. Click on Web Application under Application Type.
15. In the Authorized JavaScript origins text box, enter "https://viziapps.mobi".
16. In the Authorized Redirect URI text box, enter "https://viziapps.mobi/PageData/GoogleSpreadsheetsAuthorize.aspx".
17. Click the Create Client ID button. After a few seconds, the API Access window opens and lists settings for “Client ID for web applications” and several “Key for browser applications”.
18. Copy the Client ID value, return to the Google Spreadsheet Data Source dialog box (shown below for reference and still open in another browser window), and paste the Client ID value into that field.
    
    Note – Copy the Client ID value exactly as it appears, including any part that wraps onto a second line. Do not add spaces before or after the value.
    
        
19. Return to the Google Developers Console (still open in another browser window).
20. Copy the Client Secret value, return to the Google Spreadsheet Data Source dialog box, and paste the Client Secret value into that field.
    
    Note – Copy the Client Secret value exactly as it appears, including any part that wraps onto a second line. Do not add spaces before or after the value.
21. Click the Login to Google button and login to your Google Drive account. (You may not see this if you’re already logged into your Google Drive account.)
22. A Request for Permission window displays.
23. Click the Accept button. You return to the Google Spreadsheet Data Source dialog box, which now displays a Selected Spreadsheet field.
24. Open the Get Spreadsheets field pulldown and select the spreadsheet you want for your data. The list will show all spreadsheets in all folders, so be sure each spreadsheet has a unique name.
25. Click the Save button and wait until the “Your Database Info has Been Saved” confirmation message appears.
26. Click Close. You return to the Manage Page Data screen.
27. Click the green + sign to the right of the Select a Data Source... field.
28. Select GoogleDataSource (the ID you entered in step 5).
29. Open the Select a Page... pulldown and select the object for which you want to define the query. You can now define the query for that object using any of the four query commands.

You can now specify the data handling for the pages in your app.

Welcome To the DIY Mobile Blog

Welcome to the DIY (Do-It-Yourself) Mobile blog. The blog is an extension of my book "Creating Mobile Apps Without Coding", available at Amazon. The book describes how business users can create their own custom mobile apps quickly and inexpensively, and update them quickly and inexpensively in response to changing business needs - without being programmers.

The blog's purpose is two-fold:

• Discuss what's new in the overall DIY app development world.
  
  DIY apps is an exciting new aspect of the mobile world because it lets you, the business user, create your own apps as you need them, often with little or no programming skill. If you're familiar with tools like PowerPoint and Excel, you already have many of the skills you need.
• Present new or updated information about using the ViziApps (www.viziapps.com) GUI app development platform to create those custom apps.
  
  The book provides extensive coverage of how to use ViziApps, but ViziApps is cloud-based software and thus changes more frequently than a book can keep pace with. So the blog presents information that's not in the current version of the book. Every six months or so, that information will be added to an updated release of the book.

Enjoy...