You can use the Swipe Events UI Pattern to enable swiping on a specific widget.
How to use the Swipe Events UI Pattern
The following example shows how you can use the Swipe Events UI pattern to increase (swipe right) and decrease (swipe left) a number.
In Service Studio, in the Toolbox, search for
The Swipe Events widget is displayed.
If the UI widget does not display, it may be because you used a ready-made app, which deletes unused widgets from the module. To make additional widgets available in your app:
a. Go to Module > Manage dependencies.
b. Search for and select the relevant Producer, for example OutSystemsUI. Ensure Show All is selected.
c. On the Public elements for the selected Producer displayed on the right, ensure Show All is selected.
d. Search for and select the element you want to add, and click Apply.
e. In Service Studio, in the Toolbox, search for the widget again.
From the Toolbox, drag the Swipe Events widget into the Main Content area of your application's screen.
Add a local variable by right-clicking on your screen name and selecting Add Local Variable.
Enter a name, a data type, and a default value for the new variable. In this example, we enter
Drag the new variable into the Main Content area of your application's screen.
From the Toolbox, drag the Container widget into the Main Content area of your application's screen and on the Properties tab, enter a name. In this example we enter
SwipeContainer. We also add the text
Swipe left or rightinside the Container widget.
From the Widget Tree, select the Swipe Events widget, and on the Properties tab, from the WidgetId drop-down, select the Id of the container you just created. In this example, we select SwipeContainer.Id.
To set the action for when the user swipes left, remaining on the Properties tab, from the SwipeLeft Handler drop-down, select New Client Action.
Assign the relevant logic you want the swipe left action to perform. In this example, we want the number to decrease by 1 every time the user swipes left. To do this, we drag an Assign onto the client action, set the Variable to Number, and enter
Number - 1for the Value.
Repeat steps 8 and 9 for the SwipeRightHandler and so that the number increases when the user swipes right, enter
Number + 1.
After following these steps and publishing the module, you can test the pattern in your app.
|WidgetId (Text): Mandatory||Element that's swipeable.|