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 blog post, we wanted to share with you some of the videos we have created so far to help explain what this is all about.
We suggest you first watch these two overview videos on Tablet Optimized Forms that are being added to Alpha Anywhere, click here to watch the intro and two videos.
(Please watch using HD resolution).Introductory Videos
UX Component - FormView Control | Introduction - Getting Started | Create an extremely basic (readonly) FormView to display data in a List control.Watch VideoDate added: 2015-08-03 |
UX Component - FormView Control | Introduction - Simple Updateable Form | 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 1 Watch Video - Part 2 Watch 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 Video Download 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 Video Download 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 Video Download 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 Video Download 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 Video Download 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 1 Watch Video - Part 2 Download 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 1 Watch Video - Part 2 Download 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 1 Watch Video - Part 2 Watch Video - Part 3 Download 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 1 Watch Video - Part 2 Download 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 1 Watch Video - Part 2 Download 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 1 Watch Video - Part 2 Watch Video - Part 3 Download ComponentDate added: 2015-08-13 |
UX Component | 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.Watch Video - Part 1 Watch Video - Part 2Date 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 |
Comment