Skip to main content

 

 

 

 
Language:
 
Applies only to Mobile Apps and Reactive Web Apps
Service Studio version:
 
 
OutSystems

Swipe Events

Template:OutSystems/Documentation_KB/ContentCollaboration
  • Edit
    Collaborate with us
    Edit this page on GitHub
  • 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.

    1. In Service Studio, in the Toolbox, search for Swipe Events.

      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.

    2. From the Toolbox, drag the Swipe Events widget into the Main Content area of your application's screen.

    3. Add a local variable by right-clicking on your screen name and selecting Add Local Variable.

    4. Enter a name, a data type, and a default value for the new variable. In this example, we enter Number, Integer, and 0 repsectively.

    5. Drag the new variable into the Main Content area of your application's screen.

    6. 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 right inside the Container widget.

    7. 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.

    8. 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.

    9. 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 - 1 for the Value.

    10. 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.

    Properties

    Property Description
    WidgetId (Text): Mandatory Element that's swipeable.
    • Was this article helpful?