Tuesday 6 February 2018

Region Flip in APEX

Purpose of this post is to demonstrate region flips in APEX. 

The region flip feature provides a rich user effect in UI/UX of your application by flipping the regions without actually loading the page to toggle between the details.

Below are its implementation steps:

Step 1: In order to make the Flip function work, first you need to include jQuery flip.js on your page. Click here to download the file (flip.js - it's in the src folder in the download).
Step 2: Upload the flip.js file into Static Application/Workspace Files under shared components. Copy the Reference link of the file. i.e #APP_IMAGES#flip.js or #WORKSPACE_IMAGES#flip.js
Step 3: Edit the page where you want to have the region flip, Under Javascript > File URLs > paste the reference link got in Step 2. 
Step 4: Edit Page > Under Javascript > Execute when page loads > enter the below code 

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

Step 5: Create your parent region that will hold the 2 new child regions, set static ID of parent region to 'card' or anything you want to call it, as long as you update the flip.js file above.
Step 6: For the 2 child regions, set the 'Column CSS Classes' under region Layout section to 'front' and 'back' respectively.
Step 7: Create respective button on each child regions, and call a dynamic action on Click of each button to 'Execute JavaScript Code' as mentioned below

'$("#card").flip('toggle');'

For more flip options refer the below URL:
http://nnattawat.github.io/flip/

Click here to see the DEMO of this feature. Use demo/demo to login.

Cheers,
Prashanth

Universal Theme - Side Navigation Menu Child Entry Icon Alignment

Hi, There is an issue with the Side Navigation Menu Child Entry Icon Alignment in Universal theme if you are using APEX 5.1 or prior vers...