Skip to main content

 

Patterns

 

Applies only to Traditional Web Apps
OutSystems

FlipContent

A container that builds a flippable widget with placeholders for front and back elements.

Use the FlipContent to prioritize information display, keeping the interface uncluttered. Show critical information first, revealing more details with a flip.

How to use

  1. Drag the FlipContent pattern into the preview.

  2. Set the content in the front and back placeholders.

  3. Publish and test.

Input Parameters

Input Name Description Type Mandatory Default Value
Trigger Set the trigger event for the flip. It can be a mouse hover or a click event. Trigger Identifier False Entities.Trigger.Hover
ExtendedClass Add custom style classes to this Block. Text False none

Layout and Classes

CSS Selectors

Element CSS Class Description
.flip-content .flip-content.is--hover When Trigger parameter is Hover
.flip-content .flip-content.is--click When Trigger parameter is Click
.flip-content .flip-content.is--click.is--flipped When FlipContent is flipped

Advanced Use Case

Use the Events on FlipContent pattern

It is possible to interact with other patterns or trigger actions with FlipContent events. To use the events, create a screen action to hold the event.

  1. Create a local Boolean variable and name it "Flipped".

  2. Drag the FlipContent pattern into the preview.

  3. Set the content in the front and back placeholders.

  4. Drag a container into the preview and set the Name to AlertEvent.

  5. Drag an If condition into the container and set the condition to "Flipped".

  6. Set the content in the True and False branches (for instance, the Alert pattern).

  7. Select the FlipContent pattern and in the Events section, create a new screen action to hold the event.

  8. Drag the Assign tool in the screen action to assign the Flipped local variable to the isFlipped event variable.

  9. Drag the Ajax Refresh node into the screen action and set AlertEvent as the parameter to update the container on the screen. Remove the animation effect.

  10. Publish and test.

Use the Toggle server action on FlipContent pattern

It is possible to use a button or containers to interact with FlipContent by using a server action ToggleFlipContent.

  1. Create a local Boolean variable and name it "Flipped".

  2. Drag the FlipContent pattern into preview and set the Name property to FlipContentToggleAction.

  3. In FlipContent, set the Trigger to Manual.

  4. Set the content in the front and back placeholders.

  5. Drag a button into the preview.

  6. Set the method to Ajax Submit and create a new screen action.

  7. In the screen action, go to Logic tab and drag the ToggleFlipContent server action into the screen action.

  8. Set the WidgetId in ToggleFlipContent.

  9. Publish and test.

  • Was this article helpful?