Skip to main content

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:

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

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


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=""></script>

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

<!-- Place you CSS here or attach files -->
  body { 
    background: url( 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;
    font-size: 14rem;
    position: relative;
    right: 0.8rem;
    font-size: 4rem;

<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
      $("#timezone-window-div .timezone-img.png").show();
    } else {
      $("#timezone-window-div .timezone-img.gif").show();

  // on page load
  $( document ).ready(function(){


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


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!


Popular posts from this blog


About 10 years ago I tried to build APEX application on MS SQLServer. It was possible but performance was not satisfactory. (You can read this post here) ... Today I will describe how to use APEX with MySQL. Obviusly I don't think it is good idea to build APEX app only on MySQL. It can be used as part of Hybryd solution (Oracle + MySQL or Postrgres). My description covers integration with MySQL. As a result will be APEX application with Interactive Report and CRUD form based on MySQL data. Description contains two parts: First part is a MySQL site, Second part is a APEX application part Prerequisites: Oracle 11g+ APEX 18.1+ MySQL/Postgres RestSQL I. MySQL Part 1. MySQL contains simple  apexdb database with one apexutil table. 2. To use this database install RestSQL. What is RestSQL? RestSQL is an open-source, ultra-lightweight data access layer for HTTP clients. RestSQL is a persistence framework or engine in the middle tier of a classic three tier archi

TWO-Factor Authentication with APEX application.

Two-factor authentication means that you must have two factors, to access your account. The first factor is something you know, like your login and password combination. The second is something you have, like a mobile device with a security app installed. That second factor — the mobile device with a security app — adds an extra layer of protection to your account. Even if hackers steal your password, they can’t log in, because they don't have your mobile device. Try 2FA on our SANDBOX environment! It is the most popular 2FA option based on Times-based One-Time Password (TOTP) alghoritm described in RFC 6238 and RFC 4226. TOTP is supported by Google Authenticator, Microsoft Authenticator, Authy 2-Factor Authentication and many other mobile apps. The most popular online services like Facebook, Google, Twitter use TOTP to protect user's accounts. TOTP is a standard algorithm based on cryptographic hash method SHA-1. SHA-1 algorithm's implementation is available sin

New plugins to store files outside your database!

The plugins we release helps you easly upload files to Amazon AWS S3. Below we have simple installation tutorial and for more you can always visit our DEMO application. Actually, this plugin is in 2 parts: - "FMcomponent" part is APEX item. Something like native filebrowser item but fully configurable. You can always customize how it with a sparkle of CSS. - "FMproviders" part serves as connection to one of the file storage service (eg. Amazon S3, Dropbox, etc) To use it, you have to grand DBMS_CRYPTO privilege to your Oracle schema: grant execute on sys.dbms_crypto to <schema>; Next, install both plugins into your APEX application: FMcomponent and specific FMprovider (currently we provide AWS S3 FMprovider). At the end you have to install additional  package . As a schema owner open your favorite SQL editor and run as first apexutil_fm_aws.pls and second apexutil_fm_aws.plb. Now you can try to add plugins in your application. Go to Apex Ap