Alpha Anywhere Mobile Forms Beta Videos

We have been writing a lot of late about the topic of "Tablet Optimized Forms" or "Rich Data Capture Forms." Alpha's developers have been busy creating new tools for building mobile forms that are optimized to run on tablets and smart phones. These features are being launched as part of our Tablet Optimized Form Capabilities Beta. The tablet forms beta is an open beta available to current Alpha Software customers. If you're not familiar with tablet forms, check out the following articles to learn more:

In this video we make an updateable FormView.Watch VideoDate added: 2015-08-03

UX Component - FormView Control

Understanding how Editor Sets and Editors Work to Make a FormView Editable

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.In this video we discuss how Editor Sets and Editors work and we discuss in some depth the various Editor and Editor Set events.Watch Video - Part 1Watch Video - Part 2Watch Video - Part 3Date added: 2015-08-03

UX Component - FormView Control

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).Watch VideoDownload ComponentDate added: 2015-08-10

UX Component - FormView Control

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.Watch VideoDownload ComponentDate added: 2015-08-10

UX Component - FormView Control

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.Watch VideoDownload ComponentDate added: 2015-08-10

UX Component - FormView Control

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.Watch VideoDownload ComponentDate added: 2015-08-10

UX Component - FormView Control

Switch Control

Most fields in a Form View 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 Form View. The switch control acts as an 'immediate' editor.Watch VideoDownload ComponentDate added: 2015-08-10

UX Component - FormView Control

Creating an Editor using a Dropdown Box Control

The editors that you define for the fields in a Form View 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 Form View builder.Watch Video - Part 1Watch Video - Part 2Download ComponentAddendum. In this video we show how the Dropdownbox control choices can be populated with a display value and a stored value for each choice in the Dropdownbox.Watch Video - Part 3Addendum 2: In the above videos 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

UX Component - FormView Control

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 Form View control.Watch Video - Part 1Watch Video - Part 2Download ComponentDate added: 2015-08-10

UX Component - FormView Control

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.NOTE: These videos assume you have previously watched the 'Cascading Dropdownbox Editors' videos as many of the concepts shown in this video are the same asWatch Video - Part 1Watch Video - Part 2Watch Video - Part 3Download ComponentDate added: 2015-08-10

UX Component - FormView Control

Displaying a New Record in the Form View 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 Form View control to a 'new record' which can then be added to the data source when the Form View is committed.Watch VideoDate added: 2015-08-12

UX Component - FormView Control

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 Form View control data to a SQL database.The technique is to set the List control (which is the Form View control's data source) to have a Detail View, but to not actually define a Detail View for the List, since the Form View 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 Form View 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.Watch Video - Part 1Watch Video - Part 2Download ComponentDate added: 2015-08-12

UX Component - FormView Control

Displaying and Capturing Images using the Camera

A common use case with a Form View 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 Form View is configured to capture images.Watch Video - Part 1Watch Video - Part 2Download ComponentDate added: 2015-08-12

UX Component - FormView Contro

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.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 Form View control and how the ink can be edited in an 'editor' that is configured to use the Alpha Anywhere Ink control.Watch Video - Part 1Watch Video - Part 2Watch Video - Part 3Download ComponentDate added: 2015-08-13

Miscellaneous Videos

UX Component - FormView

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.Watch VideoDate added: 2015-08-04

About Author

Richard Rabins

Co-founder of Alpha Software, Richard Rabins focuses on strategy, sales, and marketing. Richard also served as CEO of SoftQuad International from 1997 to 2001, when it owned Alpha. In addition to his 30 years with the company, Richard played a key role as co-founder, and served as president and chairman of the Massachusetts Software Council (now the Massachusetts Technology Leadership Council), the largest technology trade organization in Massachusetts. Prior to founding Alpha, Richard was a project leader and consultant with Information Resources, Inc. (IRI), and a management consultant with Management Decision Systems, Inc. Richard holds a master's degree in system dynamics from the Sloan School at MIT, and a bachelor's degree in electrical engineering and master's degree in control engineering from University of the Witwatersrand in Johannesburg, South Africa. He has served on the boards of Silent Systems, Legacy Technology and O3B Networks, and is co-founder of Tubifi www.tubifi.com.