Skip to main content

Swipe

What is the Form Swipe?​

The Swipe field is a swipe-to-confirm control. The user drags the handle all the way to the right end to confirm an action. The stored value is a boolean: true when the swipe is completed and false otherwise.

swipe.png

Options​

Complete color​

  • The fill color shown once the swipe is completed.
  • Default: #4caf50.

Text when completed​

  • The text displayed across the control after a successful swipe.
  • Default: Swiped!.

Text when not completed​

  • The text displayed while the control has not been completed. As the handle is dragged toward the end, this text fades out (its opacity tracks the swipe progress).
  • Default: > > >.

Behavior​

  • The handle is dragged from the left (start) to the far right (end).
  • On release, if the handle reached the far right the swipe is marked completed: the Complete color fills the control and the completed text is shown.
  • On release, if the handle did not reach the far right it animates smoothly back to the start (about 300 ms) and the field stays not completed.
  • Reaching the end during the drag flips the field to completed; dragging back from the end before releasing restores the not-completed state.

Setting Mock Field and Own Value​

The Swipe stores its value as a boolean, true when completed and false otherwise. It updates the Mock and Own values when:

  • The widget is rendered (using the datasource value if present, otherwise not completed).
  • The swipe is completed (handle released at the end).
  • An external message tells it to change, clear, or reset.

Exporting only happens on the displayer. It also broadcasts the value as a sensor event named after the field (see Sensor Events), unless the update is silent.

Validation​

The Swipe does not validate itself.

Sensor Events​

  • The Swipe does not validate, so it does not send a {FORM-NAME}-valid event.

  • Whenever the value is exported, the field broadcasts a sensor event named after the field, carrying the current completion state:

    {FORM-NAME} value: [true/false]

    This broadcast is suppressed when the change comes from a silent Clear or Reset.

External Messages​

The Swipe listens to the three basic external messages:

  • Set Form: Reads the value parameter. true jumps the handle to the end and marks the field completed; false returns the handle to the start and marks it not completed. Any other value leaves the handle unchanged. Updates the Mock and Own values.
  • Clear Form: Returns the handle to the start and sets the field to not completed. Updates the Mock and Own values silently.
  • Reset Form: Behaves the same as Clear Form, returning the handle to the start and the field to not completed silently.

Value from Datasource​

  • When the field is rendered, if the bound form output datasource already holds a value for this field, the control is initialized from that boolean: true shows the handle at the end in the completed state, false shows it at the start.
Last updated on