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:

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. Also my suggestion would be to disable our new Automatic Time Zone process on a login page to your application. It is not needed there.


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!

Comments

Popular posts from this blog

ORACLE APEX with MySQL !

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/PostgresRestSQL
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 architecture: client, application ser…

Oracle APEX – Amazon ALEXA integration WITHOUT Amazon Lambda ! (PART 2)

In the last blog post I prepared Oracle side. In this post I will show, how to prepare ALEXA Skill and how to integrate all layers.

Few weeks ago Amazon implemented new version of Alexa Skill Kit. Alexa Skill Kit is like a APEX builder. Low code technology, so you don't need to write any code :)

Let's start ! Go to Amazon Developer Console

1. Click Get Started on Alexa Skills Kit


2. As you can see on screen below there is already one skill on my list. Click on Create Skill to Create new one.

3. The name of my Skill will be - APEXUTIL Pizza  :) but you can name it as you wish.


4. Select Custom

5. Create Invocation. Users say a skill's invocation name to begin an interaction with a particular custom skill. For example, if the invocation name is "apex pizza", users can say: "Alexa, ask apex pizza ...."

6. One skill can have one or more Intents. An intent represents an action that fulfills a user's spoken request. For demo I'll use only one Intent: &…

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 since Oracle 1…