Thursday, July 13, 2017

Built with ❤️ using Oracle Application Express (APEX)

I couldn't get to my keyboard fast enough, to write this blog post.  Shakeeb Rahman showed me something last night that I wanted to share with the awesome APEX community as soon as possible.

APEX is used in literally thousands of applications within Oracle.  And in some of the latest apps that we're writing ourselves, in the footer we're including a short phrase which lets people know it was "built with Oracle APEX."  We're proud of the app, proud of the UI, and we want people in the company to know that it's an APEX app.  But Shakeeb showed me something last night that took this to a whole new level!



The instructions to add this to your APEX 5.1 application are extraordinarily simple:

  1. Create a new region on the Global Page (page 0) and set the Region Position to Footer. Set the Region Template to Blank with Attributes (no grid).

  2. Use this HTML as the Region Source:
    <span class="footer-apex">Built with 
      <span class="fa fa-heart">
        <span class="u-VisuallyHidden">love</span>
      </span> 
      using <a href="https://apex.oracle.com/" target="_blank" title="Oracle Application Express">Oracle APEX</a>
    </span>
    
  3. Add this CSS to your Theme Style by opening Theme Roller and pasting into the Custom CSS section:
    .footer-apex {font-size: 11px; line-height: 16px; display: inline-block; vertical-align: top;}
    .footer-apex .fa.fa-heart { vertical-align: top; font-size: 10px; 
        line-height: 16px; width: 16px; text-align: center; 
        transition: color 1s ease; }
    .footer-apex:hover .fa.fa-heart { color: #FF0000; animation: pulse 1s infinite; }
     
    @keyframes pulse {
        0% { transform: scale(0.9); }
        70% { transform: scale(1.25); }
        100% { transform: scale(0.9); }
    }
    

That's it!  Simple.  It might work in APEX 5.0 and later, but it will definitely work in APEX 5.1 and later.

I encourage everyone in the APEX community to add this to the footer of their applications.  Many end users don't even know they're using an APEX application, or even what APEX is.  This is an easy way to show it, and and show it with style!

BOOM!


3 comments:

APEX Developer In the USA said...

Yet another GREAT thing from the APEX development group!! Hands down they do help us developers more than we know..

Unknown said...

Thanks Joel, love it - works great in 5.0.3 as well.

Connor McDonald said...

It's right there in AskTom :-)

http://imgur.com/a/sTnhO