Sometimes you need to navigate through the values a field can adopt. The wheel control has gained popularity with the touch screen interface and is very used in this cases. You can scroll through an enumarated domain or numeric values to select the value you want.
In this article it is explained the most important concepts of the wheel control and there is an example on how to use it.
For our example we will use the following transaction with Work With pattern and Work With object (WWSD) applied (for further information see Applying Work With Pattern).
This control applies to the following data types:
We are going to focus on the last two.
On our transaction there is an enumerated and a numeric based attribute.
Enumerated Domain:
To enable the control go to the Section (under Detail node) selecting the Edit layout. Select the numeric attribute and change the Control Type property to SD Wheel.
This will enable some other properties.
General SD Wheel properties
Notify Context Change |
This property is used for event handling. |
Display Style |
"Inline" or "As a picker" values. You can select how this control is seen. The default value is "As a picker". This property has effect only in iOS devices. For Android devices the wheel control is always displayed as a picker. This restriction is imposed by the plaform itself. |
Cyclic |
You can enable this property if you want the last value to be continued by the first one. |
For Numeric based attributes:
Step |
The incrementation from one value to another. |
Min Value |
The minimum value the control will show to select. |
Max Value |
The maximum value the control will enable you to select. |
For our Enumerated attribute let's do the same:
There are no particular properties enabled, just the General SD Wheel control properties.
Done, Hit F5.
Examples
Numeric as a Picker:
Enumerated As a picker:
Numeric Inline:
Numeric with decimals:
The wheel control can also be applied to a field based on a numeric with decimals. An example:
Using decimals we can specify decimal step (in our example 0.02) and after deploying the application the control is displayed as follows:
See also
HowTo: Use MultiWheel Control
Videos
Work With for Smart Devices – General Aspects and List layout
WorkWith for Smart Devices – Detail Layout