Table

of Contents
Table of Contents
Dedication
Introduction
Structure of This Book
The DIY Mobile Blog
1 - Overview of Mobile
Three Common Questions
Why Go Mobile?
How Are Apps Being Used?
Speaking the Language of Mobile
Introduction to DIY (Do It Yourself) App Authoring Tools
2 - Overview of ViziApps
Overview of ViziApps (the Company)
ViziApps Development Process
3 - Overview of DIY Hybrid App Design
Overview of DIY App Design
Features of an Effective App
App Design Pointers
Paper Prototyping
4 - ViziApps Page Elements
Design Screen
Hands-On - Create the Sample Apps Screens
5 -The Database
ViziApps Data Source Options
Google Drive Overview
Google Drive Spreadsheets As An App Database
Hands-On - Create the Google Drive Database
6 - Connecting the App to the Database
Registering and Authenticating the API
Data Management Commands
Hands-On - Connect the App to the Database Using the Data Management Commands

7 - Non-Data ViziApps Features

Non-Data ViziApps Features
Alerts
Button
Camera
CheckBox
Email
Hidden Fields
HTML Panel
Image
Image Button
Label
Phone
Picker
Popup Web Page
Push Notification
Scan Bar Code or QR Code
Signature Capture
Slider
Switch
Table
Text Area
Text Field
Text Messaging
8 - Publishing
Publish Screen
9 - Creating Web Apps
Introduction to Web Apps
Differences in Creating Web and Hybrid Apps Using ViziApps
Appendices
Appendix A: Sources of Information
Index

Dedication
Thanks to ViziApps co-founders George Adams and Michael Kuperstein for creating one
slick app authoring tool and giving me the opportunity to jump into the deep end of app
development.
Thanks to David Asher of ViziApps for the advice and support in writing this book and
helping pull me out of the deep end on occasion.
Thanks to Dan Kalagher, Ann Hewitt, and Shyam Svai for the help and suggestions (and
to Dan for not laughing at me when I made the email client error).
And as always, thanks to Connie for having the courage to come along with me as
I jumped not just into a new tool but a whole new market (and a whole new world of
technobabble).

Introduction
Welcome to this book on how to create mobile apps without needing a programmer. If
youve wanted to create an app for your company or organization but havent been able to
justify spending tens of thousands of dollars and weeks or months of time, this book is for
you.
The purpose of this book is to explain how to create a custom business app quickly,
inexpensively, and in a way thats responsive to user feedback or changing business
conditions.
The obvious question is, why bother when thousands of apps are available today in the
App Store and Play Store? One of them should meet your needs. Do you need to create
another app?
The answer may be no. You may find the right app in one of the stores. Download it and
youre good to go.
But you may not find the right app. None of the many apps that you find may be quite
right. If only that app could be modified to do this... A few years ago, that would have
been impossible without a programmer.
Today, however, business users, not programmers, can create powerful apps without ever
seeing code. Youre not going to build the next Angry Birdstm. And even if you dont have
to work in code, you do have to be sure the app does what you need, is easy to use, and
attractive, (and meeting those requirements can take a lot of work).
Nevertheless, you can create custom apps that meet your needs and do so quickly and
inexpensively - in days, not weeks or months. This book will show you how.
This book has two goals that youll see reflected in its structure. It provides an overview
of mobile concepts and terminology, not comprehensively but enough to lead into the
second goal, introducing you to a class of app development tools called DIY (Do It
Yourself) tools and to actually use one of them, ViziApps Studio, to create an actual app as
a demonstration and to get you going on your own app.
Why ViziApps? In the interests of full disclosure, Im an independent consultant whos
been associated with the company almost since its founding. Im a certified ViziApps
developer, created the training materials for the company, and do app development and
periodic pre-sales and technical support for people considering using the tool.
The focus on ViziApps isnt to deny the existence of competing tools, some of which Ill
mention or refer to in the course of the book. I just consider ViziApps to be one of the
most flexible and powerful tools in the DIY category.

Structure of This Book

Chapter 1 introduces the whole concept of mobile - what it is, types of mobile that you
can create, and business justifications for creating an app. All written in non-technical
language with minimal jargon. If you just want to learn about mobile, you can stop here.
But thats not why you bought this book
Chapter 2 introduces ViziApps Studio, the DIY tool youll use to create the practice app

and real apps if you so desire.

Chapter 3 covers app design - making sure your app is attractive and effective as well as
works programmatically.
In chapters 4-8, youll learn about ViziApps-specific features and follow exercise
instructions to create a type of app called a hybrid that can run on iPhones, Android
phones, iPads, and tablets. Its a simple app - a lead tracker that youd use at trade shows
to keep track of prospective customers - but a real app nevertheless.
Chapter 4 describes ViziApps page design features that you can use to create your apps
screens. In this chapter, youll also find part 1 of the instructions for creating the sample
app, laying out the screens.
Chapter 5 describes ViziApps data handling options and focuses on one that can be used
by any business user familiar with Excel or other spreadsheet. Not all apps have to handle
data but if you want to create an app to do inventory counts or track leads at trade shows,
for example, youll have to work with data. In this chapter, youll also find part 2 of the
instructions for creating the sample app, creating the database.
Chapter 6 covers how to connect your ViziApps apps screens to data you need to make
the app work. In this chapter, youll also find part 3 of the instructions for creating the
sample app, connecting app pages to the database to pass data back and forth between
them.
Chapter 7 covers non-data ViziApps features in addition to those described in chapter 6 how to send an email from your app, take a picture, add images, and more.
Chapter 8 describes the steps for getting your app in the App Store and Play Store in order
to get it out to the world.
Chapters 4-8 dealt with hybrid apps. Chapter 9 looks at a different type of app called a
web app. Web apps use many of the same features as hybrid apps but work differently and
can eliminate some problems that can arise with typical hybrid apps.
If youre completely new to mobile, read the whole book in sequence. If youre familiar
with mobile concepts and design and just want to dive right into ViziApps itself, start with
chapter 4.
You wont be a programmer when you finish the book but youll have a good
understanding of the app world and youll be able to create your own apps.
And if you enjoy technology and learning new things, its fun.

The DIY Mobile Blog

ViziApps is cloud-based software which means it can change quickly and put the book out
of date. To avoid this, check for updates at the DIY Mobile blog at
http://diymobileblog.blogspot.com/. (To be notified of updates, follow me on Twitter - my
handle is NeilEric.) Updates will periodically be incorporated into a new release of the
actual book.

1 - Overview of Mobile
Three Common Questions
Im not a programmer. Can I do this?
Probably, depending on what you want your app to do. There are four main tasks in
creating an app:
1. Decide what you want the app to do and mock it up, ideally on paper.
2. Create the app pages based on the mockup.
3. Create any required database and connect the app pages to the database in
order to be able to pass data between the app and the database.
4. Get the app into either or both of Apples App Store or Googles Play Store.
Step 1, planning, seems obvious at first, then can seem difficult until your equivalent
experience kicks in. If this is your first app, youve probably never had to turn a vague
idea for an app - keep track of prospective clients we meet at trade shows - into a formal
set of tasks for the app, then turn those tasks into smoothly functioning and flowing
screens and data. But planning and designing the app isnt that different from planning and
designing a PowerPoint presentation or breaking an operation down into a series of tasks
to explain it to a new hire. And youll find that the DIY tools let you quickly create a
prototype and quickly change it in response to feedback. (And youll get better at it with
your second and third apps.)
It may take you several tries before you get it right, which is why it may be a good idea to
work on paper at this stage. Youll find a discussion about design and a paper app page
template in chapter 3.
You dont have to be a programmer to do planning, but you do need to understand the
process or task that will be the subject of your app.
Step 2, creating the app pages based on the design can be surprisingly easy mechanically. Youll drag and drop screen objects like labels, data entry fields, etc. onto a simulated
app screen - the canvas. A big problem at this stage can be resisting the urge to tweak
the design incessantly.
You dont have to be a programmer to create the app pages; having a background in
interface design helps but the crucial thing is to understand the workflow of the process or
task that and to be able to present it in a logical sequence for the app.
Step 3, creating the database can be daunting for a non-programmer. But many of
todays DIY app development tools either hide much of the work or try to help you
through it.
You dont have to be a programmer to do this; having experience with databases helps, but
simply understanding how your app will use and create data may be enough to let you get
through this step.
Step 4, getting your app into a store can be a challenge because the process is
unfamiliar and can seem arbitrary. But thousands of developers have gone through the

process.
You dont have to be a programmer to publish an app although some of the tasks may be
more complex than youre used to, such as creating certain control codes needed to submit
to Apples App Store. And the documentation is often written for programmers. But youll
find a lot of information on the web, including YouTube videos, that will help you through
the process. You may also be able to find consultants who can handle the submission for
you.
In summary, even if youre not a programmer, you should still be able to create your
custom app.
Im a Windows user and dont have a Mac. Can I do this?
Yes, with one qualification.
Many DIY authoring tools like ViziApps, the tool used in this book for the hands-on work,
are cloud-based. So if you plan to create Android apps only, you can do all your work in
the cloud using a Windows PC.
The qualification arises if you want to create an app for the iPhone or iPad. If so, you can
still create the app working in the cloud using your Windows PC. However, youll need
use a Mac to generate certain codes required to submit the app to the App Store. If youre
just creating one app, find a friend with a Mac that you can borrow. Alternatively, buy a
used Mac or lease one. The latter two approaches can be a waste of money since youll
only need the Mac briefly, especially if your app is accepted into the App Store on the first
submission, but the cost should be low.
Is this going to cost a lot?
It depends how you define a lot. Some of the numbers below may be scary at first but
keep reading.
If you run a Google search for cost of developing a mobile app, youll get many hits that
mostly equate to it depends.
A good place to start is Figuring the costs of custom mobile business app development.
This article distinguished between apps for the app stores vs custom apps intended for a
specific purpose within a company or organization.
For a commercial app aimed at the stores, the article suggested a range of $20,000 to
$150,000, with an average of about $30,000 to $40,000 for an average app, with the
caveat that there is no such thing as an average app.
For a custom app intended for a company or organization, the article suggested this
breakdown:
An app that extracts data from a database and displays it in a simple list can be expected
to take 4-8 weeks to create at a cost of $26,000 on a single platform.
An app with more complex server-side integration and offline data caching will probably
take 8-12 weeks and cost $71,000 to develop for two platforms.
A full-scale enterprise automation app with integration to business processes will take
anything from 3-6 months and may cost over $150,000 to develop on three platforms.

