How to flipped content on hyperlink click(manual)
Application Type
Traditional Web
Service Studio Version
11.10.17 (Build 40598)
Platform Version
11.10.1.29303

Hi,

I have  sample requirement where I have to flipped the "User Login" to "Sample Users" selection screen on login page.

I have used Flipped control.

Front side - Username/password/login button / "Sample Users"(click on "Sample Users" flipped back side)

Back side  - (3 sample users)/ "<Back" button  click flipped to frontside.


I have select below properties on flip control. but flipped  is not working. 

Thanks, In Advance.


Front side :


Back Side :


mvp_badge
MVP
Solution

Hi Amit,

For the mentioned use case, I could suggest two solutions out of many possible approaches.

  1. Eidt and customize the FlipContent (OutSystemsUIWeb Module) implementation as per your requirement, or else
  2. Create your own custom unit with the use of HTML + CSS + JS

See this sample screen CustomFlipPannelDemo

Refer to the attached .oml file

  • As part of customization of the OutSystemsUIWeb > FlipContent widget, I have removed all the js code related to the Flip-Content click & hover event listener definition, instead included the link click event listener definition
  • For the second approach, I have referred to -> https://codepen.io/desandro/pen/LmWoWe


Hope this helps you in crafting the final solution :)


Kind regards,

Benjith Sam

TWALabCustomFlipPannelDemo.oml

Hi @amitkumar mistry 

Remove the action on the handler and change the trigger to Click option, like below



Regards

Gonçalo Almeida

Thank you for your answer. I am looking for flipping content on "Sample Users" which is under the Login Button. 

again please click on your given URL. I need only flip when user click on "Sample Users".In your test URL The way you shown will click on other parts is also flipped the content. .

for example in your test link if you click other part like around the button or other parts it will flipped . 

That behavior I don't want. I just want to click on "Sample Users" 

mvp_badge
MVP
Solution

Hi Amit,

For the mentioned use case, I could suggest two solutions out of many possible approaches.

  1. Eidt and customize the FlipContent (OutSystemsUIWeb Module) implementation as per your requirement, or else
  2. Create your own custom unit with the use of HTML + CSS + JS

See this sample screen CustomFlipPannelDemo

Refer to the attached .oml file

  • As part of customization of the OutSystemsUIWeb > FlipContent widget, I have removed all the js code related to the Flip-Content click & hover event listener definition, instead included the link click event listener definition
  • For the second approach, I have referred to -> https://codepen.io/desandro/pen/LmWoWe


Hope this helps you in crafting the final solution :)


Kind regards,

Benjith Sam

TWALabCustomFlipPannelDemo.oml

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.