Dienstag, 23. Januar 2018

Flip regions in Oracle APEX

Let start

1- Include Javascript Flip File

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


2-  Create a region called "Parent Region".

This region must have a subregion named "Sub Parent" Region

ID for "Parent Region" card

The ID must be named card to get the flip to work

3-  Create a region called "Sub Parent Region".

This region must have the 2 sub regions that we want to flip.

css class for "Sub Parent Region" front

The css class must be front, to have the flip to work

3- Create your first subregion for "Sub Parent Region" with the name "All Users"

Add your Select statement in this region

- RegionID: ALL_USERS




4- Create your second subregion for "Sub Parent Region" with the name "All Managers"

Add your Select statement in this region

-RegionID: ALL_MANAGERS



5- Invoke this code while loading the page

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

 $("#ALL_MANAGERS #report_ALL_MANAGERS").attr('style','opacity:0;');
 $("#ADD").hide();


6- Create 2 Javascript functions

var flipse=function(){
    $("#card").flip(true);
     $("#ADD").show();
     $("#SAVE").hide();
    $("#ALL_MANAGERS #report_ALL_MANAGERS").attr('style','opacity:1;');
     $("#ALL_USERS #report_ALL_USERS").attr('style','opacity:0;');
    
}

var flipsa=function(){
    $("#card").flip(false);
    $("#ADD").hide();
    $("#SAVE").show();
    
    $("#ALL_USERS #report_ALL_USERS").attr('style','opacity:1;');
    $("#ALL_MANAGERS #report_ALL_MANAGERS").attr('style','opacity:0;');
    
}



7- Add flipse function as URL in Button "ALL Managers"




8- Add flipsa function as URL in Button "ALL Users"



9- Demo
https://apex.oracle.com/pls/apex/f?p=123868:38


You can add more options to flip. Here is the documentation

Example:

$("#card").flip({
  trigger: 'manual',
  axis: 'y'
});
$("#card").flip({
  trigger: 'manual',
  axis: 'x'
});







Kommentare: