Spin List


The Spin List control allows the user to select from a pre-defined list of choices by swiping the control to 'spin' the list. The item the list stops on is the selected item. This is an ideal control for mobile applications because it is 'touch friendly'.

Cascading Spin List

It is possible to make cascading spin lists using Alpha Anywhere. In this scenario you have two spin-list controls with the selection in the first spin-list control determining the choices that will appear in the second spin-list control.

Creating a Spin List using Data Series

A Spin List control can be based on Static Data or a Data Series. When a Spin List control is populated with Data Series, the values in the Spin List are dynamically populated at run-time.

Creating a Spin List using Static Data

A Spin List control can be based on Static data or a Data Series. When a Spin List control is populated with static data, the values are set at design time in the UX Builder.

Dynamically Repopulating a Spin List Control

If the Spin List control is based on static data, it can be dynamically repopulated at run-time using JavaScript

Getting the Displayed Value for a Spin List Control

When you define the choices with which to populate a Spin List control, you can specify a 'display value' and a 'stored value' for each value. When you read the current value in the control (using the {dialog.object}.getValue() method, or the .value property on the Spin List object itself), you well be reading the stored value. In this tip we show you how to get the current display value.

The Spin List is like all other controls in that it has a .setValue() and .getValue() method, and its value is submitted like any other data control when the UX Component is submitted.

You can programmatically repopulate the items in the list by calling the control's .populate() method, as shown in the example code below:

//Get a pointer to the control
var so = {dialog.object}.getControl('MYSPINLIST');

Create an array with data. The array contains JSON objects with an 'html' and 'value' property.
var d = [
{html: '<span style="color: red;"><u>green</u></span>', value: 1},
{html: 'blue', value: 2},
{html: 'red', value: 3},
{html: 'yellow', value: 4}

//Repopulate the control


Spin List Control

The Spin List control is ideal for mobile applications. It is a great alternative to a dropdown box or an edit combo textbox. It can be used when the user needs to select from a pre-defined list of values.

Download Component