Make your Automatic Time Zone pretty

While the automatic time zone works, it looks bad. Often when the main page is heavy user needs to look on the white page for a while. APEX doesn't let you change this page natively. I have a nice MIP (Make It Pretty) for you. Check the results:

Try our sandbox demo to see the result!

Steps to implement the solution:
1) In "Application -> Shared Components -> Application Processes" create a process "On Load: Before Header" with this PL/SQL:

declare
  v_timezone varchar2(4000) := apex_util.get_session_time_zone();
begin
  
  -- if no timezone then go to error message
  if( v_timezone is null ) then
    raise_application_error(-20001, 'Get timezone');
  end if;

end;

2) Add this HTML to "Process Error Message"

<!-- All we do is in this container will be moved at the top of the page when page loads -->
<div id="timezone-window-div">
  
<!-- I would suggest using JQUERY stored on your side, not from google, the link might change  -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Removed at page load to not display loading javascript elements, smoother -->
<style class="toBeRemoved">
  .t-Body {display: none !important;}
</style>

<!-- Place you CSS here or attach files -->
<style>
  body { 
    background: url(http://apexfilesdir.s3.amazonaws.com/apexutil/blog/sandbox1920x1080bw.jpg) no-repeat center center fixed;
    background-size: cover;
    height: 100%;
    overflow: hidden;
  }
  
  .timezone-html { 
    align-items: center;
    color: white;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    font-weight: 500;
    justify-content: center;
    margin-top: 25rem;
    position: relative;
    text-align: center; 
    z-index: 100;   
   }
   
  .timezone-header { 
    line-height: 3.2rem;
    margin: 0rem 1rem;
    position: relative;
    text-align: left;
    top: 2rem;
  }
  
  .big-part{
    font-size: 14rem;
    position: relative;
    right: 0.8rem;
  }
  
  .small-part{
    font-size: 4rem;
  }
</style>

<!-- JAVASCRIPT -->
<script type="text/javascript">
  
  function isSafari(){
    var ua = navigator.userAgent.toLowerCase(); 
    if (ua.indexOf('safari') != -1) { 
      if (ua.indexOf('chrome') > -1) {
        return false; // Chrome
      } else {
        return true; // Safari
      }
    }
    return false;
  }
  
  // this function is taken from ORACLE apex timezone auto population functionality
  function detectTimeZone(){
    var lGmtHours = -(new Date()).getTimezoneOffset();
    var lHours = parseInt(lGmtHours/60);
    var lMinutes = lGmtHours%60;
    // replace #READ CONS of the article# and add tz minutes
    var lLink = window.location.href.replace(/\#[a-z\_]+\#/gi, "").replace(/\&tz\=[0-9]+\:[0-9]+/i, "") + '\u0026tz='+lHours+":"+(lMinutes<10?"0"+lMinutes:lMinutes);
    
    // redirect
    window.location.href = lLink;
  };

  // Function prepares page to look as we desire it to look
  function loadPage(){
    $("body").prepend($("#timezone-window-div")); // move itself out 
    $(".t-Login-container").remove(); // and remove apex default error box

    // on Safari GIF doesn't work on redirect, try to see what I mean
    if(isSafari()){
      $("#timezone-window-div .timezone-img.png").show();
    } else {
      $("#timezone-window-div .timezone-img.gif").show();
    }

    $(".toBeRemoved").remove();
    detectTimeZone();
  }
  
  // on page load
  $( document ).ready(function(){
    loadPage();
  });

</script>

<!-- Html that will be displayed - CHANGE HTML HERE -->
<div class="timezone-html">
  <img class="timezone-img gif" src="http://apexfilesdir.s3.amazonaws.com/apexutil/blog/timezonePage.gif" style="display: none;">
  <img class="timezone-img png" src="http://apexfilesdir.s3.amazonaws.com/apexutil/blog/timezonePage.png" style="display: none;">
  <span class="timezone-header">
    <span class="big-part">Sandbox</span>
    <br>
    <span class="small-part">Automatic Time Zone (3sec delayed)</span>
  </span>
</div>

</div>

3) Turn off current native Automatic Time Zone ("Shared components -> Globalization Attributes"). If you leave it be then this solution won't work - apex has higher priority.


Pros of this solution:
- Easy to implement (one process to rule them all)
- Works on any page, so copying sessions, new sessions, deep linking, public pages will set you timezone and correctly redirect

Worth to know:
- Safari browser doesn't allow animations when page is redirecting. We tried different ways to display some cool features on a page but it ended up with static images for Safari and animations only for other browsers. If you have a solution, let us know!