You can use Stacked Cards UI Pattern to add swipeable cards that can be dragged in multiple directions triggering events, such as deny, approve, and archive. This pattern is ideal when you want to individually scan multiple cards.
How to use the Stacked Cards Pattern
In Service Studio, in the Toolbox, search for
The Stacked Cards 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.
By default, the Stacked Cards widget contains a List, Overlay Top, Overlay Right, and Overlay Right placeholders.
Add content to the List placeholder. In this example, from the Data tab, we drag a list of Employees into the List placeholder.
The GetEmployees aggregate is automatically created.
From the Toolbox, drag the Icon widget into the OverlayTop placeholder, and from the Pick an Icon editor, choose an icon. Click Ok.
Repeat step 4 for the OverlayRight and OverlayLeft placeholders.
To create a swipe action for the OverlayLeft placeholder, select the pattern, and from the OnLeftSwipe Handler drop-down, select New Client Action.
From the Toolbox, drag a Run Server Action onto the client action, and from the Select Action editor, navigate to the action you want the swipe left action to perform. In this example, we use the DeleteEmployee action.
From the Id drop-down, select the action Id. In this example, the Id is the currently selected employee. This means, that when the user swipes left, the currently selected user is deleted form the list of employees.
Repeat step 7 for the OverlayTop (swipe up) and OverLayRight (swipe right) placeholders.
From the Properties tab, you can change the Range Slider's look and feel by setting the (optional) properties.
After following these steps and publishing the module, you can test the pattern in your app.
|StackedOptions (StackedCardsPosition Identifier): Optional||Change stacked cards view from bottom, top, or none.
|Rotate (Boolean): Optional||If True, the rotation for each move on the stacked cards is activated. This is the default. If False, each move is not activated.|
|Items (Integer): Optional||Number of visible elements when the StackedOptions property is set to bottom or top.
|ElementsMargin||Define the distance between each element when the StackedOptions property is set to bottom or top.
|UseOverlays (Boolean): Optional||If True, overlays for swipe elements are enabled. This is the default. If False, the overlays are disabled.|