Skip to content

Latest commit

 

History

History
97 lines (55 loc) · 4.19 KB

flip-content.md

File metadata and controls

97 lines (55 loc) · 4.19 KB
Raw
tags summary locale guid app_type platform-version figma
runtime-traditionalweb;
Explore the advanced use cases and CSS selectors for the Flip Content UI Pattern in OutSystems 11 (O11).
en-us
478229ef-fead-4fea-be67-f0fdd66c7209
traditional web apps
o11

Flip Content Reference

Applies only to Traditional Web Apps.

Layout and classes

Diagram showing the layout and classes for Flip Content UI Pattern

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.

    Screenshot of the Flip Content pattern in the preview stage

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

    Screenshot showing conditional content within the Flip Content pattern

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

    Screenshot of the events configuration for the Flip Content pattern

  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.

    Screenshot showing the Ajax Refresh node configuration in Flip Content pattern

  10. Publish and test.

    <iframe src="https://player.vimeo.com/video/1001631534" width="428" height="386" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="">Video demonstrating the interaction with the Flip Content pattern.</iframe>

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.

    Screenshot of the Flip Content pattern in the preview stage

  5. Drag a button into the preview.

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

    Screenshot showing the button configuration to interact with Flip Content pattern

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

    Screenshot of the events configuration for the Flip Content pattern

  8. Set the WidgetId in ToggleFlipContent.

    Screenshot of setting the WidgetId in the ToggleFlipContent server action

  9. Publish and test.

    <iframe src="https://player.vimeo.com/video/1001631555" width="428" height="386" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="">Video demonstrating the interaction with the Flip Content pattern.</iframe>