FormView Control

IN THIS PAGE

Description

The FormView control 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.

Discussion

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 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.

Tablet Form - Image 1

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.

Tablet Form - Image 2

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).

Tablet Form - Image 3

 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.

Phone Form - Image 1

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.

Phone Form - Image 2

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.

Phone Form - Image 3

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.

Phone Form - Image 4

Basic Concepts

 Data Source

The FormView control has a data source. The data source contains the data that the FormView control will display and edit (if the FormView is editable - it does not have to be). The data source can be a List Control, an arbitrary Javascript object, or some other controls on the UX.

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).

A common design pattern is to define a List control and turn on its Detail View property, but to actually use a FormView control to define the List's Detail View (rather than adding individual controls, such as text box controls, for the List's Detail View).

 HTML Template

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.

The HTML shown in the FormView control is obtained by merging data from the FormView control's data source into a template. The template a standard template used by Alpha Anywhere's client-side templating feature. For more information on client-side templates, search Release Notes for 'Client-side Templates'.

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.

Introductory Videos

 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 (readonly) FormView to display data in a List control.

Converting the readonly FormView to an updateable 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

Addendum: In the third part of this video, the Javascript shown to get the title is 'title = settings['*a5column']'. This technique is now deprecated and the correct method is 'title = settings.formView.active.name'.

 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.

Download Conditional Template FormView Component

Date added: 2015-08-10

 Named Templates

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

 Switch Control

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.

These videos assume you have previously watched the 'Cascading Dropdownbox Editors' videos as some concepts presented in this video were first explained in 'Cascading Dropdownbox Editors'.

Download Cascading Lists FormView Component

Date added: 2015-08-10

The technique shown in this video involves writing code. However the same thing can be accomplished without any code by using the pre-defined List Control editor, as shown in the video 'Introducing the built-in List Control Editor'.

 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 PhoneGap application), you can capture the filename of the image. For disconnected application that use PhoneGap, 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 these 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:

{dialog.object}.setValue('EDITOR_3_LIST',value);
The technique shown in this video involves writing code. However the same thing can be accomplished without any code by using the 'client-side data case then the pre-defined List Control editor, as shown in the video 'Introducing the built-in List Control Editor'.

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

 Dynamically Setting the Editor and Editor Set Using Javascript

If you want to build a responsive FormView control where the Editor Set and Editor for a field are set dynamically at run-time you can specify the Editor Set and Editor using Javascript. This allows you, for example, to have a different Editor Set/Editor for a field when on a tablet, or a phone.

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.

Download Tablet Forms Sample App

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

These videos, along with comments throughout the component in JavaScript code and on controls, serve as documentation of the inner workings of the MobileFormsCementTruck.a5wcmp UX component.

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.

The app was designed to be modified so that it can be customized for your specific use case. It is not a simple sample for learning how to develop an app in Alpha Anywhere. It is a full implementation of most of its features, with extra code to handle special cases that are often left as "an exercise for the reader" in other samples. It uses whatever was necessary in Alpha Anywhere to accomplish its goals, without concern for ease of programming or use of built-in or codeless features of Alpha Anywhere. Some of what it accomplishes with complex JavaScript and CSS may end up being made easier in future versions of Alpha Anywhere, or may already have simpler solutions.

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 aimed at a developer already familiar with the facilities in Alpha Anywhere, such as the various forms of panels and containers, the common properties of many controls as well as the events, and the general use of editors, ViewBoxes, and FormViews. They also assume familiarity with HTML, CSS, and JavaScript, and their use by a developer working in Alpha Anywhere.

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.