(From Figuring the costs of custom mobile business app development at

http://www.formotus.com/ 14018/blog-mobility/figuring-the-costs-of-custom-mobilebusiness-app-development.)
Remember too that the initial development cost isnt the only cost. There will be
continuing costs to debug the app or extend it to meet new business needs or user
feedback. The same article says this about on-going costs Forrester estimated in 2012
that the average amount spent on a typical customer mobile app ($50,000 to $150,000)
turns out to be just 35% of the true two-year cost.
Note also that theres nothing in the article that talks about rapid app development - what
to do if you find out today that you need an app tomorrow.
Before throwing up your hands in dismay, read on.
The rationale for DIY authoring tools is to reduce the cost and time needed to create an
app. To see how, lets look at the four phases of app development mentioned earlier. The
apps youll create using a DIY tool probably wont be as elegant as an app done by a
programmer, but theyll be much cheaper and quicker to create.
1. Decide what you want your app to do and design a mockup, ideally on
paper.
This can be surprisingly hard to do because we take so much knowledge for
granted, but a few days should be enough to work out your apps flow and design
largely right.
2. Create the app pages based on the mockup.
This involves dragging and dropping objects on a simulation of the app screens
based on the design and flow you worked out in step 1. This shouldnt take more
than a few days, even just one in some cases.
3. Create the database and connect it to the apps pages in order to be able to
pass data between the app and the database.
This step has two parts, creating the data and connecting the app to the data.
Creating the data is easy if its already in database form, such as an Excel
spreadsheet (and if youre using a spreadsheet as your database as ViziApps can
do) since you can just import the data into the database. If you have to create the
data from scratch or modify existing data to use in the app, its harder to gauge
the time but assume anywhere from days to a week.
Connecting the app screens to the data is quick and mechanical once you get the
hang of what youre doing. In a small custom app, this might take less than a
day.
As an extreme example, I created this app with and for a Boston-area company
called Nowlytics (www.nowlytics.com). The purpose of the app was allow

voting for best-of-show in four categories of startup company at a technology

incubator show run by MIT in Cambridge, MA in the spring of 2013

The app had three pages, the title page shown here, a voting page, and a credits
page. Designing the app, creating the pages using ViziApps, creating the
database (a Google Drive spreadsheet), and linking the voting page to the
database took under eight hours. It was an unusual app but the DIY tool let us
work that quickly.
For arguments sake then, assume that you can create a custom app in 40 - 80
hours. That time at your fully-loaded hourly rate is far less than the figures given
in the earlier article.
One alternative is to contract for professional services from the DIY tool vendor,
ranging from letting the vendor create the app for you to contracting for support
on an as-needed basis while you build the app yourself. These options obviously
cost more than doing the app entirely on your own but will still be far cheaper
than the programmer-driven approach.
4. Getting the app into one of the online stores - Apples App Store and/or
Googles Play Store.
Here, the costs get more predictable although they still vary depending on the
tool. For ViziApps, for example, youll have to get a developers license for each
platform on which you want to publish the app. As of January 2014, thats
$99/year for Apple and a flat $25 for Android. (Those figures may change.)
Youll then have to pay some processing fee for the DIY tool vendor to run the
app through the store submission process and a maintenance fee for hosting or
other services. Different tool vendors will obviously charge differently but, as a
gauge, ViziApps charges a maximum of $149 per month for a developer fee,

with various other fees that come in only when youre ready to publish. So the
total cost of step 4 for a year may only be a few thousand dollars.
One further consideration If you currently have a web site that youve
contracted out to a developer, you may not have as much control as youd like
over updates, and the updating process can be expensive and involve significant
delays. DIY tools like ViziApps give you, the app owner, control over changes.
With these costs, or reduction in costs, creating your own custom app may
suddenly seem affordable and feasible.

Why Go Mobile?
If youre reading this book, youre considering going mobile. (Well look at what that
means shortly.) But cute slogans aside - theres an app for that - why go mobile? Here
are some reasons to consider, ranging from cultural to business.
Provide information where and when users want it
Modern life is fast-paced; people dont want to wait for things. Mobile lets people find
information where they are now rather than waiting until they get back to the PC in their
office or home.
Lets say youre out shopping and see some item that looks like what you want, but you
want to look for the reviews first. You could go home, turn on your PC, read the reviews,
decide you want the item, and go back to the store. But thats inconvenient - you have to
make two trips - and the item might be sold out by the time you return to the store.
Instead, you can find reviews while in the store on your smartphone.
Or consider traveling with a toddler who needs to go potty now! Being able to find a guide
to nearby public toilets when you need it is invaluable.
Or consider a more business-like application. Youre a scrap metal dealer. Your agents
visit scrap yards looking for metal that your company might want to buy. The typical
process is for agents to take pictures of piles of scrap with a digital camera, go back to an
office area, start their laptops, connect the cameras, and send the pictures to the office as
email attachments. The process works but its cumbersome. What if you could use an app
that has the smartphone camera built in, plus a Save button that can instantly upload the
photos to a database back in the office for analysts to examine and bid on. Its the same
process as with the digital camera and laptop, but more convenient, simpler, and faster.
Provide information how users expect it
Pundits have predicted for years that mobile devices will outsell PCs and it finally seems
to be happening. See http://www.smartinsights.com/mobile-marketing /mobile-marketinganalytics/mobile-marketing-statistics/#comments-section, for example. Or, just survey
your customers to see whether they have mobile devices and which ones. As mobile
devices spread, users expectations are likely to increase.
Personal vs. Business Apps
I spent two years of my association with ViziApps running online demonstrations of the
ViziApps software for people who were interested in creating apps. I soon learned that I
could categorize prospects as personal or business-related and accurately predict whether
they would follow through with their idea.
Personal Apps
Personal app ideas included high school science fair projects, art education, and its cool
and I want to try it. People with these ideas were universally intelligent and well-meaning
but not a single one ever followed through. There were two reasons for this.
First, even without having to code the app, it still has to be designed. Good design is
harder than it seems, enough to deter many prospective developers.

Second, finishing the app isnt the end of the work. It has to be made available through the
stores, a task that required some work in unfamiliar surroundings, and that cost money for
hosting.
These two issues were enough to deter every casual prospective app builder.
Business Apps
Business app ideas included such things as the scrap metal app mentioned earlier, a
calculator app that would compute the amount of concrete needed for a slab or foundation
and then automatically contact the nearest concrete dealer, an app that would inventory
and print packing labels for orange crates, an app for a garage that would use GPS to
broadcast a dollars-off coupon for the first ten truck drivers who came in on a given day
for an oil change, or an app that puts a companys latest product pricing and availability
information right in the hands of mobile sales and service people. Whatever the idea
though, they all had one of three business-related benefits. They could either:
Raise revenue - Like the oil change app.
Lower expenses - Like the packing labels app
Offer some other, non-dollar business benefits - Like the faster response of the scrap
metal app, which might indirectly increase revenue, or the branding (we have an app were cool - buy from us) of the concrete app, which might again indirectly increase
revenue.
If one of more of these three characteristics applied to the proposed app, it was far more
likely that the app would have a measurable benefit. That would make the prospect more
likely to follow it through.
If youre considering creating an app, ask whether it will do one of those three things increase revenue, reduce costs, or provide some immediate but non-dollar benefit. (For
example, will the app improve productivity so that employees can work more quickly or
efficiently, like the scrap metal example? Or will the app improve customer satisfaction
and thus encourage repeat business or work-of-mouth adoption?) If it will, your app may
succeed. If not, your app will likely fail because youll find better things to do with your
time and resources.

How Are Apps Being Used?

To get ideas as to how apps are being used and even spring some ideas as to how you
might use apps in your company, look at Apples App Store or Googles Play Store. More
generally though, here are some large scale ideas as to the types of apps you might need
and perhaps create using ViziApps.
Mobilized Desktop Apps
Mobilized desktop apps are app versions of software that may be familiar from your PC,
such as weather reporting. Apps like Weather Pro are conceptually similar to Weather.com
on the PC. This similarity lets users easily and quickly understand how to use the app
because they already know what its doing.
Unusual New Apps
These apps dont have PC analogs so users have no mental model of what the app is
doing. This makes these apps a little harder to learn. Yet these apps can be very creative
because they use features that arent available on PCs. For example:
Footie bar locators (sports bar locators in American English) - These apps arose in
the UK during World Cup soccer a few years ago. Using the phones GPS and a database
of local bars, these apps can detect a users location and give directions to the nearest bar.
Remote credit card payment - These apps appeared in 2010 when Square
(https://squareup.com/) put out a credit card reader that plugged into the iPhones audio
jack; buyers just swiped a credit card through the reader. Since then, competing swipe
units have been released by Intuit (http://intuit-gopayment.com/) and PayPal
(https://www.paypal.com/ us/webapps/mpp/how-paypal-works). In the meantime, the
emerging technology of NFC (Near Field Communication) adds a twist by eliminating
swipe units completely. Buyers can simply touch an NFC-enabled credit card to an NFCenabled device and make the payment. Not all devices support NFC; Apple does not and
instead has released iBeacon, so NFCs status is still up in the air. But taking credit card
charges in the field opens new app ideas.
Document scanning - These apps let users capture documents, checks, contract
signatures, and other writing in the field without a copier or scanner.
Inventory - If you need to check inventory, you may still do so using paper and pencil and
put the data into a spreadsheet or database later. But you can create an app for use on a
tablet or smart phone that can enter the data right into a database, speeding up the work
and eliminating transcription errors.
Lead tracking by sales staff for use at trade shows - Similar for to inventory tracking. A
variant of this is an app for voting for exhibitors at a techno-logy incubator exhibition, like
the one shown below which I developed with and for Nowlytics
(http://www.nowlytics.com/) for the 2013 InNOWvation exhibition at MIT in Cambridge,
MA.

Other Types of Mobile

Most of the discussion in most of the book focuses on apps. But there are other types of
mobile, one of which, the web app, is also supported by ViziApps. Youll find a
discussion of the different types of mobile later in the book (Speaking the Language of
Mobile on page 30).

Speaking the Language of Mobile

Before going further, this section defines the terms used in the rest of this book.
The first is the word mobile itself. It seems obvious - mobile as in smartphones and
tablets. But the term can have several meanings; get them wrong and you might start
developing the wrong product or hire the wrong person. So what does mobile mean?
This was once mobile.

This still is:

And now this.




And were heading toward this.

Because of these options, Ill use the term mobile to mean portable devices with smaller
screens than desktop or laptop PCs. In other words, smartphones and tablets today, other
devices tomorrow.
Whats an app? The term was originally shorthand for application in general but its
now largely used in reference to mobile devices like smartphones or tablets - e.g. iPhone
app.
Apps vary widely but tend to be focused on one task, such as providing weather forecasts,
checking the price of a book on Amazon, showing photographs, etc. This focus is
sometimes referred to as micro-tasking and is an important aspect of app design. Keep
your apps focused on their major tasks and avoid feature-creep.
There are three types of apps.
Native apps follow (are native to) platform standards like iOS or Android. This means
these apps run well on their native platforms but dont run on others - an iPhone app wont
run on an Android phone, for example. Native apps can also easily run on-device
resources like the GPS, camera, and the accelerometers that control screen rotation. So
native apps are very efficient.
One drawback to native apps, especially on Android devices, is the fact that the native
apps are sensitive to versions of a platform. In other words, an Android app designed for
one version of the Android operating system may not run on an earlier version. This
complicates app planning and QA, especially in a fragmented market like Android where
different vendors, sometimes even the same vendor, run different versions of the operating
system across their product lines.
Web apps run in a browser so theyre not native to a specific platform standard. For
example, a web app will run in whatever mainstream browser is on your mobile device.
This eliminates the version problem found in native apps.
Note - Web apps are what is often called the mobile web. ViziApps can create web apps,
but you can also create web apps using any authoring tool that can format web pages for

display on mobile devices. This includes technical communication software like MadCap
Flare (www.madcapsoftware.com), Adobe RoboHelp (http://www.adobe.com/products/
robohelp.html), and web-to-mobile tools like DudaMobile (http://www.dudamobile.com/)
and Mobify (http://www.mobify.com/).
One drawback to web apps is that they cant run the on-device resources without
additional coding.
Hybrid apps are a fairly recent phenomenon, emerging in the last few years as a
combination of the best of native and web apps to solve the problems of both those
formats. Hybrid apps can access the on-device resources and appear in an app store (which
aids distribution) like a native app, and can run in a browser, like a web app. They can also
be extended by adding custom Javascript or HTML. (ViziApps lets you do this through its
HTML panel feature and by letting you add custom Javascript to run before or after the
main action assigned to a feature.) In effect, hybrid apps are an advanced form of native
apps.
ViziApps can create hybrid apps and web apps.

Introduction to DIY (Do It Yourself) App Authoring Tools

In the early 1990s, creating web sites required that you know HTML and work in the code.
This was a slow, tedious job that lead to many coding errors.
In 1994, SoftQuad Software of Toronto released HoTMetal, which added a GUI (graphic
user interface) on top of the coding. You still needed to know what you were doing, but
HoTMetal and tools like it simplified web site development by removing the need to work
directly in code.
Later tools made web site development simpler still, to the point where almost anyone can
create a web site today with no programming skills or knowledge.
That same simplification path has manifested itself in almost every aspect of high
technology since those early internet days; were now seeing it with regard to mobile apps.
You still need to know MIME types, Objective C, Javascript, and other technologies to
create complex, high-end apps or games. But many business apps dont need this level of
complexity and power and can be created instead by non-technical business users using
GUI tools that hide the code and let you concentrate on elements like task flow and
usability. These tools are referred to as DIY (Do-It-Yourself) authoring tools.
Overview of DIY Tools
The DIY tools space is very young. The first such tool was Google App Inventor, released
by Google publically in December 2010. (Google later passed it to MIT. The tool is now
available through the MIT Center for Mobile Learning under the name MIT App Inventor
(http://appinventor.mit.edu/). Google App Inventor led to similar tools like appmakr,
iBuildApp, and ViziApps Studio (initially called MobiFlex.)
Note - For a more comprehensive list of app development tools and features, see
http://www.markus-falk.com/mobile-frameworks-comparison-chart/. The page is in
German, so go to the home page at http://www.markus-falk.com/index_en.html and click
the en link in the upper right to translate to English.

Here are some highlights of these tools:

Free or very low cost - Theres no big upfront investment. Most of the tools are free. A
few, like NSB/AppStudio, cost $99 and up - nearly free. The vendors generate revenue by
providing app development services on a consulting basis, charging fees for hosting and
training, and various other mechanisms. But the use of the tool itself is often free, so its
easy to try different tools. (Trying many tools is also a good way to waste time so do some
upfront research, including using the matrix, to narrow your tool options.)
GUI interface driven - You can get to the underlying codes if necessary, but most if not all
of the app page creation can be done through a drag and drop interface. The real
complexity lies in setting up the apps data handling, if any.
Template driven - In order to allow DIY authoring, most of these tools provide fixed
templates to limit your options (and limit the confusion that leads to calls to tech support).
Rapid development You can create apps in days or a few weeks rather than months in
order to quickly respond to business needs. And quickly modify the apps to meet changing
business needs or respond to user feedback.
In other words, these tools offer an inexpensive, flexible way to enter the mobile app
world without needing to hire or be a programmer. Apps created using these tools wont
compete with apps or games created by professional programmers but they will meet your
needs.
With this introduction to mobile out of the way, lets start the process of actually creating
an app. The next chapter introduces ViziApps Studio, the DIY tool that youll use to create
an app. Chapter 3 describes app design concepts. After that, youll be creating the app.
Have fun

2 - Overview of ViziApps
Overview of ViziApps (the Company)
ViziApps was founded in August 2010 by George Adams and Michael Kuperstein. George
and Michael met in the fall of 2009 at an IEEE ENET (Entrepreneurs NETwork) meeting
near Boston. Michael had created several apps for the iPhone. He had also used his MIT
PhD engineering skills to create methodologies for creating IVR (Interactive Voice
Response) applications with no coding. George had just left his CEO role at the Internet
security company he had started and built to an IPO, and was looking at issues in the new
wave of mobile devices triggered by Apples launch of the iPhone.
From their software and mobile industry experience, they believed that smartphones
would become the de facto user device for business processes. They also knew that
businesses would have trouble creating all the needed apps with the traditional
engineering project method. That method doesnt scale well and businesses wouldnt find
enough app developers to create the many apps theyd need.
Emerging products were easing the creation of mobile web sites and web apps. But the
real need for business was a no-coding, flexible, graphical user interface and back end
data management, with support for native mobile device features like GPS, camera, bar
code & QR code reading, signature capture, and audio and video that make user-locationdriven, event-driven, and context-driven mobility so powerful for improving business
workflow processes.
In early 2010, Michael hit on the innovative concept of using his IVR code generation
technology for faster and easier iPhone and Android app creation. He began developing
the ViziApps authoring tool and the ViziApps iOS and Android Player Apps. By the
summer of 2010, they were in beta. ViziApps, the company, was born in August, 2010,
and the first version of ViziApps launched in December 2010.
Knowing that 75% of mobile app development is in the backend data management,
ViziApps developed easy to use drag-and-drop, no-coding connectors for leading web
accessible databases and data sources Google Drive spreadsheets as flat file databases,
SQL databases, Intuit QuickBase, and Salesforce.com. For backend data needs beyond
those, ViziApps built in support for RESTful web services as well.
During 2011 and 2012, ViziApps received over $1.2 Million in revenue and engineering
project funding from large customers and IT software/hardware strategic partners to
integrate no-coding support for key technologies into ViziApps and build ViziApps into a
full, enterprise-grade scalable platform/solution. By late 2012, new industry standards and
platforms allowed ViziApps to enable its users to create HTML5-based hybrid apps and
web apps. These ViziApps hybrid apps are automatically cross-platform, easily updated,
but with full access to the native mobile device features so essential for agile business
process mobility.
ViziApps now includes key innovations like a free-form GUI page designer so users are
not constrained to look-alike templates, no-coding backend database connections to
databases that represent over 80% of all the database interfaces used by businesses,
including SQL, Intuit QuickBase, Salesforce.com, and Google Drive spreadsheets, and

modular design for easy partner extensions. And although most apps can be created using
ViziApps with no coding, IT users can seamlessly integrate JavaScript and HTML5
extensions in their apps. From the extensive 2011/2012 engineering development and
tuned from feedback from over 14,000 business users that have signed up to use it by early
2014, ViziApps is now a highly scalable, cloud-based enterprise grade product stresstested with millions of app users.
ViziApps foresees that user awareness and Viziapps capabilities will continue to evolve
for direct ViziApps use by office workers, what Gartner calls Citizen Developers, to
create many of the mobile apps they need for their mobile users.
The company continues to innovate, its latest development being the January 2014
addition of Smart Pages - pre-built, data-ready, and reusable mobile app pages based on
best-practice user experience design to help users create robust apps faster.

ViziApps Development Process

ViziApps lets you create mobile apps by following a standard process of creating the app
pages, linking the pages to data in a database, and previewing the result. But ViziApps lets
you do most of the work visually, with no coding.
Create the app pages in ViziApps Design pane, shown below.

Youll drag and drop page objects like fields, buttons, and images on the canvas, the
simulated app screen, to lay out the apps pages.
Youll then define the properties of the page objects by using dialog boxes, like the one
shown below for a button.

Create the database for the app. You can do so in various ways including web services,
QuickBase, SQL databases, and the simple but powerful Google Drive spreadsheet, shown
below.

Connect various objects on the app pages to the database to define how the objects
control the flow of data for the app. For example, youd want to specify what happens to
the data when a user adds an entry in an app and taps a Save button, as shown below on
the Manage Data screen.

By using mostly drag and drop, youll end up with a finished database link like the
example below.

Theres no coding unless you want to add Javascript to a button or other object to
customize its behavior, but this is often not necessary.
Each time you make a change to a screen or modify the data handling, youll want to
preview the result. You can do this by using the built-in previewer, but this previewer has
a limitation. Youre probably using ViziApps Studio on a desktop PC that has a more
powerful processor and more memory than a real mobile device and doesnt slow down
because of network traffic. So this preview displays your screens accurately but doesnt
realistically simulate their operation. To fix that, ViziApps adds another option that

provides a more realistic preview live on your mobile device.

After downloading a free ViziApps preview app from the App Store or Play Store to your
mobile device, you can run your actual app in preview mode on your phone or tablet.
Heres the ViziApps screen showing an app in development.

And heres the same previewed live on the phone.

The beauty of this preview is that youre actually running the app live - adding entries,
reading entries out of the database, sending emails, taking pictures, and whatever other
features you used in the app - all live with realistic processing times, network delays, and
so on.
This live preview offers an additional benefit. Without it, the only way to see your app
running realistically is to get it into the App Store or Play Store. However, it can take up to
ten days to get your app into the App Store so thats not a feasible way to do a live test.
The live preview solves that problem. You can easily download it from the App Store at:
https://itunes.apple.com/us/app/viziapps/id500576230

and Google Play at:

https://play.google.com/store/apps/details?id=com.viziapps.viziapps

So the overall process is to create the app, add and modify pages and features and preview
live after a change, then go back into the development screens and tweak, then preview
again, until youre satisfied. At that point, youre ready to submit the app to the vendors
app stores.

3 - Overview of DIY Hybrid App Design

Overview of DIY App Design
Youll find many books and resources on app design. The appendix lists some that Ive
found most useful and youll find more. However, these resources tend to assume that you
have a lot of time to devote to getting the design right.
Thats a good goal but the reality of DIY (Do It Yourself) app development is that you
want to create as good an app as you can as quickly and cheaply as you can. The last part
of that sentence is the crux - get the app up and in use as fast as possible. Youll never
create the next Angry Birds or Fruit Ninja but you will create an app that meets the
needs of your company or organization.
TM

TM

With that goal in mind, the design discussion in this chapter and throughout this book
focuses on creating a good app quickly rather than a perfect app slowly.

Features of an Effective App

An effective DIY app meets several criteria.
It does the intended task. That not as simple as it sounds; you have to clearly define the
task and the capabilities needed to perform it and then stop. Dont add extra features, no
matter how cool they are, if theyll confuse the task. (You can add features, like a link to
the app developers site as in the screen below - the Created by link at the bottom but they should be visually low-key.)

Its design is attractive and inviting. It simply looks good.

Its workflow is as obvious as possible. Using a DIY app may not be as obvious or simple
to users as it is to the apps developer whos often intimately familiar with the business
process and the task for which the app was developed.
It has a mobileness. Its not a web site that was reformatted to fit on a phone screen or
just squeezed on a phone screen. If an app lacks that mobileness - e.g. if its just a
regular web site on a tiny screen, users will try it a few times and then may return to the
regular web site because its easier to use.
Note - You can view a regular web site on a phone screen and have it work well, if the site
is redesigned to take the screen space limitations and other issues into consideration. This
falls into the category of web apps, covered in the last chapter of this book
(Introduction to Web Apps on page 251).

App Design Pointers

DIY app tools simplify app development so much that you may be tempted to just dive in
and start creating screens. That approach is known as the ready, fire, aimoops model.
Try it and youll soon find that you went down the wrong path and have to start over.
Instead, before you start developing, consider three issues - goals, design, and usability.
This section discusses these issues and relates them to specific examples when possible.
For more references about design, see Appendix A.
Goals
This should be simple. Define what you want the app to do, period. Avoid feature-creep,
where more and more features get piled onto the initial design. (One odd side benefit of
using DIY app tools is that development can be so quick that there may not be time for
feature-creep.)
Aside from avoiding feature-creep, you want to limit the apps goals during the design
phase. Too many goals can produce an app thats:
Confusing to use. There are so many options that users just get lost.
Confusing to navigate. The more the goals, the more the menus and submenus that users
have to navigate to get to the feature they need.
Visually cluttered. Its hard to fit too many options on a screen the size of a sticky note
without looking busy or cluttered.
Exceeding an internal limit on the platform. A few years ago, I created a motorcycle
maintenance record tracking app that could fit the history of a bike in the owners pocket.
It was a big app that wound up with thirty-nine screens, a lot to download. It downloaded
slowly but acceptably on the iPhone but exceeded a download time limit on Android
phones. Users got an error message and the download would stop. That problem killed the
app.
Todays technology is better and a thirty-nine screen app shouldnt be a problem unless
those screens are full of high-resolution images, for example. Remember that mobile
bandwidth is still more limited than what youre accustomed to on your desktop PC.
As you define the apps goals, youre also defining its type. This can be a mobilized
version of a desktop app or something unique to mobile. If its the former, like a mobile
weather app, users are likely to understand its concept and task flow from past experience
on their PC. If its the latter, however, such as performing a task based on the users
location found by the phones GPS, users may not be familiar with the apps concepts and
task flow and get confused.
Defining the apps goal(s) also defines the context in which it will be used. This affects its
design and how you test its usability. For example, a restaurant re-view app is likely to be
used indoors under low light, which makes contrast important. More about context later in
this section.
So define your app as specifically and tightly as possible and stop.
Design

Design falls into several sub-categories, starting with functional design.

Functional Design
The apps goals determine what features it will need.
For a real estate app, for example, you might decide to use the camera (to photograph
properties to be listed in a database), GPS (to keep track of where a particular property is
located and access it via a mapping function), text entry (to let users make notes about a
property as they view it), and database access (to hold and retrieve all this information).
For a conference app, you might decide to use the camera (to let users photograph people
they meet who have only been names in email or social media), text entry (to let users
make notes about the people they photograph), database access (to hold and retrieve all
this information), and push notification (to send late breaking announcements to
attendees).
For a field service app, you might decide to use the camera (to take photos of questionable
parts and send them back to the office for review), QR code scanning (so that service techs
can scan QR codes printed on parts of the machine theyre working on to jump to web
pages with repair information for those parts), and so on.
Some additional things will emerge from the function list, such as the need for internet
access if you have to get data into a database, and the need for the app development tool to
support local storage in cases where theres no internet access. (Local storage stores data
on the mobile device when theres no internet access, then transfers the data to the
database when internet access becomes available).
Aesthetic Design
A DIY app may not be an artistic masterpiece - there probably wont be time to make it
one - but it should be attractive to look at and pleasant to use because users may compare
it to other apps. Take time to look at apps in the App Store and Play Store that are similar
to the app you want to create to see what aesthetic aspects of those app you like and dont
like.
Remember that you have about the same amount of space as a big sticky note. (But
remember to consider the differences in aesthetics and screen space if your app will on
tablets as well as phones.) Keep the interface simple and minimize:
Typing - Virtual keyboards are hard to use if people have large hands. The keyboard can
also cover other objects on a page.
Scrolling - Minimize it. Group related items on one page and use clear page transitions if
related items scroll or extend onto another page. The page below, for example, is from the
motorcycle record maintenance app mentioned earlier. This page let users enter
information about tire and brake servicing.

The app let users enter a lot more tire and brake servicing information. It was possible to
fit all the additional entries on one page in portrait (vertical) mode, but the formatting
would have been cramped at best and ruined if a user rotated the phone to landscape
(horizontal) mode.
The solution was to add a second page and split the tire and brake service entries between
the pages. Users could tap the Continue Entry button at the bottom of the first page to
display the second page, shown below, where they could make the rest of the entries.

Excess space usage due to wrong assump- tions - The three screens below show this.
The first shows a data entry page with a Home button at the bottom of the screen, below
the Save button. The assumption is that users will make one entry on this page and
return to the Home page, so the Home button should be below the Save button since thats
the direction in which the users eyes are moving.
Note - The next three images show a feature that looks different in the latest version of
ViziApps. However, I used the older look because it so nicely illustrates the point that Im
making here.

But users might want to make a second entry on this page, so having the Home button
where it is may not be appropriate. The space used for a standard take me home feature
might also be better used for other things. Based on that, the screen below shows the
revised page with the Home button moved to the upper left corner of the screen.

Thats better; it frees up space at the bottom of the page. But theres still a problem with
this approach - the need to translate the word Home if the app will be used by non-English
speakers. Instead, you can replace the word Home with a graphic that implies home, like
the example below.

Usability
Consider the physical context in which users will use the app. Its hard to get too specific
because apps are so different but, for example, consider these issues:
Number of hands available - Will users have two hands free to use the app or one? If
theyll have two, your range of design options is open. However, if theyll only have one
hand free, buttons will have to be larger than they will for a two hands-free app and placed
differently on the screen to take into account range of motion.
Distractions - What distractions might people face as they use the app? Will they have
long periods of time to use the app or just a few seconds, like an app used in a car but only
while stopped at a red light.
Size of fingertip vs. mouse pointer - Will your app be used on its own or might it be used
interchangeably with full-sized web pages? If the latter, might your users have trouble
with small buttons and virtual keyboard keys? Will buttons or fields have labels or
captions that fit nicely on a full-sized web page but have to be shortened to fit onto or next
to the same button on the app page?
Provide feedback for user actions - If the user makes some entry in the database, provide
feedback using an alert (a feature) to return a message saying Message received.
Without that feedback, users wont be sure whether the entry was received unless they
check it in a separate step.
Consider adding help for complex apps - Its usually taken for granted that apps are
so simple as to not need help but this may not always be true. For example, an app may be
mechanically easy to use but require users to have some background knowledge, called
domain knowledge, to use the app correctly or effectively. You might add that
knowledge to the app in separate pages or create it as a separate app or even a separate
web app (Introduction to Web Apps on page 251) to which the main app is linked by a
Help button on each pages title bar.

Paper Prototyping
Before launching your DIY tool and starting to create your app, prototype the app first.
You may think that youve worked out the flow and design in your mind, but creating a
prototype can reveal overlooked holes and unwarranted assumptions.
Prototyping can be a complex and iterative process, but DIY app creation should be rapid
and so should the prototyping. In this section, Ill introduce rapid prototyping on paper.
Why not prototype using your DIY app tool? Because youll go through several design
passes during the first stage of roughing out the app and paper is cheap and can be thrown
out without guilt or remorse. However
There is a school of thought that says to use your DIY tool itself as a prototyping tool.
This will be slower than paper, especially if you get bogged down in nitpicky color and
font selection, but the results will certainly be better looking. There doesnt seem to be an
answer to this question other than your own preferences.
You can simply grab a pad and start prototyping, but the results can be messy because
there are no constraints on things like the number of buttons or fields you put on a page or
the size of the text. A template can help. You can easily create a template in Word, or copy
and use the one on the next page, which I created in Word. Its purpose is to force you to
work in roughly the same amount of room that youd have on an iPhone or Android phone
and to help you lay out the page objects by providing the grid lines.

If you copy the template page, use the white space to write down the object names,
navigation information, and other details needed to lay out the app. You can also copy the
template pages, cut out the simulated page sections, and use them to simulate the actual
use of the app.

Paper prototyping isnt a complete answer but it is a cheap and fast technique and thus
perfect for DIY apps.

4 - ViziApps Page Elements

Design Screen
The Design screen is where youll do much of your ViziApps work. Youll use this screen
to create and manage your apps and create and lay out your apps pages. The image below
shows the entire design screen. Later sections in this chapter discuss specific parts of this
screen in more detail.

Heres a summary of the elements of the Design screen.

In the upper left is a Select App Properties dropdown that lets you set properties like page
transitions, add a background image, add a navigation bar at the top or bottom of each
page, setup push notification properties, and more. Youll find more information in the
App Properties section (Select App Properties on page 71).
Below the Select App Properties dropdown are the canvas editing options that let you
copy, paste, and delete fields, change their stacking order on the canvas, and invoke a
snap-to-grid to help position objects on the canvas. Youll find more information in the
Canvas Editing Options section (Canvas Editing Options on page 84).
To the right of the canvas editing options are the canvas field options that let you add
features like labels, text boxes, images, buttons, tables, charts, a camera, and more. Youll
find more information in the Canvas Field Options section (Canvas Field Options on
page 87).
To the right of the canvas field options is the canvas itself. This is where youll lay out the
fields that make up the screens in your app. Youll find more information in the Canvas
section (Canvas on page 90).
In the upper right are the app selection, preview, validation, and testing options. These
options let you create a new app, select an existing one to work on, validate your apps
fields, open the app in a preview mode on the screen, or send the app to the ViziApps app
for live preview on your phone. Youll find more information in the App Selection,
Validation, Preview, and Testing section (App Selection, Validation, Preview, and Testing
Options on page 92).
Below the app selection options are the app page options. These options let you manage
individual app pages, move between pages, save changes to a pages fields, and access the
data management options for a page. Youll find more information in the App Page
Options section (App Page Options on page 97).

Below the app page options is the storyboard. This feature lets you view a storyboard of
all the pages in the app and identify fields, navigate between pages, and print the
storyboard for review offline. Youll find more information in the App Storyboard section
(App Storyboard on page 100).






Select App Properties
The Select App Properties dropdown lets you define major app properties and global
features and predefine elements of other features like NFC (Near Field Communication)
and push notification.

App Description
This option displays the Set App Description dialog box, shown below, where you can
type a description of the apps purpose.

Set the Page Transition Type for the App

This option displays the Set Page Transition Type for App dialog box, shown below,
where you can select from nine different transition effects to run as users move between
pages in the app.

Set Main Design Type for App

This option displays the Set Main Design Type for App dialog box, shown below, where
you can select a primary device type for the app.

This setting configures the canvas for the device. For example, heres the canvas for the
design type set to iPhone.

And heres the same app with the type set to iPad.

Warning - You can change the primary design type from small to large, such as from
iPhone to iPad. However, you cant change from large to small, such as from iPad to
iPhone, because larger layouts may not scale well on small screens. Also, if you change

the design type from small to large, you cant change back. If you do change the design
type from small to large and want to revert, you have to select a backup by clicking the
Restore Archived App button and selecting the most recent archived version before you
changed the design type. If you know that you may want to change the design from small
to large, make a copy of the app, give it a unique name that indicates its target (such as
myapp for phones), and make that one your not-to-be-changed master.
App Background Image
This option displays the Set ViziApps Background dialog box, shown below, where you
can set your apps background color from a predefined set of options or upload your own
custom image.

To select from the predefined options, drag the slider until the desired design is centered
on the screen and click on it.
To upload your own image, click the Upload button and select the image on your PC.
Custom images must be in JPG with dimensions of 320 px wide by 460 px high.
Tip - Its easy to switch the background image at any time during a project. Because of
this, you may want to use a grid image to help position screen fields but dont want to use
the built-in snap-to-grid feature because you want to position fields manually. If so, you
could create a grid background image like the one shown below.

You could then make it the background image during development while you position the
fields and replace it with the real background image at the end of the project.
App Navigation Bar

This option displays the App Navigation Bar dialog box, shown below, where you can
define a navigation bar to appear on some or all pages of your app. Heres the App
Navigation Bar dialog box.

Before getting into the details of this dialog box, lets see what a navigation bar looks like.
Heres a page without a navigation bar:

Heres the same page with two controls on a navigation bar at the top of the screen. It
works but the page title is interfering with the buttons

so heres the same page with the navigation bar at the bottom.

Heres the App Navigation Bar dialog box again.

Bar Position icon - Clicking this icon moves the bar between the top or bottom of the
screen.
Add a Navigation Item button - The dialog box opens with the necessary fields for
adding one item to the navigation bar. If you want to add additional items, click the Add a
Navigation Item button to add another set of fields for the new item.
List Pages - To exclude the navigation bar from certain pages, type their names in this
field. Separate multiple names with commas.
Navigation Bar Items - For each bar item, type an ID. (The ID must begin with a letter. It
can contain any letter or number, but no punctuation or spaces. Use underscores instead of
spaces for greater readability.) Type a title (that displays on the bar so keep it short). Click
the Pick button to select an icon from the built-in palette or click the Upload button to use
one of your own (30 px high by 30 px wide, GIF, JPG, or PNG format). The icon will
display in the Icon box.
Save - To save your settings.
Remove Nav Bar - To delete your navigation bar.
Custom HTML Header
This option displays the Set Custom Header HTML dialog box, shown below, where you
can add custom HTML code or Javascript to your apps page to add functionality. (The
screen is so wide that its shown here split into left and right portions.)

Clicking the Help icon, the question mark, in the upper right corner of the screen, opens a
web page that introduces the use of Javascript in the app header and gives a range of
predefined examples of features that are not in the ViziApps Studio interface itself, such as
running Google Analytics or controlling a users phones accelerometers, and other
features that you might not even have realized you could do, such as converting a GPS
value to a street address or making the users phone vibrate.
Clicking the Reference button below the Help icon opens a web page with syntax
instructions to incorporate your own custom Javascript into a header.
Note - Javascript isnt necessary for many apps. If you want to incorporate Javascript in
your app, you can work with a programmer or read any of a wide number of books
available on the subject.
Setup Push Notifications
This option displays the Setup Push Notifications dialog box, shown below.

Youll find more information in the Push Notification section (Push Notification on
page 218).
Setup Near Field Communications
This option displays the Setup Near Field Communications dialog box, shown below.

See http://diymobileblog.blogspot.com/ for information.

URL Account Identifier

This option displays the Set Account Identifier dialog box, shown below. If youre
creating a web app, your app will be hosted by ViziApps under a ViziApps-generated
URL. This dialog box lets you customize that URL to make it more friendly or businessspecific, such as bestbbq. If youre creating a hybrid app, ignore this feature.

Canvas Editing Options
The image below shows the canvas editing options.
Most of the options, like copy, paste, and delete, will be familiar from
Word or, like Bring To Front and Send To Back, familiar from
PowerPoint. Edit Field opens the properties dialog box of whatever
field youve selected on the canvas, equivalent to double-clicking on
the field.
The Snap to Grid option merits a few more words.

When you add fields to the canvas to create an app page, you need to get them in the right
position. You can do so by eye, or by creating a graphic of a grid and using it as the
background image during development (see App Background Image on page 75). But
you still have to align the fields to the grid lines by hand in the latter case.
Snap to Grid is similar to the grid background option except that it snaps the fields to the
grid lines automatically. You can set the size of the grid line spacing, such as defining a 10
px grid, 5 px, etc. Heres an example with the snap feature off.

The button caption on the left reads Snap to Grid, indicating that the feature is not
selected. The Add New buttons properties popup shows an X value of 83 and a Y value of
114.
If you turn the snap to feature on, heres the result.

The button caption reads No Snap, indicating that the feature is on. The Add New
buttons properties popup shows an X value of 70 and a Y value of 120. In other words,
the snap feature is using a 10 px grid, the default.
To change the grid size, click the grid size control icon on the right side of the Snap To
Grid/No Snap button. This opens the Edit Grid Size dialog box, shown below, where you
can change the grid spacing.

Canvas Field Options

The field options let you add features to an app page. All except HTML Panel, GPS, Alert,
and Hidden Field are visible to users. Those four are more programmatic.

The table below introduces each field. For full details about each field and other features,
see the More ViziApps Features chapter.
Use this
field

To add

HTML Panel Web page-like content to an apps pages.

Label

A static text label, such as a page title or text entry field title.

Text Field

A one-line text entry area.

Text Area

A multi-line text entry area.

Image

A graphic.

Button

A button with a text label.

Image
Button

A graphic as a button

Switch

An on-off, yes-no control in the form of a sliding switch.

CheckBox

An on-off, yes-no control in the form of a check box,

Table

A table with 1+ columns.

Note - These are not true columns. Instead, each column 2 item displays below its corresponding
column 1 item.

Picker

A rolling barrel with 1+ drums.

Note - The picker is an iPhone feature. If you add a picker to a page but generate Android output, the
picker renders as a dropdown list.

Slider

A slider that users can drag to select a value between a minimum and maximum set by the developer.

Camera

A camera that users can tap to take a photo.

GPS

A latitude/longitude setting that you can then use with other features.

Alert

A message when some task has been completed, such as a thank you for your entry message. Users tap
an OK button on the alert message to close the message.

Hidden Field A field used to store a value for further processing by another ViziApps feature.

Canvas
The canvas is the Design screen working area where you lay out the fields for pages in the
app. The image below shows the upper part of the canvas (the lower part is empty except
for a simulated iPhone home button).

Two notes about the canvas.

When you hover over a field on the canvas, ViziApps shows the coordinates of its upper
left corner and its dimensions, both in px. For example, in this image:

The Add New buttons upper left corner is at 86 x 118 and its width and height are 144
and 25. This information is useful if youre creating several buttons and want to make
them the same size or want a standard alignment and separation for several buttons.
Moving and resizing a field is Windows standard. To move a field, put the pointer on the
field. When the pointer turns into a four-headed arrow, drag. To resize a field, put the
pointer on any edge or corner of the field. When the pointer turns into a two-headed arrow,
drag.

App Selection, Validation, Preview, and Testing Options

These options, shown below, let you select an app to work on, validate the fields in the
app, or test the app on your PC and live on a smartphone. Live testing is unique to
ViziApps in this market segment.

The Current App field lists the app youre working on. Clicking the pulldown lists all the
apps created under your login and password. Just select the app that you want to work on
from the dropdown.
The options to the right of the Current App field let you create a new app based on a
template, create a new app from scratch, rename or duplicate the current app, convert the
current app from hybrid to web mode or the reverse, and delete the current app.
If you select the Add a Template App option, the Add a Template App window opens,
shown below.

You can pick from various predefined templates that use various combinations of
ViziApps features. You can also refer to a template to see how a particular feature was
implemented.
If you select the Create a New App option, the New App dialog box, shown below, lets
you create the new app from scratch.

The fields are self-explanatory except for the hybrid and web app type options. The
Speaking the Language section explains the differences (Speaking the Language of
Mobile on page 30).
The Select App for Testing and Preview App buttons provide two ways to test your app.
The Preview App button runs the app in a window on your PC, shown below, that can
simulate most features in the app.

Clicking the Show App Design button takes you back to the regular Design screen.
The PC-based preview is quick and reliable but has three drawbacks common to such
previewers. First, it cant run features that require having a real phone. Second, it uses the
full power of your PC - a more powerful processor and more memory than a real phone.
Finally, it doesnt suffer from network delays. So its fast but not entirely realistic. The
solution to these problems is the Select App for Testing button.
The Select App for Testing feature lets you run your app live on a real iOS or Android
phone or tablet by running it in a ViziApps app that acts as a previewer. You see the app
running, with live features and real network delays, for a realistic preview. To use it, just
download and install the free ViziApps app on your phone. (Go to the App Store or Play
Store and look for the ViziApps app, with the icon below.)

Once you click the Select App for Testing button and launch the ViziApps app, youll see
a ViziApps splash screen followed by your full app, live.
The Validate References button checks for duplicate field names.

App Page Options

The app page options, shown below, let you display, edit, and save pages, access the data
management features for each page, and, restore an archived app.

The App Page field dropdown lets you select a page to edit. (You can also select a page to
edit by clicking on it in the storyboard.)
The options to the right of the app page field let you create a new page, rename or
duplicate an existing page, display the next or previous page, move the currently displayed
page up or down in the stack of pages, and delete the currently displayed page. These
options should be straightforward except for the option to move a page up or down the
stack. The top page in the stack is the one that displays when a user opens the app. The
positions of the other pages have no effect on the processing so you can put them in
whatever order helps you understand the structure of the app.
Note - You can declutter your app pages by creating pages that are not accessible by the
users - orphan pages - and whose purpose is to hold hidden fields. There are two schools
of thought about this idea. See the section on hidden fields (Hidden Fields on page 185).
The Two Smart Page options are a new addition since the book was written. Look for
information about them in the blog.
The Save button saves any changes to the currently displayed page. Youre working in the
cloud, so save often.
The Manage Page Data button displays the Manage Page Data screen for the currently
displayed page. This means that each app page can use data from a different source. This
is covered in detail in the chapter on Connecting the App To the Database.
The Restore Archived App button lets you go back to an earlier version of the app if you
make a major mistake or the app gets corrupted for some reason. ViziApps creates an
archived version of the app when you click the Save button.

App Storyboard
The storyboard, shown below, lets you see all pages in your app, display a page on the
canvas, find the internal (programmatic) name of a field, see how a field connects to a
different page, and output the storyboard as a PDF for review or annotation.

To see all the app pages, scroll down the storyboard.

Note - If you have many pages, youll have to scroll down the ViziApps Studio window
itself as well.
To select a page to display on the canvas, click on it on the storyboard. This is equivalent
to clicking on the page on the App Page field dropdown.
To find the internal name of a field, display its page on the storyboard and hover over the
field names to the right of each screen image. As you hover over a field name, that field is
outlined in red on the storyboard, as shown below where the page title field Lead Manager
is outlined in red.

Note - Field names on a beige background have a programmatic function in the app. Field
names on a blue background are static.
To see how a field connects to another page, hover over the field name. Its highlighted in
red, the target page is highlighted and a red line connects the field and the target page, as

shown below for the Add New button on home_page that links to add_prospect_page.

To output the storyboard to PDF, click the Download App Design as PDF File button and
save the PDF.

Hands-On - Create the Sample Apps Screens

This is the first of three hands-on sections where you will create the pages for a new app, a
sales prospect tracking app for use at trade shows. Trade shows are a distracting
environment so the app must be easy to use. The app will have three pages:
1. A home page.
2. An add a prospect page where you can enter basic lead information.
Office staff can review the information by opening the database.
3. A show all prospects page where you can see the new leads on the phone
rather than having to open the database like the office staff. You wont have as
many options for processing that information, but accessing the information on
the phone is convenient if youre on the road.
When you finish this three-part exercise, youll have a working app thats complete except
for being published to the App Store or Play Store and that could be used in the real world.
Note - ViziApps is cloud-based software and uses Google Drive for this exercise, which
means that some of the steps may go out-of-date. Every effort will be made to keep the
steps up-to-date and publish corrections in the blog, but the occasional change may sneak
through. Please contact nperlin@nperlin.cnc.net if you find an inaccurate step.
Hardware/Software Requirements

A PC or Mac running an up-to-date browser.

An iPhone 5, 4S, or 4 running iOS 5 or higher, or an Android phone running Android
4.0.4 or higher.
Note Contact me at nperlin@nperlin.cnc.net if you need help determining what OS you
have.
Create a Google Account
If you dont already have one.
1. Start your browser and go to

http://drive.google.com/.
Youll go to a Google Drive page.
2. Click the button to sign up. The Create an Account page displays.

Note - If you created a GMail account recently, you may already have
a Drive account since Google creates one automatically with a GMail
account.
3. Follow the on-screen instructions. (Make a note of what email

address and password you used.)

Create a Gmail Account
If you dont already have one.
1. Open another browser window and go to

http://mail.google.com/mail/help/open.html.
Youll go to a Welcome page.
2. Click the Create an Account button. The Create a New Google

Account page displays.

3. Fill out the fields. Make a note of your username and password.
4. When you finish, your account should be created immediately.

Create a ViziApps Account

If you dont already have one.
1. Start IE9+, Firefox, or Chrome, type
www.viziapps.com
in the URL field, and press Enter. The Viziapps page opens.
2. Click the Create Account button in the top right corner of the page. The
Create My Account page opens.
3. Type your first and last name, with no spaces, in the Username field. This is
your Viziapps user name. Make a note of it somewhere prominent.

4. Type a 6+ character password in the Password field. This is your Viziapps

password. Make a note of it somewhere prominent.
5. Retype the password in the Confirm Password field.
6. Fill out the other fields and follow the instructions on the screen to create
your account.
Install the Viziapps App
Its free.
1. Start your smartphone and go to the App Store (iPhone) or Play Store
(Android).
2. Find and install the Viziapps app, with this icon
These instructions are accurate as of January 2014 but software changes. Contact
nperlin@nperlin.cnc.net if any instruction is incorrect.
Note that youll perform some of the tasks that follow on your PC and others on your
phone, as indicated by the instructions.
On your PC Start ViziApps
Try to do this exercise in one pass and time yourself to start working out metrics for how
long you might need to create your real app.
1. Open a browser and go to www.viziapps.com.
2. Click the Login link at the upper right corner of the screen.
3. Type your username and password in those fields and click the Login
button. The Design screen opens.
On your PC Create the raw pages for the new app
1. Click the Create New App icon at the right of the Current App field. The
New App screen opens.
2. In the Application Name field, type Lead Manager.
3. Open the Designed For pulldown and select iPhone 5 or 4 or Android
Phone, depending on which one you have.
4. Open the App Type pulldown and select Hybrid App.
5. In the Application Description field, type Expo leads.
6. In the First Page Name field, type home_page.
7. Click the Save button. You return to the Design page.
Add the second and third pages
1. Click the New Page icon to the right of the App Page field. The New Page
dialog box opens.

2. Click in the field, type add_prospect_page, and click Save.

3. Click the Save button to the right of the canvas.
4. Click the New Page icon to the right of the App Page field. The New Page
dialog box opens.
5. Click in the field, type view_prospect_page, and click Save.
6. Click the Save button to the right of the canvas.
Lay out the home_page
1. Click the App Page pulldown and select home_page.
2. Click the Label button. Its Properties dialog box opens.
3. In the Internal Label Name field, type app_title.
4. In the Label Text field, type Lead Manager.
5. Change the text size to 20 px.
6. Open the Font Color picker and select the yellow chip sixth down in the first
column value #FFFF00.
7. Click the Insert Label button to add the label.
8. Hover the mouse pointer over the label until a box appears around the label,
move the pointer to the lower right corner of the label box until the pointer arrow
turns into a diagonal arrow, and drag left to narrow the field.
9. Drag the label on to the black title bar at the top of the page and roughly
center it.
10. Click the Save button to the right of the canvas.
11. Click the Image button. Its Properties dialog box opens.
12. In the Internal Image Name field, type company_logo.
13. Click the Choose Stock button. The images display.
14. Click the file card image in the sixth row. You return to the Image
Properties dialog box.
15. Click the Insert Image button on the dialog box.
16. Drag and center the image below the label you just added.
17. Click the Save button to the right of the canvas.
18. Click the Button button. Its Properties dialog box opens.
19. In the Internal Button Name field, type add_prospect.
20. Click the Choose Button Color button, then click the dark blue button bar
on the second line.
21. In the Button Label field, type Add New.

22. Open the Font Color picker and select the same yellow.
23. Open the Select action pulldown, click Go To Page, click the Go To Page
pulldown, and select add_prospect_page.
24. Click the Insert Button button on the dialog box.
25. Position the button below the file card image and centered.
26. Click the usual Save button.
27. Click the Button button again. Its Properties dialog box opens.
28. In the Internal Button Name field, type view_prospect.
29. In the Button Label field, type View Prospects.
30. Open the Font Color picker and select the same yellow.
31. Open the Select action pulldown, click Go To Page, click the Go To Page
pulldown, and select view_prospect_page.
32. Click the Insert Button button on the dialog box.
33. Position this button below the first button and centered.
34. Click the usual Save button. Finally
35. You decide to change the background. Click the Select App Property
pulldown and select App Background Image. The Set ViziApps Background
window opens.
36. Drag the slider left to number 15, the blue image with the title bar, and
click it to make it the new app background.
37. Click the usual Save button.
Define the second page
1. Click the App Page pulldown and select add_prospect_ page.
2. Click the Label button. Its Properties dialog box opens.
3. In the Internal Label Name field, type prospect_info_title.
4. In the Label Text field, type Prospect Info.
5. Change the text size to 20 px.
6. Open the Font Color picker and select the same yellow.
7. Click the Insert Label button on the dialog box.
8. Narrow the label box like you did in the previous section.
9. Move and center the label on the dark blue title bar.
10. Click the usual Save button.
11. Click the Label button. Its Properties dialog box opens.
12. In the Internal Label Name field, type prospect_name_label.

13. In the Label Text field, type Name.

14. Open the Font Color picker and select the yellow.
15. Click the Insert Label button on the dialog box.
16. Narrow the box and position the label below the title and near the left
margin.
17. Click off the label to deselect it.
18. Click the Text Field button. Its Properties dialog box opens.
19. In the Internal Name field, type prospect_name_field.
20. Leave the Select Type of Field set to Text.
21. Click the Insert Text Field button.
22. Position the new text field to the right of the Name label.
23. Click the usual Save button.
24. Click off the text field to deselect it. If not, you may accidentally overwrite
it.
25. Click the Label button. Its Properties dialog box opens.
26. In the Internal Label Name field, type phone_label.
27. In the Label Text field, type Phone.
28. Open the Font Color picker and select the yellow.
29. Click the Insert Label button on the dialog box.
30. Narrow the box and position the Phone label below the Name label.
31. Click the Text Field button. Its Properties dialog box opens.
32. In the Internal Name field, type phone_field.
33. Click the Insert Text Field button.
34. Position the Phone text field below the Name text field.
35. Click the usual Save button.
36. Click on the background to deselect the text field.
Now add a picker
Note - The rolling drum iPhone picker displays as a dropdown on Android.
1. Click the Picker button. Its Properties dialog box opens.
2. In the Internal field, type project_type.
3. In the Section Name field, type project_type_ definition.
4. In the Item List box, type App, Site, and ebook, pressing Enter after the first
two.

5. Click the Insert Picker button. The picker/drop-down displays on the canvas.
6. Drag the picker below the Phone label and text field and center it.
7. Click the usual Save button.
Now add a Save (the entry) button.
1. Click the Button button. Its Properties dialog box opens.
2. In the Internal Button Name field, type save_info.
3. In the Button Label field, type Save.
4. Open the Font Color picker and select the yellow.
5. Open the Select action field pulldown and click Get or Send Device Data.
6. Click the Insert Button button.
7. Drag and center the button near the bottom of the screen.
8. Click the usual Save button.
Now the Home button
This lets users return to the home screen with one click.
1. Click the Image Button button. Its Properties dialog box opens.
2. In the Internal Button Name field, type home_button_1.
3. Click the Choose from button. The stock images display.
4. Scroll down to the color buttons and click the leftmost button on row six.
5. Open the Select action pulldown, click Go To Page, and select home_page.
6. Click the Insert Button button.
7. Drag the button up to the left of the Prospect Info page title.
8. Click the usual Save button.
Finally, add feedback to the users
This will tell users that their entry has been successfully added to the database.
1. Click the Alert button. Its Properties dialog box opens.
2. In the Internal Alert Name field, type confirmation. This is the name of a
message youll specify in the database.
3. Click the Insert Alert button. An orange triangle and white exclamation
point icon appears at the bottom.
4. Click the usual Save button.
Define the last page
1. Click the App Page pulldown and select view_ prospects_page.
2. Click the Label button. Its Properties dialog box opens.

3. In the Internal Label Name field, type prospects_title.

4. In the Label Text field, type Prospects.
5. Change the text size to 20 px.
6. Open the Font Color picker and select the same yellow.
7. Click the Insert Label button on the dialog box.
8. Narrow the box around the label.
9. Center the label on the dark blue title bar.
10. Click the usual Save button.
Now add a table in which to display the prospects.
1. Click the Table button. Its Properties dialog box opens.
2. In the Internal Table Name field, type prospects_list.
3. In the Table Display Name field, type Prospects.
4. Open the Select Table Row Type pulldown and select 2 text fields.
5. In the Enter 2 Field Names field, type name,projecttype. These are the
names by which you refer to the individual fields within the table when passing
data between the database and the table.
6. Open the Select actions pulldown and select Get or Send Device Data
7. Click the Insert Table button.
8. Click the usual Save button.
Now the Home button
1. Click the Image Button button. Its Properties dialog box opens.
2. In the Internal Button Name field, type home_button_2.
3. Click the Choose from stock button. The stock images display.
4. Scroll down to the color buttons and click the leftmost button on row six.
5. Open the Select action pulldown, click Go To Page, and select home_page
from the Go To Page field.
6. Click the Insert Button button.
7. Drag the button to the left of the page title.
8. Click the usual Save button.
9. Click the Select App For Test button in the upper right corner of the Design
page.
On Phone Preview the rough app
1. Start the ViziApps app on your phone. After a few seconds, your app opens
on the phone.

2. Try the Add New and Home buttons. Note that the Save button doesnt do
anything because you havent created and linked to the database yet. Well fix
that shortly.
3. Return to your phones main screen.
4. Log out of ViziApps on your PC.

5 -The Database
ViziApps Data Source Options
One of ViziApps most powerful features is the range of data source options it supports
and the flexibility with which you can use them. The options are:
Google Drive spreadsheet - To use a Google Drive spreadsheet as a database. (Google
renamed Google Docs to Google Drive a few years ago.)
Note - Google Drive spreadsheets are powerful, but they do have limitations that may
make them unsuitable for very large databases. See
https://support.google.com/drive/answer/37603?hl=en

for information on size limits and possible performance effects.

ODBCcompatible databases - To use a database like MySQL or SQL Server. (ODBC is
Open DataBase Connectivity, a standard programming language API (Application
Programming Interface) or bridge for accessing different database manage-ment systems.)
Salesforce.com - To use Salesforce.coms cloud-based force.com to create apps for use in
the Salesforce.com space. If you are a Salesforce.com user, this option is worth
investigating because it can support larger spreadsheets than Google Drive, and support
end-users having individual accounts with roles and permissions, that Google Drive
spreadsheets cant handle. You can start at
http://www.force.com/why-force.jsp.
QuickBase - To use Intuits web-based QuickBase database software. If you are a
QuickBase user, this option is worth investigating because it can support larger
spreadsheets than Google Drive, and support end-users having individual accounts with
roles and permissions, that Google Drive spreadsheets cant handle. You can start at
http://try.quickbase.intuit.com/.
Web services - From Wikipedia (http://en.wikipedia.org/wiki/Web_service), A Web
service is a software function provided at a network address over the web or the cloud; it
is a service that is always on as in the concept of utility computing. Another way to
think of web services is as predefined functions available over the web that can be
integrated to provide some sort of service, such as shopping cart and checkout web
services that can be used together to operate an ecommerce web site.
This book focuses on the Google Drive spreadsheets option because its the simplest,
simple enough to be used by non-programmers. (If you use Excel, you already have much
of the background needed to use Google Drive spreadsheets as the data source for your
app.) Yet in spite of that simplicity, the spreadsheet is a surprisingly powerful option that
should work for most apps that dont need high security for transaction processing.
Finally, ViziApps offers tremendous data handling power because it lets you use data from
multiple data sources on each page in your app.

Google Drive Overview

Google Drive is a free, web-based tool suite from Google. It includes document,
presentation, spreadsheet, form, and drawing modules. Heres an image of the main screen
with nothing open.

The screen lists eight spreadsheets, two documents, and two presentations. Clicking the
red Create button in the upper left opens a dropdown menu where you can select a new
type of file to create, as shown below:

Google Drive lets users work in the cloud and collaborate in real-time with other users.
Its supposed to run on any commercial platform under any modern commercial browser.
If this sounds like a cloud-based version of Microsoft Office, it is. Drive competes with
Microsoft on turf thats been almost exclusively Microsofts for years.
Note - The suite was first called Google Docs before being renamed Google Drive a few
years ago. If you originally used Google Docs, you can still access it by using
http://docs.google.com as the URL but youll be redirected to https://drive.google.com

Google Drive Spreadsheets As An App Database

Using a Google Drive spreadsheet as your app database is similar to normal spreadsheet
use except you wont be doing calculations. Instead, youre using the spreadsheet as a data
repository. Heres an example of a simple spreadsheet:

Worksheets
You can subdivide a spreadsheet into separate worksheets to organize your data for easy
work with your app and make the spreadsheet easy to read.
An app with simple data can use a single worksheet. More complex apps can use multiple
worksheets to hold different types of data. You can add as many worksheets as you can
keep track of (but see
https://support.google.com/drive/answer/37603?hl=en

for the limits as to the number of total worksheets.)

For example, the spreadsheet shown on the previous page has two worksheets named
prospects and messages. The names are on tabs at the bottom of the worksheet, shown
below. (Youll create this spreadsheet in the exercise at the end of this chapter.)

The prospects worksheet contains the real app data, in this case name, phone, and area-ofinterest information for prospects that you meet at a trade show. The entries in this
practice worksheet look like this.

The messages worksheet contains processing data used in the app, in this case to control
the wording of an alert message that displays when users enter and save the information

for a new prospect. The entries in this worksheet look like this.

Chapter 6 explains what these entries mean.

To add a worksheet to a spreadsheet, click the + icon in the lower left corner of the
spreadsheet screen. This adds a new worksheet with a generic name like Sheet3. Be sure
to change this to something meaningful. To do so, click the dropdown arrow on the
worksheet tab to display the worksheet options, as shown below, and use the Rename
option.

Note - Give every spreadsheet you create a unique name. This isnt required. However,
when you list your spreadsheets in Google Drive in order to select one to use as an app
database, Google will list all your spreadsheets. If they dont have unique names, you
might see three spreadsheets named Lead Data and not know which one to pick.
Database Conventions When Using Spreadsheets
There are a few simple terms and conventions to be aware of when using a spreadsheet as
a database for an app. See the image below for illustration.

A column in a spreadsheet or worksheet is a field in the app. So the app thats using this
worksheet has three fields called name, phone, and projecttype.
Field names are in the first row of each column - the field names name, phone, and
projecttype are all in row 1
Field names must be in lower case, with no spaces in multi-word labels like project
type, which must be entered as projecttype.

A collection of fields makes up a record. Field values are contained in rows 2 and down.
So the entry with the name value John Doe, phone value 9876543210, and projecttype
App is a record.
Spreadsheet Access Control
When you create a new Google Drive spreadsheet, access to that spreadsheet is initially
restricted to you. In order to let your app users read data in that spreadsheet for display in
the app, or write data in the app to be passed to the spreadsheet, you have to unrestrict the
access. This is a simple process.
Click the blue Share button in the upper right corner of the spreadsheet page. This opens
the Sharing Settings dialog box, shown below.

Click the Change link. This opens a second Sharing Settings dialog box, shown below.

Change the Visibility option from Private to Public on the Web.

Note - You can keep the spreadsheet private if you absolutely want to prevent its being
changed except through the app or by a few specific users to whom given permission.
Open the pulldown for the Access option and select the Can Edit option. Thats it.

Hands-On - Create the Google Drive Database

This is the second hands-on section. Here, youll create the database for the practice app,
in this case a Google Drive spreadsheet.
ON PC Create the database
In practice, consider the structure of your data in the app before creating the spreadsheet
and create a similar structure in the spreadsheet to simplify development. Try to use
similar internal field names in the app and in the spreadsheet to simplify field mapping.
1. In your browser, go to http://drive.google.com. The Google Drive screen
opens.
2. Log in with your Gmail account and password if youre not already logged
in.
3. Click the Create button in the upper left and select Spreadsheet. A blank
spreadsheet opens in a new window.
4. Maximize the browser window.
5. Select File > Rename. The Rename Spreadsheet dialog box opens.
6. Change the name to Project Tracking Spreadsheet and click OK.
7. In cells 1A - 1C, type field names name, phone, and projecttype in lower
case, no spaces.
8. In cells 2A - 2C, type John Doe, 9876543210, and App.
9. In cells 3A - 3C, type Jane Public, 7894561230, and eBook.
10. In cells 4A - 4C, type Sue Smith, 5558881212, and Site. Google saves your
changes automatically youll see the save status to the right of the Help menu
item.
Note - The next four steps arent necessary if you want to keep the database
private in order to prevent general users from modifying it through Google
Drive. In that case, the database can still be modified by people to whom you
expressly give write permissions, and by general users to the extent that your
app allows them to.
11. Click the Share button in the upper right corner of the screen. The Sharing
Settings dialog box opens.
12. Click Change in the Who Has Access section. A second Sharing Settings
dialog box opens.
13. Select the Public On the Web option.
14. Click the Access pulldown, click Can Edit, then click Save. The Sharing
Settings dialog box opens again.
15. Click Done.
Now add a second worksheet to hold feedback messages.

1. Click the + icon at the bottom left to add a new worksheet.

2. In cells 1A and 1B, type type and message.
3. In cells 2A and 2B, type confirmation and Done!.
4. Click on the sheet1 label at the bottom left corner of the screen, click the
pulldown on the label, select Rename, type prospects, and press Enter.
5. Click on the sheet2 label at the bottom left corner of the screen, click the
pulldown on the label, select Rename, type messages, and press Enter. Google
autosaves your changes.
6. Select the prospects worksheet, leave it open, and remain logged into
Google Drive if you plan to get to the last hands-on section on the same day.

6 - Connecting the App to the Database

Registering and Authenticating 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 a button or table row 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 authentication information for the app. You
should only need to do this once for the spreadsheet for a project.
Note that Google can modify processes unexpectedly. This makes it difficult to document
the steps in a book; instead, youll find the instructions in the DIY Mobile blog at
http://diymobileblog.blogspot.com/ and the ViziApps help. (To be notified of updates,
follow me on Twitter at NeilEric.)

Data Management Commands

Insert Into Command
Insert Into lets you move data from a field in an app to a field in the database. For
example, if users enter a name in a Name field in the app, you can move the entry to a
corresponding name field in the database.
Follow these steps:
1. Open the app page containing the object for which you want to specify the
query command.
2. Click the Manage button. The Manage Data page displays.
3. Click the green + sign to the right of the Select a Data Source field. The
Add App Data Source field displays.
4. Click the Add App Data Source field pulldown and select
GoogleDataSource.
5. Click the Select a Page or Field pulldown and select the object for which
you want to specify the insert into command.
6. Click the Add Command button.

7. The query command specification line displays, shown below.

8. Open the query type pulldown and select Insert Into, then open the
worksheet pulldown and select the worksheet into which to move the entry from
the app, shown below.

9. Click the Add a Field icon to the left of the worksheet field. A new
command line lets you specify the app field from which to take data and the
worksheet field in which to enter it. To specify the app field, click on it in the
storyboard and drag it into the From Device field, as shown below.

10. Specify the worksheet field by selecting it from the dropdown, shown
below.

11. Repeat as necessary until youve accounted for all the fields you need for
the action. A simple but real result might look like this.

This example moves a name entry from an app field called prospect_name_field to a
worksheet field called name, a phone number entry from an app field called phone_field to
a worksheet field called phone, and a project type setting from an app field called
project_type_definition to a worksheet field called projecttype.
Select From Command
Select From lets you move data from a field in the database to a field in your app. For
example, users might take client names and phone numbers from corresponding fields in a
database and display them in a table.

Follow these steps:

1. Open the app page containing the object for which you want to specify the
query command.
2. Click the Manage button. The Manage Data page displays.
3. Click the green + sign to the right of the Select a Data Source field. The
Add App Data Source field displays.
4. Click the Add App Data Source field pulldown and select
GoogleDataSource.
5. Click the Select a Page or Field pulldown and select the object for which
you want to specify the select from command.
6. Click the Add Command button.

7. The query command specification line displays, shown below.

8. Leave the query type set to Select From, then open the worksheet pulldown
and select the worksheet that contains the data that you want to display in the
app, shown below.
Note that you can select the Add a Field icon, to the right of the worksheet field,
along with the Add a Where Condition option (Conditions on page 152) and
Add Order By option (See Sorting Queries on page 1).

9. Click the Add a Field icon to the right of the worksheet field. A new
command line asks you to specify the worksheet field from which to take data
and the app field in which to enter it. To specify the worksheet field, select it
from the dropdown, shown below

10. To specify the app field, click on it in the storyboard and drag it into the
From Device field, as shown below.

11. Repeat as necessary until youve accounted for all the fields you need for
the action. A simple but real result might look like this.

This example moves a name entry from a worksheet field called name to an app field
called name and a project type entry from a worksheet field called projecttype to an app
field called projecttype.
You can also apply conditions (Conditions on page 152) to a Select From to control
what items get selected and control the sort order (See Sorting Queries on page 1) in
order to display the results alphabetically.
Delete From Command
Delete From lets you delete the data in fields that meet some condition. For example,
you might specify that users names should be deleted for records whose status equals
inactive.
Follow these steps:
1. Open the app page containing the object for which you want to specify the
command.
2. Click the Manage Data button. The Manage Data page displays.
3. Open the Select a Data Source pulldown and select the desired data
source to use for the page, or click the green + sign to the right of the Select a
Data Source field. The Add App Data Source field displays.
4. Click the Add App Data Source field pulldown and select the desired data
source.
5. Click the Select a Page or Field pulldown and select the object for which

you want to specify the delete command.

6. Click the Add Command button.

7. The query command specification line displays, shown below.

8. Open the query type pulldown and select Delete From Into, then open the
worksheet pulldown and select the worksheet into which to move the entry from
the app, shown below.

9. Click the Add a Where Condition to the right of the worksheet field. A new
command line, shown below, lets you specify the first condition (you can specify
one or more) to be met in order for the deletion to occur.

10. Use the field pulldowns to specify the field values and type the condition
status name in the text box, such as the example shown below.

A simple but real result might look like this.

This example deletes any prospects from worksheet if their status is inactive, and displays
an alert message confirming the deletion.
Update Command

Update lets you change the data in fields that meet some condition. For example, users
might enter a different status for a customer in a Status field in your app and you want to
use that entry to change the corresponding field in the database for a customer with a
particular customer number or last name.
Follow these steps:
1. Open the app page for which you want to specify the command.
2. Click the Manage Data button. The Manage Data page displays.
3. Open the Select a Data Source pulldown and select the desired data
source to use for the page, or click the green + sign to the right of the Select a
Data Source field. The Add App Data Source field displays.
4. Click the Add App Data Source field pulldown and select the desired data
source.
5. Click the Select a Page or Field pulldown and select the object for which
you want to specify the update command.
6. Click the Add Command button.

7. The query command specification line displays, shown below.

8. Open the query type pulldown and select Update, then open the worksheet
pulldown and select the worksheet into which to make the update, shown below.

9. Click the Add a Field icon to the left of the worksheet field. A new
command line asks you to specify the app field from which to take the new,
updated data and the worksheet field in which to enter it. To specify the app
field, click on it in the storyboard and drag it into the From Device field.
10. Specify the worksheet field by selecting it from the dropdown, shown
below.

11. Click the Add a Where Condition to the right of the worksheet field. A new
command line, shown below, lets you specify the first condition (you can specify
one or more) to be met in order for the update to occur.

12. Use the field pulldowns to specify the field values and type the condition
status name in the text box, such as the example shown below.

A simple but real result might look like this.

This example changes (updates) the value of any entry in worksheet whose status
projecttype status is app to the value in the update_data_field on the device.
Conditions
The conditions feature lets you specify a condition to be met in order for another
command to run. You can specify a condition to be tested before running the command.
This tells the app to run the command if the conditions terms are met and do something
else if theyre not. You can also specify a condition to be tested after running a command,
which tells the app to test the result of the command against the condition and do different
things depending on whether or not the result meets the terms of the condition.
The format of the condition specification varies a little depending on whether you insert it
before or after a command, but its similar either way.
Before a Command
Heres the condition entry line when you insert a condition before a command.

Heres the previous image split into two parts to make them easier to read. First the left
side.

Then the right.

The left hand side lets you specify two device fields whose values you want to compare
and whether they should be equal or not equal. You set the equal/not equal test by opening
the dropdown on the operator field, the = sign, and selecting = or !=.
The right hand side lets you specify what to do if the condition is met or not met. To do so,
select the appropriate icon for then and else. The first icon, Add Then Command,
lets you specify what to do if the condition is met. Clicking it adds a standard data
management command insertion line but prefaced with the word Then, like the one shown
below.

The four command options are described elsewhere in this book.

The third icon, Add Else Command, lets you specify what to do if the condition is not
met. Clicking it adds a standard data management command insertion line like the one
shown above but prefaced with the word Else. Together, the two lines let you specify what
to do if the conditions terms are met or not.
The second icon, Add Then GoTo Page, lets you specify a page to go to or a Javascript
to run if the condition is met. Clicking it adds a command insertion line prefaced with the
word Then, like the one shown below.

The left hand field lets you specify whether to go to a page, in which case the right hand
field lists all the pages in your app, or run a Javascript, in which case the right hand field
changes to a dialog box where you can enter or select the Javascript to run.
The fourth icon, Add Else GoToPage, lets you specify a page to go to or a Javascript to
run if the condition is not met. Clicking it adds a command insertion line prefaced with the
word Else but otherwise like the one above.

After a Command
Heres the condition entry line when you insert a condition after a command, in this case
after a Delete command.

Its similar to the insertion line youd get before a command, except that you can compare
the value in a worksheet field to the value in a device field, and can test the condition for
equal, not equal, less than <, or more than > by selecting from the dropdown on the
operator field. Notice that theres also no Then/Else options when running a condition
after a command.
Device Action
The device action feature lets you make your app go to another app page or run a
Javascript after running a command or when the current page opens. You might use this
feature to run a command, test it against a condition, then take the user to different pages
if the command meets or fails the condition, such as for a login.
Clicking the Device Action button adds a command insertion line like the one shown
below.

The left hand field lets you specify whether to go to a page, in which case the right hand
field lists all pages in the app, or run a Javascript, in which case the right hand field
changes to a dialog box where you can enter or select the Javascript to run, shown below.

Hands-On - Connect the App to the Database Using the Data

Management Commands
ON PC - Link the app to the database
Note - Register and authenticate the API before you start this exercise. Registering and
Authenticating the API on page 138for instructions.
1. Restart Google Drive and open the database if you closed it after the last
exercise.
2. Restart and log into ViziApps if you closed it after the last exercise. The
Lead Manager project will open automatically because it was the last project you
worked on.
ON PC - First, the Save button for a new entry.
1. Open the App Page pulldown and select add_prospect_page. (In practice,
you could select any page that uses spreadsheet or database data to start the
connection to the database.)
2. Click the Manage Data button. The Manage Data screen opens.
3. Open the All App Data Sources pulldown and select GoogleDataSource.
4. Click the Add Page Data Source icon (the +) to the right of the Select a Data
Source field. The Add App Data Source field displays to the right.
5. Open the Add App Data Source pulldown and select GoogleDataSource.
6. Click the Select a Page or Field to Start pulldown and select save_info
(the Save button). The command options then appear.
7. Click the large Add Command button.
8. Open the left field pulldown and select Insert Into to specify the action.
9. Open the worksheet pulldown, which currently shows messages and select
prospects.
10. Click the Add a Field + icon to the right of the worksheet pulldown. A new
field specification appears.
11. Click on prospect_name_field in the storyboard pane on the left and drag it
onto the From Device field.
12. Open the To Worksheet field pulldown and select name.
13. Click the Add a Field + icon to the right of the worksheet pulldown again.
A new field specification appears.
14. Click on phone_field in the storyboard pane on the left and drag it onto the
Device field.
15. Open the To Worksheet field pulldown and select phone.
16. Click the Add a Field + icon to the right of the worksheet pulldown. A new
field specification appears.

17. Click on project_type_definition in the storyboard pane on the left and

drag it onto the From Device field.
18. Open the To Worksheet field pulldown and select projecttype.
19. Click the Save button.
20. Now add the feedback message.
21. Click the large Add Command button.
22. Leave the command pulldown set to Select From.
23. Leave the worksheet field set to messages.
24. Click the Add a Field + icon to the right of this new worksheet pulldown.
A new field specification appears.
25. Open the From Worksheet Field pulldown and select message.
26. Click on confirmation in the storyboard pane on the left and drag it onto
the To Device field.
27. Click the Add a Where Condition icon (the funnel) at the right of the Add a
Field icon. A condition specification appears.
28. Leave the condition type set to Where.
29. Open the field name pulldown and select type.
30. Leave the operator set to =.
31. Click on confirmation in the storyboard pane on the left and drag it onto
the from Device field.
32. Click the Save button.
33. Close the Manage Data screen. You return to the Design screen.
ON PC - Now the View link to see your entries in the table.
1. Open the App Page pulldown and select view_prospect_page. (In

practice, youd simply select the next page or item to be connected to

the spreadsheet or database.)
2. Click the Manage Data button. The Manage Data screen opens.

3. The All App Data Sources field should display

GoogleDataSource.
4. The Select a Data Source field should display (1)
GoogleDataSource.
5. Open the Select a Page or Field pulldown and select
view_prospects_page. Youll see the words (when it shows) after
view_prospects_page. Thats correct. Ignore it here.

6. Click the large Add a Command button.

7. Leave the command pulldown set to Select From.
8. Open the worksheet pulldown, which shows messages, and

select prospects.
9. Click the Add a Field + icon to the right of the worksheet

pulldown. A new field specification appears.

10. Open the From Worksheet Field pulldown and select name.
11. Click on name in the storyboard pane on the left and drag it onto

the Device field.

12. Click the Add a Field + icon to the right of the worksheet

pulldown again. A new field specification appears.

13. Open the From Worksheet Field pulldown and select projecttype.
14. Click on projecttype in the storyboard pane on the left and drag it

onto the Device field.

15. Click the Save button.
16. Close the Manage Data screen.
17. Click the Select App for Test button in the upper right corner of

the Design screen.

18. Display the Project Tracking spreadsheet on your PC.
ON PHONE Preview the app
1. Return to the main phone screen and start the ViziApps app. Your app opens
on the phone and briefly displays a message that the app has been updated.
2. Tap the Add New button, make entries in the relevant fields on the Add
page, and tap the Save button. After a few seconds, youll see the new entry in
the spreadsheet and a Done! message on the phone.
3. Tap OK on the phone screen to respond to the message.
4. Tap the Home button on the app on your phone to return to the home page.
5. Tap the View Prospects button. After a second or two, the table page will
display and list the three original contacts plus any that you added in step 2
above.
6. Close the spreadsheet, close the Viziapps app on your phone, log out of
Viziapps on your PC, and close the browser. Youre done.

7 - Non-Data ViziApps Features

Non-Data ViziApps Features
The Data Management Command section of Chapter 6 described commands that let you
connect your app to data in a database. ViziApps also offers non-data commands that let
you add features like a camera, email, and more to your app. This chapter describes these
commands.

Alerts
This feature, on the Design screen, lets you display a message to the user. You might use it
to display a feedback message confirming that the entries in a data entry page were
successfully written to the database when the user taps a Save button, for example.
Note - See the app templates, the Design Catalog template in particular, for more ideas
about using this feature.
Heres an example, from ViziApps design catalog template.

Heres the alert properties dialog box.

Internal Alert Name is the name by which ViziApps refers to the field programmatically.
This entry is required. Thats the only property.
As the dialog box notes, you can then either call the contents of the Alert field in the
database, by using the Select From data entry command, in response to a user action, such
as saving a field entry, or use Javascript to show the contents of the Alert field. The handson exercise uses the former approach, and the example in the design catalog uses the latter
approach. Lets review the design catalogs Javascript-based approach.
Heres the alert example in developer view.

The hidden field, the white circle at the bottom left, contains the content of the alert. The
hidden fields properties dialog box is shown below.

The Alert, the orange triangle with the white exclamation point, is the mechanism that
displays the alert itself.

Finally, the Show an Alert button pulls all the pieces together. The image below shows the
buttons properties.

The Javascript in the Before the main action section launches the alert and displays the
content of the alertHelp field in Alert format.

Button
This feature, on the Design screen, creates a button with a text label. You might use it to
create a Save button on a data entry page, like the example below.

Note - See the app templates, the Design Catalog template in particular, for more ideas
about using this feature.
Tapping the button writes the field entries to the database.
Heres the button properties dialog box.

Internal Button Name is the name by which ViziApps refers to the field programmatically,
such as btn_save or save_button. This entry is required.
The Choose Button Color button opens a dropdown window listing the button background
color options. Click on the desired color to select it and return to the button properties
window.
Button Label is the text of the button that displays on the page, like Save.
The font options are Word-style options for font, font size, and font color.
Note - The Selected Font Color Value field gives the hex value of the color selected from
the color palette and is informational only. You cant change the hex value in this field.
In the When a User Taps section, select the action to associate with the field from the
list in the Select Action dropdown, shown below. You can also add an optional Javascript
to run before and/or after the action.

Some of these options are self-explanatory. Others are discussed elsewhere in this book.

Camera
This feature, on the Design screen, creates a camera icon like the one shown below, which
also has some minimal instructions created using the HTML panel (HTML Panel on
page 188).

You might use this camera feature to take photos of conference attendees in a trade show
app or houses in a real estate app. One idea from a scrap metal re- cycling company was to
take photos of piles of scrap and upload them to a database. Buyers in the home office
could then review the photos to help them decide how much to bid.
Note - See the app templates, the Design Catalog template in particular, for more ideas
about using this feature.
Heres the camera properties dialog box.

Internal Photo Name is the name by which ViziApps refers to the field programmatically,
such as camera. This entry is required.
The Compression Ratio field lets you set the amount by which to compress the photo
before adding it to the database. You can select any amount from .001 to 1.0. A larger
compression gives a smaller image file size but may reduce the images quality. Try
various settings before picking a standard. Try .5 to start.
Note - The compression ratio setting applies to JPG files. PNGs, which are used for
graphics other than photos, are not compressed.
Note - The term ratio is inverted, so 0.2 is actually 1:5, .001 is 1:1000, and 1 is 1:1. For
a detailed but reasonable discussion of JPG image compression, see
http://en.wikipedia.org/wiki/JPEG#Effects_of_JPEG_compression.
The Automated Thumbnail Saved to Hidden Field lets you automatically create a
thumbnail (reduced size) version of the image and store it in a hidden field for further
processing.
Why use thumbnails? You can use them to provide a quick visual indicator for users, such
as using thumbnails in table listings to visually supplement the text or adding a
thumbnailed photo of each user in a message feed. You might use them to give feedback to
users that a photo was taken correctly, without showing the full-sized image as the

indication. Another reason might be to use a thumbnail as an image button, such as taking
a photo of a check and using the thumbnailed image to create a click on the image of the
check to accept it button.
Note - Create the hidden field before adding the camera. Otherwise, youll have to close
the camera properties dialog box, create the hidden field, then re-open the camera
properties dialog box. Its not a problem, just wasted effort.
Note - If you leave the Automated Thumbnail field blank, ViziApps will not create the
thumbnail of the image.
Thumbnail W and H let you set the thumbnails width and height in pixels. The 60 x 80
setting matches the cameras aspect ratio in portrait mode. Ignore these settings if youre
not creating image thumbnails.

CheckBox
This feature, on the Design screen, creates an on-off, yes-no control in the form of a check
box, as shown below. You might use the checkbox as an alternative to the slider (Slider
on page 224).

Note - See the app templates, the Design Catalog template in particular, for more ideas
about using this feature.
Heres the checkbox properties dialog box.

Internal CheckBox Name is the name by which ViziApps refers to the field
programmatically, such as chkbx_option_a. This entry is required.
Default Value sets the checkbox to checked or un- checked when the page opens. In the
image at the top of this section, for example, the default was set to Checked.
In the When a User section, select an action to associate with the field from the list in
the Select Action dropdown, shown below. You can also add an optional Javascript to run
before and/or after the action.

Some of these options are self-explanatory. Others are discussed elsewhere in this book.

Email
This feature, in the action list available for many features, adds email functionality. Heres
the action list with the email message option highlighted.

After you select the Email message option, you can select from the email properties list,
shown below.

Selecting any property other than Use html format adds the corresponding property
field, shown below for the To email field and Subject field.

You dont type the actual field information - here the email address or subject - in these
fields. Instead, type the name of hidden fields (Hidden Fields on page 185) that contain
these values. That lets you enter hard-coded values in the hidden fields or populate the
hidden fields from the database.
Heres an example of the email feature in author mode.

The white circles are the hidden fields containing the actual values for the email address,

the left field, and the email subject, the right field with its property box open. Doubleclicking a hidden field opens its properties dialog box, as shown below for the right field.

Heres how the finished product looks in an app.

Tapping this button opens a full email screen, shown below.

From here, you can create the message like any other email.
The Use html format option lets you add formatting capabilities to the email.

Hidden Fields
This feature, on the Design screen, adds a field that can contain an entry to be used by
another feature and that users wont see. For example, the image below shows a button
that launches a popup web page and, to the right of the button, a hidden field that contains
the target URL.

Note - See the app templates, the Design Catalog template in particular, for more ideas
about using this feature.
The image below shows the buttons properties.

The action list specifies that this is a popup web page and that the URL is contained in the
hidden field with the name weblink_url1. Double-clicking on the hidden field to the right
of the button opens the hidden fields properties dialog box, shown below.

Internal Hidden Field Name is the name by which ViziApps refers to the field
programmatically, such as weblink_url1. This entry is required.
Set Value To is the value to be used by the other feature that references this hidden field.
The standard is Default Value Below, which uses the value in the Default Value text box,
such as www.viziapps.com in the example above. You can also set the value to Device ID
and use an ID supplied by ViziApps.
The Default Value text box contains the value to be used by the feature that calls this
hidden field. You can also leave this text box empty and use the data management
commands to assign a value to it from the database.

Note - You can declutter your app pages by creating pages that are not accessible by the
users - orphan pages - and whose purpose is to hold hidden fields. There are two schools
of thought about this idea. One says that its better to keep all hidden fields on the app
pages to which they apply to make it easy to find a desired hidden field. Another says that
the orphan page approach is better because it reduces the clutter on the operational app
pages and adds room for explanatory labels for the hidden fields. This seems to be a
matter of preference.

HTML Panel
This feature, on the Design screen, lets you create and format text, images, and links to
add web page-like content to your app pages. The panel offers the same formatting tools
youd find in a typical HTML editor, plus the ability to view your contents code to edit it
or add CSS codes and Javascript. The image below shows the upper portion of the HTML
panel

Here, you enter content and format it by highlighting the text and using the icons on the
panel. Hover over any icon for a popup explanation of its function.
You can enter content by typing it or by copying it from another authoring tool and pasting
it into the panel. If you paste content from a Word document, ViziApps will indicate that
the content contains Word formatting and offer to clean it.
You can spellcheck your content using the AJAX spell checker on the fourth row of icons.
You can also validate your contents code using the W3C XHTML validator on the fourth
row of icons. Using the validator gives a result like that shown below.

Click the x button in the upper right corner of the validation window to close it and return
to the HTML panel.

Note - The validation window can sometimes open in a width narrow enough to hide the x
button. If that happens, widen the window until you see the button.
The image below shows the lower portion of the HTML panel.

You can view your content on the HTML panel using Design (WYSIWYG) mode, HTML
(code) mode, or preview mode. You can also set the size and position of the panel on the
app page.
Heres the content in Design mode:

And heres the same content in HTML view.

And heres the result, with minimal formatting, on the app page.

Note - Use the full URL when inserting an image or link and begin the URL with the
:http://. A shortcut URL wont work.

Image
This feature, on the Design screen, adds an image to the page. You might use it to add an
image of a city skyline as a visual element for a trade-show app, for example.
Note - See the app templates, the Design Catalog template in particular, for more ideas
about using this feature.
Heres the image properties dialog box.

Internal Image Name is the name by which ViziApps refers to the field programmatically,
such as img_boston. This entry is required.
The Choose From Stock button opens a window, shown below, that lists the images that
ship with ViziApps.

Click on the desired image to select it. Youll automatically return to the image properties
dialog box.
The Upload Your Custom Image button opens a window where you can select and upload
an image from your local PC. The image can be in JPG, GIF or PNG format up to 1024 w
x 1024 h px.
The Use a Previous Image button opens a window listing all images used in all projects in

your account. Click on the desired image to select it. Youll return to the image properties
dialog box.
Note - If you download an image from a web data source, leave the Image URL field
blank. The URL of the downloaded image will overwrite any entry in the Image URL
field.
You can also select the type of image scaling to use. There are three types:
Fill - The images dimensions will be altered or stretched to fill the available display
space. The image height across device form factors is determined by the width scale, so
the image height will not scale like other fields. The design view of the image may look
different than the original image. However a circle in the design view will remain a circle
on all devices, independent of the aspect ratio of the device display.
Fit - The image size may change but its aspect ratio will remain unchanged and the image
will be inserted into the available display space. This means you may get white space bars
above and below or to the sides of the inserted image, if the aspect ratio of the image
display space is different, but the look of the image will not change. This should always be
used for photos.
Scaled Fill - The images dimensions will be altered or stretched to fill the available
display space. The image height across device form factors is determined by the height
scale, so the image height will scale like other fields. The design view of the image may
look different than the original image and the aspect ratio of the design view may not be
preserved, depending on the aspect ratio of the device.
Try different options with your image to find the best choice.

Image Button
This feature, on the Design screen, creates a button as an image rather than a button with a
text label. You might use it to create a Back or Home button for use on each page of
an app, like the Home button example below. (The Image Button feature is similar to the
Image feature, the difference being the specification of the action when the user taps the
button.)

Note - See the app templates, the Design Catalog template in particular, for more ideas
about using this feature.
Heres the image button properties dialog box.

Internal Button Name is the name by which ViziApps refers to the field programmatically,
such as btn_home. This entry is required.
The Choose From Stock button opens a window, shown below, that lists the images
that ship with ViziApps.

Note - This is a different set of canned images than those available for the Image feature.

The Upload Your Custom Image button opens a window where you can select and upload
an image from your local PC. The image can be in JPG, GIF or PNG format up to 1024 w
x 1024 h px.
The Use a Previous Image button opens a window listing all images used in all projects in
your account. Click on the desired image to select it. Youll return to the image properties
dialog box.
Note - If you download an image from a web data source, leave the Image URL field
blank. The URL of the downloaded image will overwrite any entry in the Image URL
field.
In the When a User Taps section, select the action to associate with the field from the
list in the Select Action dropdown, shown below. You can also add an optional Javascript
to run before and/or after the action.

Some of these options are self-explanatory. Others are discussed elsewhere in this book.

Label
This feature, on the Design screen, adds one line of text. You might use it to add a page
title, like Add A Lead, or a text entry field label, like Name.
Note - See the app templates, the Design Catalog template in particular, for more ideas
about using this feature.
Labels have no programmatic function. However, a label from a web data source can
overwrite the entry in the Label Text field.
Heres the label properties dialog box.

Internal Label Name is the name by which ViziApps refers to the field programmatically,
such as phone_field_label. This entry is required.
Label Text is the text that displays on the page, such as the page title or field label.
The font options are Word-style options for font, font size, and font color.
Note - The Selected Font Color Value field gives the hex value of the color selected from
the color palette and is informational only. You cant change the hex value in this field.

Phone
This feature, in the action list available for many features, lets you create a button that,
when tapped, calls a designated phone number. Heres the action list with the call phone
option highlighted.

After you select the Call Phone option, you specify the phone number, as shown below.

You dont type the number itself in the field. Instead, type the name of the hidden field
(Hidden Fields on page 185) or any other screen object that can contain data, such as a
table row or label, that contains the number. That lets you hard-code the number elsewhere
in the app or populate the hidden field from the database.
Heres an example of the phone feature in author mode.

The white circle is the hidden field that contains the phone number. Double-clicking a
hidden field opens its properties dialog box, as shown below.

Heres how the finished product looks in an app.

Tapping this button opens a window with the number, shown below.

From here, users just tap to call.

Picker
This feature, on the Design screen, adds a multiple-choice user entry option to the page. It
adds a field that, when tapped, displays a slot machine with one or more dials at the
bottom of the page. Users can tap items in the dial(s) to add them to the field. You might
use a picker to let users select from a list of options, such as a list of states in a geography
app or a list of sessions in a conference app. For example, the image below shows the
empty data display field for a picker with no selection made yet.

Tapping the field displays the slot machine, below.

Tapping the desired entries on the dials and tapping the Set button adds the entries to the
display field and hides the slot machine, as shown below.

Note - See the app templates, the Design Catalog template in particular, for more ideas
about using this feature.
Heres the picker properties dialog box.

Internal Picker Name is the name by which ViziApps refers to the field programmatically,
such as pkr_yr_month. This entry is required.
Select Picker Type lets you create a one-dial picker with your own entries or choose from
pre-defined picker types. The first image below shows a custom one-dial picker that you
create by not making an entry in the Select Picker Type field and entering the list items in
the Item List field.

You can also select a predefined type from the list, shown below.

For example, selecting the Date & Time option gives the result shown below.

Back to the picker properties dialog box, shown again below.

Section Name lets you assign a name to the custom picker dial. Youll use this name for
reference if you need to refer programmatically to that portion of the picker.
The font options are Word-style options for font, font size, and font color.
Note - The Selected Font Color Value field gives the hex value of the color selected from
the color palette and is informational only. You cant change the hex value in this field.

Popup Web Page

This feature, in the action list available for many features, lets you create a link to an
external web page. The web page displays in a window that pops open on top of the app
page containing the link. Here, for example, is an app page with a link to a web page.

Tapping the link opens the web page in the popup, as shown below.

Tapping the x button in the upper left corner of the popup closes the popup and redisplays
the app page.
Heres the action list with the popup web page option highlighted.

After you select the Popup web page option, specify the field that contains the URL, as
shown below.

The field can either be visible to users, such as a text field in which the user can type the
URL, or hidden, such as a hidden field populated by extracting a URL from a database.

Push Notification
Push notification lets an app notify its users about an event, such as a sale or a meeting,
without the apps having to be open. (This is similar to the way a text message pops up on
the screen without users having to open a text message utility.) When you implement push
notification, the push feature can also indicate the number of unread messages waiting for
the user.
ViziApps uses push notification from Urban Airship (http://urbanairship.com/). To access
the settings, open the Select App Property pulldown on the Design pane and select Setup
Push Notifications. The Setup Push Notifications dialog box opens, shown below.

Click the question mark icon in the upper right corner of the dialog box for detailed steps
for implementing push notification.

Scan Bar Code or QR Code

This feature, in the action list available for many features, lets users scan a bar code or QR
code. The scanned code is stored in a hidden field from where it can be passed to a
database for processing. Heres the action list with the scan option highlighted.

After selecting the Scan option, specify the hidden field (Hidden Fields on page 185)
that will contain the scan value.
Heres an example of the feature in author mode.

The white circle is the hidden field in which the app stores the scan value. Double-clicking
a hidden field opens its properties dialog box, as shown below.

Heres how the finished product might look in an app. There are two examples, one using
a button with a text caption and one using a graphic button from the library built into
ViziApps.

Signature Capture
This feature, in the action list available for many features, lets users capture signatures or
any other type of writing as an image. The captured image is stored in a hidden field, from
where it can be passed to a database for processing. Heres the action list with the
signature capture option highlighted.

After selecting the Capture option, specify the hidden field (Hidden Fields on page
185) that will contain the scan value.
Heres an example of the signature capture feature in author mode.

The white circle is the hidden field in which the app stores the scan value. Double-clicking
a hidden field opens its properties dialog box, as shown below.

Heres how the result might look. There are two examples, a button with a text caption and
a graphic button from the library built into ViziApps.

Slider
This feature, on the Design screen, creates a slider that users can drag to select some value
between a minimum and maximum set by the developer. You might add a slider to let
users select a speaker rating from 1 to 5 or enter the temperature or scroll through a long
file.
All the slider does is select that value. Its then up to the developer to use other ViziApps
features to process the value, such as inserting it into a database for use elsewhere.
Heres what the slider looks like on an app page.

Note - See the app templates, the Design Catalog template in particular, for more ideas
about using this feature.
Heres the slider properties dialog box.

Internal Slider Name is the name by which ViziApps refers to the field programmatically,
such as slider_temp. This entry is required.
The Minimum and Maximum value fields are self-explanatory.
When ViziApps displays the slider on the app page, it automatically adds the value display
field to the left of the slider and sets the sliders starting value to the mid-point, 50 in the
first image above.

Switch
This feature, on the Design screen, creates a yes-no or on-off control, essentially a toggle
switch that looks like a light switch on its side as shown below. You might add a switch to
let users specify whether a feature is on or off.

Note - See the app templates, the Design Catalog template in particular, for more ideas
about using this feature.
Heres the switch properties dialog box.

Internal Switch Name is the name by which ViziApps refers to the field programmatically,
such as switch_rotate or rotate_switch. This entry is required.
Switch Type sets the switch position captions to on-off, yes-no, or true-false. In the image
at the top of this section, for example, the captions are on-off.
Default Value sets the default switch position. In the image at the top of the topic, for
example, the default is set to On.
In the When a User section, select the action to associate with the field from the list in
the Select Action dropdown, shown below. You can also add an optional Javascript to run
before and/or after the action..

Some of these options are self-explanatory. Others are discussed elsewhere in this book.

Table
This feature, on the Design screen, creates a quasi- table - quasi because of how this
feature handles multiple text fields. For example, the image below from the Design
Catalog template shows a table with one text field.

The image below shows a table with two text fields. However, rather than displaying in
two adjoining columns, the second text field displays below the first.

You can also mix image and text fields in a table, as shown in the image below which
shows a table with one image and one text field.

And in the image below, which shows a table with one image and two text fields.

Note - See the app templates, the Design Catalog template in particular, for more ideas
about using this feature.
The table feature offers additional options, with all the options shown in the table row
types list below.

Heres the table properties dialog box.

Internal Table Name is the name by which ViziApps refers to the table programmatically,
such as kells_table. This entry is required.
Table Display Name is the name that users will see displayed above the table, such as
Table With One Text Field in the first example in this section.
Standard Row Types Tab
If you select the Standard Row Types tab, select Table Row Type displays the standard
Table Row Types list, shown again below.

Enter the Field Name - Type a programmatic name for each field. If youre creating a
multi-field table, separate each name with a comma, such as name1,name2.
If you select the Actions tab, the When a User section lets you indicate an action to
associate with the entire table or with a specific field. Select the action from the list in the
Select Action dropdown, shown below. You can also add an optional Javascript to run
before and/or after the action..

Some of these options are self-explanatory. Others are discussed elsewhere in this book.
If you select the Preloaded Lists tab, the Item List lets you specify individual list items by
hand or to be loaded from the database.
Custom Row Template Tab
If you select the Custom Row Template tab, the Page Name for the Row Template
pulldown offers the options shown in the image below. This lets you design your own
custom table layout.

Selecting any of these templates displays the set of associated field names. For example, if
you select sliderFields option, ViziApps displays the associated field names as shown
below.

You can use these fields to design your own table template if the eight pre-defined row
types on the Standard Row Types arent enough.

Text Area
This feature, on the Design screen, adds a multi-line text entry box in which users can
free-form type any text characters on the virtual keyboard. You might use it to add a freeform entry Comments field.
Note - See the app templates, the Design Catalog template in particular, for more ideas
about using this feature.
Entries in this field can be processed to and from the database.
Heres the text area properties dialog box.

Internal Text Area Name is the name by which ViziApps refers to the field
programmatically, such as comments_field. This entry is required.
Editable vs. Non-Editable are self-explanatory.
Note - The text areas contents can come from your entry or the users, or a data
processing response or Javascript function call.
The font options are Word-style options for font, font size, and font color.
Note - The Selected Font Color Value field gives the hex value of the color selected from
the color palette and is informational only. You cant change the hex value in this field.

Text Field
This feature, on the Design screen, adds a one-line text entry box in which users can freeform type any text characters on the virtual keyboard. You might use it to add a Name
field in which a user can enter the name of a sales contact.
Note - See the app templates, the Design Catalog template in particular, for more ideas
about using this feature.
Entries in this field can be processed to and from the database.
Heres the text field properties dialog box.

Internal Text Field Name is the name by which Vizi Apps refers to the field
programmatically, such as name_field. This entry is required.
Default Value is any value that you want to display in the field when it first appears. You
can leave this field blank.
Note - A data processing response can overwrite the default value.
Type of Field lets you specify the type of entry that users will make in this field. This
determines what type of keyboard displays when users tap in the field. The image below
shows the options.

Placeholder Value is any value that you want to display in the field when it first appears,
such as a prompt - Type your name here You can leave this field blank. Note that the
Placeholder Value lets you omit a separate label for a field since the Placeholder Value can
act like a label.
The font options are Word-style options for font, font size, and font color.

Note - The Selected Font Color Value field gives the hex value of the color selected from
the color palette and is informational only. You cant change the hex value in this field.

Text Messaging
This feature, in the action list available for many features, adds text messaging
functionality. Heres the action list with the text message option highlighted.

After selecting the Text message option, you can select from the text message properties
list, shown below.

Selecting a property adds its corresponding property field, shown below for the To email
field and Subject field.

You dont type the actual field information - here the phone number or message - in these
fields. Instead, type the name of hidden fields (Hidden Fields on page 185) that contain
these values. That lets you enter hard-coded values in the hidden fields or populate the
hidden fields from the database.
Heres an example of the text message feature in author mode.

The two white circles are the hidden fields that contain the actual values for the phone
number, the left field, and the message, the right field. Double-clicking a hidden field
opens its properties dialog box, as shown below for the right field.

And heres how the finished product looks in an app. (Different carriers may give different
looking results but the functionality is the same.)

8 - Publishing
Publish Screen
Up to this point, youve been testing your app live on mobile devices using ViziApps
preview app in order to be sure the app is correct. Now that it is, the next step is to make
the app available to users - publish it.
Publishing can be confusing if youre new to mobile. ViziApps Publish screen, shown
below, can help by walking you through the steps in the process.

Note - The screens shown here apply to the Apple and Android publishing process as of
March, 2014 and may change as those processes change. Every attempt will be made to
keep this discussion up to date. If a step is no longer accurate, check the DIY Mobile blog
at http://diymobileblog.blogspot.com/.
Youll start with the first task, App Branding, by clicking on the Brand Apps for
Publishing button on the left and following the prompts. For example, the first prompt:

lets you pick the app to publish. The next prompt:

lets you specify various branding elements for the app, such as its version, the icon, and
splash image.
Note - you can use the apps home page as the icon and splash image if its attractive and
not too detailed (since much of the detail will be lost when the page is reduced to the size
of an icon). Alternatively, you can create, or hire a graphic artist to create an icon thats
different from the apps home page but suggests it. For example, heres the home page of
an app Im creating for a church in Massachusetts.

and heres the icon that the church developed.

The connection isnt quite clear, although the design is suggestive of a bishops headpiece.
Youre in the province of design and subjectivity here.
Note also that the branding prompt screen answers two questions that new developers
often have.
First, do I have to go through all these steps again if I modify the app in the future? No, all
you have to do is return to the branding prompt screen and click the Save Test Design to
Publishing Design button. This will update your app for all your end users automatically.
There is no need to rebuild your app and submit it to the app store.
Second, will the ViziApps logo appear as the first screen of my published app. Note that
the ViziApps login you see in the ViziApps app will NOT appear in your published app.
Bear in mind that your app may get turned down for a variety of reasons, especially by the
App Store which is stricter than the Play Store. Modify the app in light of the reason for
rejection and resubmit it. You may get turned down several times before being accepted,
but you most likely will be accepted. It can be very satisfying to see your app in the stores.
Good luck and enjoy the work.

9 - Creating Web Apps

Introduction to Web Apps
To this point, weve focused on using ViziApps to create hybrid apps. This section covers
using ViziApps to create another type of app, web apps. (Both types, plus native apps,
were covered earlier. Speaking the Language of Mobile on page 30.) To briefly
review
Web apps run in a browser rather than follow a platform standard like native apps, or
blend native app features with web views to display HTML content as hybrid apps. Web
apps are also usually written in HTML5 with CSS3.
Note - One can argue that any web site viewable in a browser on a mobile device is a web
app, whether or not it uses HTML5 and CSS3. This means that an XHTML-based online
help system created using help authoring tools like MadCap Flare or Adobe RoboHelp can
also be viewed as a web app. However, the focus here is on web apps created specifically
using ViziApps.
Why create web apps rather than hybrid apps? Here are four common reasons.
The app has to work on multiple devices or platforms because its a mass-market app or an
internal app in a BYOD (Bring Your Own Device) environment. (In BYOD environments,
employees can use personal devices for business tasks. This can lead to a wild mix of
devices that have to be supported.) Creating and supporting native apps for each platform
and variant is expensive and time-consuming, but apps that run in a browser should be
easily portable between platforms and variants. Note that you could use a hybrid app in
such an environment
The app is content-oriented rather than function-oriented. For example, the app might be
the online servicing guide for a piece of hardware and thus consist primarily of text and
graphics, with little or nothing in the way of platform features like the camera, push
notification, or GPS. You could use a hybrid app in this case but the app-like features
would largely go unused.
The apps content changes often. In this case, if this were a hybrid app, youd have to
resubmit the changed app to the stores, with the associated delay between the time of
submission and the time the app appeared in the store. (Theres also the possibility that the
revised app might be rejected for some reason.) The web app could be stored on your own
servers and users simply given the URL for the app, bypassing the stores entirely.
You already have a regular web site and want to create a mobile version of it. You may be
able make use of the existing sites business logic, saving time and expense.
Note A new class of tool can mobilize existing web sites and synchronize the regular
and mobile sites so that a change to the regular site updates the mobile site too. (Tools like
Mobify (http://www.mobify.com/ and DudaMobile (http://www.dudamobile.com/) do this,
although the process may be more difficult than the vendors suggest if a regular site
wasnt designed for conversion to mobile in the first place.)

Differences in Creating Web and Hybrid Apps Using ViziApps

The previous section listed four reasons for creating web apps rather than hybrid apps.
This section de- scribes the differences in ViziApps interface when creating web apps vs.
hybrid apps. The differences are in the features available on the Design pane.
Heres the Design pane when creating a web app.

And heres the Design pane when creating a hybrid app.

The difference is that web mode eliminates three native platform-specific features - RSS,
camera, and GPS - and some other features like NFC and push notification. Most of the
other options are the same and can be used in the same way as described earlier in the
book.

Appendices
Appendix A: Sources of Information
You can find an enormous amount of information on mobile in general, and app
development and design in particular. However, because the goal of this book is to get you
going quickly on creating an app, Ill limit this list to a small number of resources that are
useful if youre just starting out and not a programmer.
Web
iOS Human Interface Guidelines - This is the core reference for iOS app development.
Some of whats in here can be extrapolated to Android apps as well. To find it, go to:
https://developer.apple.com/library/ios/ design/
index.html#//apple_ref/doc/uid/TP40013289
and select the iOS Human Interface Guidelines link.
Native vs. Web vs. Hybrid: How To Select the Right Platform for Your Enterprises Mobile
Apps, Kinvey and Moovweb. Available at:
http://d1cqpkecg5rwnz.cloudfront.net/docs/kinvey-native-vs-web-vs-hybrid.pdf
Print
Available on Amazon.
Mobile Design and Development, Fling, OReilly, 2009
A 2009 release seems dated in this fast-moving field but Fling does an excellent job of
describing the technologies and the design and prototyping processes at a high enough
level to be helpful for non-program-mers. Highly recommended.
Tapworthy:Designing Great iPhone Apps, Clark, OReilly, 2010
Focuses on the design elements behind successful and usable iPhone apps, with some of
the concepts can be extrapolated to Android apps as well. Highly recommended.

Index
A
Access control, spreadsheets, 131
Aesthetics, in app design, 57
Alert Properties dialog box, 167
Alerts, 166
API
authenticating, 138
registering, 138
App
creating from a template, 92
creating from scratch, 92
App Background Image, 75
App database, spreadsheet, 127
App Description, 71
App design tips
Aesthetic design, 57
Functional design, 55
General, 53
Goals, 53
Usability, 62
App Navigation Bar, 76
App page options, 70
App Page Options
create a new page, 97
delete a page, 97
duplicate a page, 97
move a page, 97
rename a page, 97
save a page, 97
App Properties, Select, 71

App selection, preview, validation, and testing options, 69

App templates, 92
App, restore archived, 97
App, selecting to work on, 92
Apps
Business, 22
Hybrid, overview, 34
Native, overview, 33
Personal, 22
Usage examples, 26
Web, overview, 34
Archived app, restore, 97
Authenticating the API, 138
Authoring tools for DIY apps, 35
B
Background image, 75
Bar code, scan, 220
Business apps, 22
Buttons
Camera, 174
Checkbox, 178
Image, 171, 194
Image button, 198
Label, 202
Picker, 207
Slider, 224
Switch, 226
Table, 228
Text Area, 236
Text Field, 239
C
Camera, 174

Canvas, 69, 90
Canvas Editing Options, 69, 84
Snap to Grid, 84
Canvas Field Options, 69, 87
Capture signature, 222
CheckBox Button, 178
Code, bar, scan, 220
Code, QR, scan, 220
Commands
Delete From, 146
Insert Into, 139
Select From, 142
Update, 149
Compression ratio, 175
Conditions, 152
Conventions, when using spreadsheets as databases, 130
Coordinates of field object, 91
Create new app page, 97
Custom HTML Header, 80
D
Data Source Options, 122
Google Drive spreadsheets, 122
ODBC-compatible databases, 122
QuickBase, 122
Salesforce.com, 122
Web Services, 122
Database conventions when using spreadsheets, 130
Delete app page, 97
Delete From command, 146
Design Screen, 68
App page options, 70
app selection, preview, validation, and testing options, 69

Canvas, 69
Canvas Editing Options, 69
Canvas Field Options, 69
Select App Properties dropdown, 68
Design tips
Aesthetic design, 57
Functional design, 55
General, 53
Goals, 53
Usability, 62
Development process in ViziApps, 43
Device action, 156
Device Type for App, Set Main, 72
Differences in creating web apps vs. hybird apps using ViziApps, 254
Dimensions of field object, 91
DIY app authoring tools, 35
DIY app design, overview, 50
DIY apps, effective features, 51
Duplicate app page, 97
E
Email, 180
Examples of app usage, 26
F
Features of effective DIY apps, 51
Feedback messages, user, 166
Field object coordinates, 91
Field object dimensions, 91
Field Options, 87
Functional design, in app design, 55
G
Goals, in app design, 53
Google Docs/Drive, 125

spreadsheet used as a database, 127

Google Drive spreadsheet naming, 130
Google Drive spreadsheets, 122
H
Header, Custom HTML, 80
Hidden fields, 185
email, 181, 220, 222, 243
phone, 204
Hidden fields, on orphan pages, 98
html format, in email, 184
HTML Header, Custom, 80
HTML Panel, 188
Hybrid apps, overview, 34
I
Image, 194
compression ratio, 175
thumbnails, 176
Image Button, 171, 198
Image, background, 75
Insert Into Command, 139
L
Label, 202
M
Main Device Type for App, 72
Manage Page Data screen, displaying, 97
Mobile terminology, 30
Mobile, rationales, 21
N
Naming Google Drive spreadsheets, 130
Native apps, overview, 33
Navigation Bar, 76
Near Field Communications, Setup, 82

Non-Data ViziApps features, 165

O
ODBC-compatible databases, 122
Orange triangle with white !, 169
Orphan pages, and hidden fields, 98
P
Page
create new, 97
delete, 97
duplicate, 97
rename, 97
resequence, 97
Page Transition Type, 72
Paper prototyping, 65
Personal apps, 22
Phone, 204
Picker, 207
Popup web page, 215
Preview App, 92
Prototyping, on paper, 65
Push notification, 218
Overview, 218
Push Notifications, Setup, 82
Q
QR code, scan, 220
Query commands
Delete From, 146
Insert Into, 139
Select From, 142
Update, 149
QuickBase, 122
R

Rationales for mobile, 21

References
validate, 92
Registering the API, 138
Rename app page, 97
Resequence app page, 97
Restore archived app, 97
S
Salesforce.com, 122
Scan bar code, 220
Scan QR code, 220
Select App for Testing, 92
Select App Properties dropdown, 68, 71
App Background Image, 75
App Description, 71
App Navigation Bar, 76
Custom HTML Header, 80
Set Main Device Type for App, 72
Set the Page Transition Type for the App, 72
Setup Near Field Communications, 82
Setup Push Notifications, 82
URL Account Identifier, 83
Select From Command, 142
Selecting an app to work on, 92
Set Main Device Type for App, 72
Set the Page Transition Type for the App, 72
Setup Near Field Communications, 82
Setup Push Notifications, 82
Signature capture, 222
Slider, 224
Snap to Grid, 84
Spreadsheet access control, 131

Spreadsheet naming, Google Drive, 130

Spreadsheet worksheets, 128
Spreadsheet, used as app database, 127
Spreadsheets, database conventions, 130
Storyboard, 70, 100
Switch, 226
T
Table, 228
Templates, for apps, 92
Terminology, 30
Testing apps
emulator, 92
live, 92
Text Area, 236
Text Field, 239
Text Messaging, 242
Thumbnails, 176
Transition Type for Pages, 72
U
Update command, 149
URL Account Identifier, 83
Usability, in app design, 62
Use html format, 184
User feedback messages, 166
V
Validate references, 92
Visibililty option for spreadsheets, 133
ViziApps (Company) overview, 39
ViziApps app, 92
ViziApps data source options, 122
ViziApps development process, 43
ViziApps features, non-data, 165

W
Web apps vs. hybird apps, 251, 254
Web apps, differences in creating using ViziApps, 254
Web apps, introduction, 251
Web apps, overview, 34
Web page, popup, 215
Web Services, 122
Why go mobile, 21
Worksheets, 128