ViziApps Help Wiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== Design Overview ======

Before you dive in, we suggest you get an overall quick feel for the process by following the steps in our **[[quick_start_-_create_your_own_app|Quick Start - Create Your Own App]]**.

You have a choice to create either a hybrid app or a web app. For more details see **[[viziapps_app_types|ViziApps App Types]]**.
  * **Hybrid Apps** can access the camera, GPS, audio recording, signature capture, email, texting, device contacts, device calendar and is submitted to an app store for publication. 
  * **Web Apps** run on the Internet Browser of any smartphone or tablet but cannot access the native resources on the devices, and can be distributed the same way you distribute the links of your company website.

<WRAP tip>
Look for the context-sensitive help buttons throughout the ViziApps Studio: {{::context_help_icon.png?nolink&40|}}
</WRAP>


===== The Design Canvas =====

{{ ::design_tab_studio.png?nolink&150|}}
  * ViziApps Studio starts your session in the Design tab, which is where you will create your app designs. 
  * When you created your app, you named the first page. Every page has a unique name.
  * The Design Canvas will show the current page that your are editing. 
  * You can select the Design Canvas to appear as an iOS or Android device - but this is just an editing convenience. All apps can run on both iOS and Android devices.

===== Add Fields to a Page =====

  * A user experience is created by adding fields to a page. This is like using PowerPoint. You insert, drag and scale any of the fields on a page, including custom images and backgrounds. For a list of available fields, see **[[fields_and_actions|Fields and Actions]]**.
  * Each field must include a field ID; these are used throughout ViziApps to uniquely identify each field. A field ID can only contain letters, numbers, or the underscore character. No spaces are allowed.    		
  * Each field has a property sheet where you can customize the look and actions of the fields. When you first create a field, you will be presented with its property sheet. At any time you can double-click on a field to open its property sheet and changes its properties.
  * For buttons, switches and tables, choose any actions for when a user taps on the field. These include web data access, next page, previous page, popup a website, make a phone call, share a message, and more.
<WRAP center>
^  New Field Buttons   ^  Field Properties Dialog    ^  Design Canvas  ^
|  {{:field_button_list.png?direct&90|}}  |  {{:enter_url_text_field.png?direct&200|}}  |  {{::design_canvas_studio.png?direct&80|}}  |
</WRAP>
===== Add Pages =====

  * When you created your app, you named the first page. Every page has a unique name.
  * Generally, each page in your app should focus the user on viewing some limited information or completing a very specific task. 
  * Click on the **New Page** icon to add a new page to your app.{{ ::add_new_page_icon.png?direct&200 |}}
  * Take advantage of our storyboard feature. This view will show you all the pages that you saved at once while you are working on any one page. 
  * You can add as many pages as you need to your app.
<WRAP tip>
Adding a large number of images will cause your app to take longer to load. Make sure to use PNG format for graphics and JPG format for photos, and optimize the jpeg settings for smaller size.
</WRAP>
===== Connect to Data =====

  * You need three things in place in order to connect to data over the Internet:
     - A data source that is available to the Internet
     - One or more fields defined that will show the data to your users
     - Some event that will initiate the request for data

  * ViziApps offers no-coding data connections to: Google Drive Spreadsheets, SalesForce.com, Intuit QuickBase, and most SQL databases via a web service. 
  * It is often easiest for new users to prototype their app using Google Drive Spreadsheets, and this may be sufficient for a published version of your app. Please refer to our **[[google_drive_spreadsheets|Google Spreadsheet How-To-Guide]]** for details on making data connections. 
  * ViziApps fields like Label, Image, Hidden field, and Switch can accept a single item of data. ViziApps Table and Picker fields can accept a list of data.
  * Often data queries are initiated from a user event such as a button tap or a tap on a table row, but a data query can also be initiated every time a page shows.
  * Select the page you would like associated with a data query and click on **Manage Data**. This will show you a screen where you can make the connections between your ViziApps fields and the data source, based on some event that you select.
===== Test Your App =====

  * First test your app's user experience and data connections right in your browser by clicking on **Preview App**. 
  * Install the ViziApps App on your iPhone, iPad, Android phone or Android tablet to fully test your app on a real device.
  * See **[[testing_your_app|Testing Your App How-To Guide]]** for more details on app testing.

===== Publish Your App =====
{{ ::publish_tab_studio.png?nolink&150|}}
  * To publish your **Hybrid App** for app store distribution, or for publishing the URL for your **Web App**, follow the steps in the Publish tab. They include submitting your branded images in a publishing form, preparing your app for app store submission and choosing one of our publishing services.
  * See **[[publish_your_app|Publish Your App]]** for more details on app publishing.
ViziApps Help Wiki

User Tools

Site Tools

Page Tools
