Skip to main content

 

Traditional Web

 

Applies only to Traditional Web Apps

 

OutSystems

Flip Content Reference

  • Edit
  • 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 the Flip Content 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 Flip Content 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 Flip Content 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?