Stepper¶

The stepper control is used for incrementing or decrementing numeric values.

When assigning a rule to a property of Stepper, the rule will be passed an instance of the following proxy class as an argument:

• FormCellControlProxy

Stepper Properties¶

Caption¶

The key name of the property.

• type: string

DecimalPlacesSupported¶

The number of decimal places supported for the stepper value. On iOS, this property sets the maximum decimal places that can be displayed or calculated.

• type: number

• default: 0

DecrementIcon¶

The icon to decrease the stepper value.

• type: Image

DecrementIconIsCircular¶

Determines whether to set the decrement icon as a circular shape.

• type: boolean

• default: false

HelperText¶

Helper text to be displayed if there is no validation view.

• type: string

IncrementIcon¶

The icon to increase the stepper value.

• type: Image

IncrementIconIsCircular¶

Determines whether to set the increment icon as a circular shape.

• type: boolean

• default: false

IsEditable¶

Disables or enables interaction. The control will have a reduced opacity if this property is false.

• type: boolean

• default: true

IsVisible¶

Sets the visibility of the control.

• type: boolean

• default: true

MaxValue¶

The maximum allowed value.

• type: number

• default: 9999

MinValue¶

The minimum allowed value.

• type: number

• default: 0

OnValueChange¶

Action or rule to perform after the value has changed.

• type: ActionOrRule
• Formatter and Binding are not supported

Separator¶

Sets the visibility of the separator line below the control. This property will take precedence over ControlSeparator in section and is only supported for Form Cell control in Sectioned Table and not supported in Form Cell Container.

• type: boolean

• default: true

Step¶

The increment/decrement step value.

• type: number

• default: 1

Styles¶

Set styles for Background, Stepper, StepperTextField, IncrementIcon, DecrementIcon, Caption and HelperText.

• type: object with following properties.

Background¶

The string value is a style class name of Background. Used as the default when a plain string is passed.

• StepperFormCell style class

Stepper¶

The string value is a style class name of Stepper.

• StepperFormCell style class

StepperTextField¶

The string value is a style class name of StepperTextField.

• StepperFormCell style class

IncrementIcon¶

The string value is a style class name of IncrementIcon.

• StepperFormCell style class

DecrementIcon¶

The string value is a style class name of DecrementIcon.

• StepperFormCell style class

Caption¶

The string value is a style class name of Caption.

• StepperFormCell style class

HelperText¶

The string value is a style class name for the helper text.

• StepperFormCell style class

Validation¶

The validation view properties. However, styling in ValidationView will not be supported.

• type: Validation

Value¶

Initial value of the stepper control.

• type: number

• default: 0

_Name¶

• type: string

_Type¶

• type: const

The value of this property must be:

"Control.Type.FormCell.Stepper"

Examples¶

Stepper Form Cell in a Section¶

{
  "Caption": "FormCell Stepper Page",
  "Controls": [
    {
      "_Name": "SectionedTable",
      "_Type": "Control.Type.SectionedTable",
      "Sections": [
        {
          "_Type": "Section.Type.FormCell",
          "Caption": "Stepper Example",
          "Controls": [
            {
              "_Type": "Control.Type.FormCell.Stepper",
              "_Name": "StepperFormCell",
              "Caption": "Quantity",
              "HelperText": "Select quantity between 0 and 100",
              "Value": 5,
              "Step": 1,
              "MinimumValue": 0,
              "MaximumValue": 100,
              "DecimalPlacesSupported": 0,
              "IsEditable": true,
              "IsVisible": true,
              "Separator": true,
              "IncrementIcon": "sap-icon://add",
              "DecrementIcon": "sap-icon://less",
              "IncrementIconIsCircular": true,
              "DecrementIconIsCircular": true,
              "OnValueChange": "/MyApp/Actions/UpdateTotal.action",
              "Validation": {
                "Message": "Please select a valid quantity",
                "Visible": true,
                "Styles": {
                  "Message": "ValidationMessage"
                }
              },
              "Styles": {
                "Background": "StepperBackground",
                "Stepper": "StepperContainer",
                "StepperTextField": "StepperTextField",
                "IncrementIcon": "StepperIncrementIcon",
                "DecrementIcon": "StepperDecrementIcon",
                "Caption": "StepperCaption",
                "HelperText": "StepperHelperText"
              }
            }
          ]
        }
      ]
    }
  ],
  "_Type": "Page",
  "_Name": "StepperFormcell"
}

Style Classes Definition¶

/* Stepper Form Cell - Background */
.StepperBackground {
  background-color: #ffffff;
  padding: 8;
}

/* Stepper Form Cell - Container */
.StepperContainer {
  border-color: #0070f2;
  border-width: 2;
  border-radius: 8;
  height: 48;
}

/* Stepper Form Cell - Text field */
.StepperTextField {
  font-color: #333333;
  font-size: 16;
  background-color: #ffffff;
  border-color: #e0e0e0;
  border-width: 1;
}

/* Stepper Form Cell - Increment icon */
.StepperIncrementIcon {
  font-color: #0070f2;
  background-color: #e6f2ff;
  font-size: 24;
}

/* Stepper Form Cell - Decrement icon */
.StepperDecrementIcon {
  font-color: #0070f2;
  background-color: #e6f2ff;
  font-size: 24;
}

/* Stepper Form Cell - Caption */
.StepperCaption {
  font-color: #333333;
  font-size: 14;
  font-typeface: bold;
}

/* Stepper Form Cell - Helper text */
.StepperHelperText {
  font-color: #666666;
  font-size: 12;
}

/* Validation message */
.ValidationMessage {
  font-size: 14;
  font-color: #d9534f;
}