The FormView control is a versatile control for building web and mobile applications.
The FormView is used to create a special type of 'form' on a UX component. Touch-optimized mobile forms are built using the FormView control, but there are other use cases for this control as well.
Watch video of a sample application that shows a tablet optimized form
Download the sample app component used in video
Watch video of a sample application that shows a phone optimized form
The FormView control is an extremely versatile and powerful control that allows complex, and highly stylized user interfaces to be build. But the basic concepts of the FormView control are actually quite simple and this document will explain these concepts.
The key concept of the FormView control (explained in more detail below) is that the display of the data in the form (accomplished by merging the form data into an HTML template), and the editing of the data in each form fields are done using different controls (accomplished using 'Field Editor' controls).
The images below show examples of UX components built using the FormView control.
Tablet optimized form examples
The next 3 images show a form that has been optimized for a tablet display. The 'form' part displays the values of the form fields (Inspection Date, Inspector Name, Owner, Owner Phone#, Make, Model, etc.). A section at the top of the form is where the 'editors' are shown. In image 1, the Inspection Date field on the form has focus and the editor for this value is open.
In image 2, the Inspector Name field on the form has focus and the editor for this field is show (highlighted in yellow) in the editing section at the top of the screen.
In image 3, the Owner Phone# field has focus and the editor for this value is shown. Note that the editor for the phone number field uses a custom keyboard -- not the built in native keyboard. The custom keyboard is shown at the top of the screen and it overlays the screen rather than pushing the screen up (as the native keyboard would do).
Phone optimized form examples
The next 4 images show a form that has been optimized for a phone display. In the first image the user selects the 'form page' that they want to edit. Because the form has a large number fields, the form is broken into logical 'pages' which the user can select from the 'Pages' list.
In image 2, the 'Checklist' page of the form is shown. This pages has a series of pass/fail questions. Questions that have been answered as 'passed' are shown in green and questions that have been answered as 'failed' are shown in red.
In image number 3, the user has tapped on a question and the 'editor' for that question is shown. The editor allows the user to set the question answer to pass or fail.
In mage 4 shown below a specialized 'editor' is shown. This is an example of how editors can be constructed to make answering particular types of questions easy. For example, this editor is designed to allow the operation to measure the rotational speed of a drum.
The most common data source for FormView controls, however, is the List Control. When you specify that the List control is the data source for the FormView, you get a lot of very helpful built-in behavior. For example, clicking on a row in the List will populate the FormView with data from that row (much like the behavior you get in a List with a Detail View).
The actual layout of the FormView control is defined by an HTML template. This means that you can use the full expressive power of HTML and CSS to create beautiful forms.
Because the HTML that is displayed in the FormView is generated using client-side templating, it is easy to add features to the form such as conditional sections, etc.
Editor Sets and Editors
The data shown in the FormView control is generally not directly editable. Instead, when the user taps on a field value shown in the FormView, an editor is opened to edit the value. The editor is contained in an editor set. After the user edits the field value in the editor, and saves the edit, the FormView control is updated with the edited value.
Editors are a shared resource. Many fields on a FormView control can share the same editor. However, even though many fields on a form can share the same editor, each time an editor is invoked to edit the value in a field, that field can pass a custom settings object to the editor to customize aspects of the editor's behavior.
By using shared editors, very large forms can be built, while still keeping the UX component itself relatively small and efficient.
Certain types of field values can be edited directly on the Form (without having to go to a separate editor). For example, a 'switch' control, which shows an On/Off value could be toggled directly on the FormView control. The switch control shown on the Form is called an immediate editor.
Editors are built using standard UX component controls. So, for example, some editors might allow the user to type a value into a text box control, while other editors will provide a list of choices (shown in a List control).
An editor set can contain several different editors. For example, in a touch optimized mobile form running on a phone, the editor set might be in its own Panel Card. When the user taps on a field on the Form, the Panel Card containing the selected editor would be animated into view. Once the user has made the edit and committed the new value, the Panel Card containing the editor set would be animated out of view.
Editor sets and Editors are added to the UX by adding a [Container] control (from the Containers section in the UX toolbox) and then selecting the appropriate container sub-type.
Alpha Anywhere comes with a number of pre-defined editors. These are shown in the Other Controls section of the UX Component toolbox.
Adding a FormView control to a UX Component
To add a FormView control to a UX component, select the [Form View] item from the toolbox in the Other Controls section.
Once you have added a FormView control to the UX, the property sheet for the control will have a Form properties item that you can click to open the FormView builder.
The FormView editor is shown in the image below.
To get an understanding of the various panes in the FormView editor, please watch the Introductory Videos, listed below.
Introduction - Getting Started, Creating a Simple Form, and Understanding Editors and Editor Sets
In this video, we wil discuss the following:
Create an extremely basic (read-only) FormView to display data in a List control.
Converting the read-only FormView to an updatable FormView.
We will also discuss how Editor Sets and Editors work and we discuss in some depth the various Editor and Editor Set events.
A key feature of the FormView is that many controls on the Form share the same editor. This is important because it allows you to have forms with a large number of fields, but still keep the UX very light weight.
Date added: 2015-08-03
Understanding Field Templates
When the FormView is rendered, the HTML for each field on the form is generated from a Template. The template can be defined at the Form level (so that each field on the Form uses the same template), or it can be defined for individual fields (so that each field on the Form can have its own template).
Download Field Templates FormView Component
Date added: 2015-08-10
Using Conditional Statements in Templates
The templates that you define for each field in a FormView are the same as the templates you would define when using Alpha Anywhere's Client-side Templating feature. This means you can use all of the powerful directives that are supported in client-side templating, such as conditional statements.
In this video we show have the template for a field can be dynamically modified based on data in the field.
Templates that define how the HTML for a field in a Form can be defined at the individual field level, or if not defined at the field level, a system template can be used. However, you can also create an unlimited number of 'named' templates that can be used when you define a template at the field level.
In this video we show how named templates can be used.
Download Named Templates FormView Component
Date added: 2015-08-10
Using Containers to Display Conditional Parts of a Form
All of the controls that you place on a FormView control can have an associated show/hide expression.
In this video we show how a block of text in the FormView control can be conditionally shown or hidden.
Download Conditional Container FormView Component
Date added: 2015-08-10
Most fields in a FormView control are edited in an associated 'editor'. When the user taps on the field in the Form, the associated editor is opened, the user edits the form field value and then saves the edited value back to the form. This is called 'indirect editing'.
There are cases, however, where 'immediate' editing of a value would be more convenient than having to go to a separate editor to edit the value. A good use case for an 'immediate' editor is a toggle field that has two states, such as 'Yes' or 'No' for a 'Married' field. A 'switch' control is ideal for this use case.
In this video we show how you can add a switch control to a FormView. The switch control acts as an 'immediate' editor.
Download Switch FormView Component
Date added: 2015-08-10
Creating an Editor using a Dropdown Box Control
The editors that you define for the fields in a FormView control can be constructed using any of the available UX component controls. For example, you might want to define an editor that uses a standard Dropdownbox control. However, since editors can be shared, you do not want to hard code the list of choices for the Dropdownbox into the Dropdownbox definition. Instead, you will want to dynamically populate the choices in the Dropdownbox at the time the editor is opened.
In this video we show how the editor for a State field is defined using a Dropdownbox control and how the choices for this Dropdownbox control are defined in the 'user defined settings' for the field in the FormView builder.
We also show how the Dropdownbox control choices can be populated with a display value and a stored value for each choice in the Dropdownbox.
Download Dropdown Editor FormView Component
Addendum: In the above video the code to populate the Dropdownbox control is placed in the 'Show editor' event handler. It is recommended, however, that this code be placed in the 'Set value in editor' event handler.
Date added: 2015-08-10
Cascading Dropdownbox Editors
A 'cascading' Dropdownbox is a Dropdownbox where the choices are based on the selection in the Dropdownbox control's 'parent' controls. For example, the choices in a 'City' Dropdown box might only show cities that are in the selected State.
In this video we show how a cascading Dropdownbox editor can be configured to edit the City field in a FormView control.
Download Cascading Dropdown FormView Component
Date added: 2015-08-10
Cascading List Control Editors
A 'cascading' List control is a List control where the choices are based on the selection in the List control's 'parent' controls. For example, the choices in a 'City' List control might only show cities that are in the selected State.
In this video we show how a List control can be used to edit the value in a State and City field on a form. The choices shown in the City List control are dynamically set based on the data in the State List control.
Download Cascading Lists FormView Component
Date added: 2015-08-10
Displaying a New Record in the FormView Control
When you are working with a FormView control, the Form typically displays data from a row in the FormView's data source. But you also need to be able to add new rows of data to the FormView control's data source.
In this video we show how you point the FormView control to a 'new record' which can then be added to the data source when the FormView is committed.
Date added: 2015-08-12
Saving FormView Control Data to a SQL Database
If the data source for a FormView control is a List control, you can easily persist the FormView control data to a SQL database.
The technique is to set the List control (which is the FormView control's data source) to have a Detail View, but to not actually define a Detail View for the List, since the FormView control will be 'acting' as the List's Detail View. However, by specifying that the List has a Detail View, you enable all of the List/Detail View methods for persisting List data to a SQL database and you get the ability for the List to work in a disconnected mode.
In this video we show how a simple FormView control which uses a List that is based on a static data source can be converted to use a SQL database as its back end.
Download SQL Data Source FormView Component
Date added: 2015-08-12
Displaying and Capturing Images using the Camera
A common use case with a FormView is to capture pictures (using the Camera on a mobile device, or selecting the picture from the Photo Library on a device). If the device does not have a camera, the HTML5 image capture option will allow you to select the image from the file system.
When you capture images, you can either capture the base64 encoded image data, or (if you are running in a Cordova application), you can capture the filename of the image. For disconnected Cordova applications, it is preferable to use the option to capture the image filename since that will allow you to capture many more images while you are disconnected than would be possible if you were using the base64 encoded option.
In this video we show how a FormView is configured to capture images.
Download Image Capture FormView Component
Date added: 2016-03-06
Introduction to the Ink Control
The Ink control allows you to create and edit 'ink' data.
In this video we give a very brief introduction to the Ink control.
Date added: 2015-08-13
Displaying and Capturing Ink using the Alpha Anywhere Ink Control
The Ink control allows a user to draw on the screen (using a finger or special pen on a mobile device, or a mouse on a desktop computer). The drawing is referred to as 'Ink' and it can be displayed on a Form and edited using the Ink control.
TIP: Before watching this video you should watch 'Introduction to the Ink Control'.
In this video we show how an 'InkNotes' field can be added to the List control that is acting as a FormView control's data source, how the 'ink' can be displayed in the FormView control and how the ink can be edited in an 'editor' that is configured to use the Alpha Anywhere Ink control.
Download Ink FormView Component
Date added: 2015-08-13
Annotating Images using the Ink Control
A common use case with the FormView control is to capture images and then annotate the image by drawing on top of the image using the Ink control.
In this video we show how the FormView control can be configured to use an Ink Control editor to allow annotation of images.
Download Image Capture and Annotation FormView Component
Date added: 2016-03-06
Introduction to Group Editors
The common pattern when using a FormView control is to edit a single value in a FormView with its associated editor at a time. For example, when the user clicks on 'field1' in the FormView, the associated editor for 'field1' is shown and the user can edit the value in 'field1'.
In some cases, however, you might want to edit the value of multiple fields simultaneously. For example, if the user fields on ANY of 'field1', 'field2', or 'field3', for example, you might want to open an editor that allows you to edit all of the fields at once.
This is easily accomplished using the concept of 'Group Editors'.
In this video we show how the Address, City, State and Country field in a form are edited using a Group Editor for this group of fields.
Download Group Editors FormView Component
Date added: 2015-08-13
List Control Editor - Dynamically Populate with SQL Data
In a previous video we showed how a List control could be used as an editor for a field on a FormView control and how the data in the List could be populated when the editor is shown. In that video, the data used to populate the List was static data.
In many cases, however, the data that you use to populate the List will come from a database query. In this video we show how you can use a SQL query to get the list of countries with which to populate the List used in the editor for the 'country' field on a FormView control.
Download SQL Data FormView Component
ERRATA: The video shows the code for the 'Set value in editor' event incorrectly. It should have been:
Date added: 2015-08-14
Introducing the built-in List Control Editor
When editing a value in a form it is common to allow the user to pick the value for the field from a list. In previous videos we showed how you could manually configure an Editor to use a List control. We also showed how you can manually configure the List editor so that the choices shown in the List are dynamic (e.g. only show Cities for the selected Country).
The UX build now contains a pre-defined List Editor which can be be configured using a genie.
In this video we show how the pre-defined List Editor can be used.
Download List Editor Genie FormView Component
Date added: 2015-10-09
Converting a List that uses a Static Data Source to a SQL Data Source and Vice-Versa
It is common when building a UX component that uses List controls to start off with Lists that are based on static data (because setting up a List to use static data is so easy). Once you have your UX working, you might then want to convert the List to be based on a SQL database. A genie allows you to easily export the data from your static data source to a new table in a SQL database, or to link your List to an existing table in a SQL database.
You can also easily convert a List that uses a SQL data source to a static data source by importing the data from the SQL table.
Date added: 2015-11-04
Date added: 2015-12-05
CSS Defined at the FormView Control Level is in Own Namespace
When you define a FormView control, the builder allows you to define CSS classes that you use in the FormView template. This CSS can either be stored at the UX component level, or at the FormView control level.
If you store the CSS at the FormView control level, the CSS is in its own namespace, which means that if another control on the same UX were to also define a CSS class with the same name, it would not overwrite the CSS defined in the FormView.
Defining Display Formats for Date and Numeric Fields
You can define custom display formats for date and numeric fields that are displayed in the Form. For example you might want to display a number with a comma as the thousands separator and limit the number to 2 decimal places. Or you might want to display a date value using a dd/MM/yyyy format even though the data in the Form' data source is using the MM/dd/yyyy format.
Date added: 2016-05-22
Capturing Signatures Using the SignatureInk Editor
A common requirement when using the FormView control is capturing a signature. Alpha Anywhere has a Signature control, but this control captures signatures as bitmaps and is not ideal for use in a FormView control. The Ink control is better suited for this use case.
In this video we show how a FormView control is configured to use the built-in SignatureInk editor.
Download SignatureInk FormView Component
Date added: 2016-06-30
Customizing the Ink Control Overlay
The Ink control 'overlay' displays a number of tools that are used by the Ink editor (such as the Pen selector, Eraser, etc.) You can customize the appearance of the 'overlay' and add your own tools (i.e buttons).
In this video we show how you can add a new button to the Ink editor overlay.
Date added: 2016-07-08
Using the Ink Control to Capture Signatures
The UX Component has has a built in Signature Capture control. However, it is also possible to use the Ink control to capture signatures. The primary benefit of using the Ink control to capture signatures is that the signature is captured using the Ink format, which is an ASCII format. The Signature Capture control stores the signature as a PNG image.
In this video we show how to configure the Ink control to capture signatures.
Date added: 2016-08-07
Creating Complex Form Layouts using the Flow and Column Layout Containers
When you lay out a Form using the FormView control, by default, the controls on the form are rendered with one control per line and each control taking up the full width of the FormView control. If you want to create a more complex Layout you can either switch from Genie mode to the Freeform mode, or you can use Flow and Column Layout Containers to control the layout of your Form.
In this video we show how a complex Form layout is achieved using Column and Flow layout containers.
Download Flow and Column Container FormView Component
Date added: 2016-08-27
Displaying Calculated Values on a FormView Control
When you design a FormView control, you may want the form to display calculated values (typically computed from other fields in the form). Since the Form is really just an HTML template that is rendered using Alpha Anywhere's client-side templating features, this is easily done.
In this video we show how a calculated field is added to the FormView control.
Download Calculated Values FormView Component
Date added: 2016-10-10
Demo Tablet Optimized Form Videos
Introduction to the demo table optimized form.
- Watch Video - Overview
- Watch Video - Checklist Items
- Watch Video - Checklist Items 2
- Watch Video - Form Help
Sample Mobile Forms Cement Truck Inspection Application
The sample Mobile Forms Cement Truck Inspection application is intended to be used as a reference application showing a rich example of a mobile forms application optimized for use on a phone. The sample component can be downloaded from the Alpha Anywhere GitHub account online at https://github.com/alphaanywhere/CementTruck. The videos listed below give an in-depth description of how the component was constructed.
Screen shot of one of the pages in the sample Cement Truck Inspection application
MobileFormsCementTruck.a5wcmp is a sample component that implements functionality for doing offline data collection with synchronization back to a server, including user authentication.
The app was built to have a carefully crafted user interface, along with extra code to facilitate debugging any changes that would be made to the app and to do demonstrations and training of its use. The app provides a starting point for a flat-file, multi-page, mobile forms-driven, off-line-centric data collection application.
What this app does is give an Alpha Anywhere developer working code which they can either use as a complete base for minor or major modifications, or use as examples from which to copy or compare small snippets of code and formatting.
These videos are not intended as an introduction to Alpha Anywhere. Basic concepts and operation of the development environment are not covered and knowledge of that is assumed.
What follows is a list of the videos, along with a short explanation of each. They were created assuming that they would initially be viewed in order. Most of the later videos assume that the viewer has watched the first four.
Mobile Forms: Cement Truck Sample (16:22)
This is the first video in this series. It shows the capabilities of the app, going over most of the screens. It does not assume knowledge of Alpha Anywhere development, and may be viewed by non-developers to see an example of the look and feel, and functionality, of a basic mobile Alpha Anywhere data capture application running on a smartphone.
Alpha Anywhere Mobile Forms Cement Truck: Installing (12:09)
This video shows how to take the Zip File that has the sample's files and bring them into Alpha Anywhere. It includes setting up the required connection string and user security information. Click here to download the zip file referenced in this video. The entire Cement Truck project can also be downloaded from Alpha Anywhere's GitHub account here.
Alpha Anywhere Mobile Forms Cement Truck: Panel Structure (12:27)
This video goes over the structure of the different screens shown by the app, and the panel cards, panel navigators, and panel layouts that implement those screens. It also goes over the use of panel overlays, and shows the use of comments in the UX's Controls View in the Alpha Anywhere development environment.
Alpha Anywhere Mobile Forms Cement Truck: Overview of the Code (14:14)
Alpha Anywhere Mobile Forms Cement Truck: Logging In the User (24:11)
Alpha Anywhere Mobile Forms Cement Truck: Lists and Form (27:27)
This video goes over the properties and settings for the list of forms, the list of pages, and the FormView that displays the data fields.
Alpha Anywhere Mobile Forms Cement Truck: New Record (11:49)
This video shows how the New button functionality is implemented, including the lookup of a scanned QR code. It also shows the implementation of deleting a record.
Alpha Anywhere Mobile Forms Cement Truck: Editors (37:03)
This video goes over how the data field editors are implemented, including the shared code and shared controls that are common to multiple editors. It also shows how the app-specific "speed test" timing editor is implemented.
Alpha Anywhere Mobile Forms Cement Truck: Handling Synchronization Errors (22:21)
This video shows how the app responds to server-side data validation and write-conflict errors. It includes how it displays those errors, and how it implements a user-traversable list of the fields with errors to be addressed.
Alpha Anywhere: Custom CSS in a UX Component (23:10)
This is a general video for Alpha Anywhere developers, and is not specific to this app. It does, though, cover techniques that are used in the next video which is specific to this app and should be viewed before that video. This video covers some of the default HTML and CSS that is used for most normal Alpha Anywhere controls, and shows how to do commonly needed modifications to that code through various control and component properties.
Alpha Anywhere Mobile Forms Cement Truck: Custom CSS (28:55)
This video shows how the app uses custom CSS classes and styles, and custom sub-themes, to give the app the visual appearance that it has. It also shows the history of that design, and how it came about from the work of a UX/visual designer with concern for the user experience and not with how it might be implemented using Alpha Anywhere.
Alpha Anywhere Mobile Forms Cement Truck: Cordova (9:23)
This last video shows the settings used to publish the app as a normal Cordova application for distribution. It also shows how the QR-code scanning functionality is accomplished with a Cordova plug-in, as well as the iOS-specific code for the device statusbar.