To use the widget in your app, add the block as a dependency into your module and drag the block to the screen where you want the "swipe to unlock" behavior. It can also be used in the layout of the app.

The block has 3 optional input parameters. You can change the following:

• SwipePercentage: When at least this percentage of the swipe is completed, the unlock event will trigger. Default: 80
• DefaultBtnColor: Color of the swiper button. Default: gray "rgba(255,255,255, 0.8)"
• TriggeredBtnColor: Color of the button when unlock is done. Default: green "rgba(0,255,0, 0.9)"

The block has 1 mandatory and 1 optional events to be handled:

• Unlocked event: Triggered when the button is moved to the right and widget is unlocked. At this point, the widget becomes invisible. In the handler of this event, you can "enable" the screen again by removing a CSS class or refresh the data on the screen, for example.

• RefreshActionObject event: [optional] Triggered in OnReady of the widget. Use the object-type output parameter of this event to refresh the widget to its initial state when needed. The object points to the refresh action of the widget. This means you can reset the widget to its original state any time if you assign the object to a local variable and then call it with brackets in a JS node: $parameters.refreshObject();

We used this "refresh client action-to-object" approach so that we can reach the Refresh action of the widget from the consumer screen. This way we don't have to use a "Refresh" input parameter in the widget when we want it to be refreshed.

There are 2 placeholders for the slider and the button. This way, you can change the default text on the background of the slider, or add an icon on the button.

The widget is built only with minimal CSS code and pure JS. CSS variables are used as much as possible, so the widget adapts to your own app's look & feel.

Please check out the demo app for the use cases explained in this documentation.

Disclaimer: This component is meant to be used in mobile, so it uses JS touch events. Please use a mobile view of the browser to test the pattern. With a small conversion of touch events to mouse events, it can be adapted to work on "desktop" layouts.

Adapted from: https://codepen.io/Ruddy/pen/WNVNRv

Changes in v1.0.1: Small bugfix in the demo app