Ticker

6/recent/ticker-posts

Flip Region in Oracle APEX - Javainhand Tutorial

In this Oracle APEX Tutorial, We will explore the Flip Region in Oracle APEX.

Flip Region in Oracle APEX

Actually I have received a comment on my flip region video which is uploaded on my youtube channel. One of our subscribers told us that this is not working so I have decided to write a post about Oracle APEX Flip Region.

How to Flip Region in Oracle APEX 21.1

You can try the following steps to Flip Region using Jquery in Oracle APEX.

Step 1:- Make a simple screen design which I have shared below.

How to Flip Region in Oracle APEX

Step 2:- Add the following Javascript library in your page file URLS section.

https://code.jquery.com/jquery-2.1.4.min.js
https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js

Step 3:- Add a static id (card) in the parent region. The following screenshot will help for better understanding.

How to Flip Region in Oracle APEX 21.1

Step 4:- Add (front) class to column CSS classes in the first subregion and Add (back) class to column CSS classes in second sub region. The following screenshot will help for better understanding.

Oracle APEX Filp Region

Step 5:- Create click dynamic action with execute javascript code true action on both buttons.

Event:-Click
Selection Type:-Button
Button:-GO_TO_CHILD_2
Identification:- Execute JavaScript Code
Code:-$("#card").flip('toggle');

Jquery Oracle APEX Filp Region

Step 6:- Follow step 5 again for the second dynamic action on the second button with the same JavaScript code.

Step 7:- Add the following JavaScript Code in Function and Global Variable Declaration Section.

$("#card").flip({
  trigger: 'manual'
});

That's all for today, I think(Flip Region in Oracle APEX) post will be helpful for you. If you like the post then share your view in the comment box.

Please support our youtube channel so we will upload more Oracle APEX Tutorial videos and blogs.

Click here for demo

Reference:-

http://nnattawat.github.io/flip/

Post a Comment

0 Comments