Migrate an application to the APEX 5.0 Universal Theme

iAdvise presented the APEX 5.0 roadshows in the first half of 2015. Besides the presentation about the new features, we provided 3 tutorials which helped the visitors to explore Oracle Application Express 5.0. Now we offer these tutorials through our blog. In this article the second tutorial is presented.

This tutorial helps you step by step through the process of migrating an application to the Universal Theme of Oracle Application Express 5.0. In this tutorial we talk about Oracle Application Express when Oracle APEX is mentioned. The intention of this tutorial is to become familiar with APEX 5.0 and its features.

We assume you have an environment where you can work with APEX 5.0.

Step 1: Pre-migration step

The Oracle APEX team has created a bookmarklet to assist with mapping your older templates to new templates because there is not always an equivalent in the Univeral Theme. This bookmarklet
will be used further on this tutorial in the Theme Switch Wizard.
We have to add the Universal Theme Migration bookmarklet to our bookmarks bar. Go to https://apex.oracle.com/pls/apex/f?p=42:2000:::NO:RP::and scroll down until this appears on your screen:

Drag and drop ‘Universal Theme Migration Helper V1.0’ to your bookmarks bar. This bookmarklet actually is a JavaScript. By adding it to your bookmarks bar it will be easy to apply it during the tutorial.

Step 2: Import an Oracle APEX 4.2 application

Before we start the migration, import an application by using the file named ‘f_sample_db_app_42.sql’. Navigate to page https://goo.gl/cg2izy and click Tutorial 2. There you will find the SQL-script. Start the import by clicking the icon ‘Import’ in the Application Builder.


In the page that appears click the button ‘Choose File’ and select file ‘f_sample_db_app_42.sql’. Leave all other values as default by Oracle APEX and click ‘Next’.


In the following page, click ‘Next’.


At the next screen, leave all defaults and click ‘Install Application’.


Again, at the next page leave all defaults. Click ‘Next’.


At the next screen, click ‘Install’.


Finally we import is ready. Click ‘Edit Application’.


Now you are in the Application Builder for the imported application. If you should take a look in the Workspace where you see all applications, you will see the application you just imported.


For now, the Application Builder is the place to continue our migration. Click ‘Utilities’.


A page with lots of options appears. Click ‘Upgrade Application’ to do some preparing steps before the Universal Theme will be applied to this application.


The next page will appear. Some actions have to be performed. You can do this by clicking the numbers one by one under the header ‘Candidate Objects’. Oracle APEX will do some actions for you in your application to upgrade some aspects to typical Oracle APEX 5.0 ‘things’.
For example, when we click the number corresponding with ‘Upgrade Flash Charts to HTML5 Charts’, a window with all affected pages, regions and objects appear.


Select all items and then click ‘Upgrade’.


When all actions are done, this same page will appear but the upgraded items will not appear anymore. Just click ‘Cancel’ and you will return to the page where all upgrade actions are shown.
Oracle APEX works a little different when doing the actions for ‘Numeric, Required, and Date Picker item based upon conditional validations’. When you click the number at the right side of this step, you will see an overview of all affected pages concercing this upgrade action. You have to walk through this pages one by one by clicking the page numbers. To describe what happens, click on the first number under the header Page. In this example, click 11.


Select all items by clicking the checkbox at the left side of header ‘Validation Type’ and click ‘Next’.


In the next page, you repeat this: so check all checkboxes (in this example only one) and click ‘Next’.


In the next page again select all items and click ‘Next’.


In the final page of this step, click ‘Upgrade’.


Repeat this for the pages that remain.

Step 3: Add Universal Theme to your application and switch

In this step we will use the Universal Theme Migration bookmarklet as mentioned at the pre-migration step. In the Application Builder navigate to Shared Components. You can do this by clicking one of these icons. The large blue icon hardly can be missed in the Application Builder. The small icon can be found at the right side almost on top of the page.



In section ‘Navigation’, click Themes.


In the next window click ‘Create’.


A wizard appears. Do not change any of the defaults and click ‘Next’.


On the next page, leave ‘User Interface’ as defaulted by Oracle APEX and click ‘Next’.


On the ‘Create Theme’ page accept default values in ‘Theme Type’ and ‘Theme’ (Standard Theme and Universal Theme (Theme 42)) and click ‘Next’.


Click ‘Create’ in the final page of this wizard.


The Universal Theme is added tot your application as shown in the next image. Click ‘Switch Theme’.


Set values as shown below and click ‘Next’.


Now page 386 appears. The URL of the page you are in contains /f?p=4000:386:13938292352804::NO::: and shows you a warning.


Now click the bookmark we added to our bookmark bar at the beginning of this tutorial. This bookmarklet supports mappings from the 3 most popular legacy themes, Theme 24, 25, and 26. It also supports any themes that are based off these legacy themes, i.e.: if your theme is a modification off those themes, the bookmarklet will do most of the mappings correctly. When the bookmarklet detects an unsupported theme is used, you will be prompted to choose which theme is closest to your theme.
The ‘old’ theme in this example is theme 25. This results in this message.


If your theme is mapped properly, each of the select list values that were successfully altered will be highlighted in green as shown in the next screenshot. Click ‘Next’ at the bottom of this page.


Now click ‘Switch Theme’.


Check the Universal Theme is one of the current themes.



Step 4: Post migration actions

The following actions have to be performed before you can make changes to your pages. This ensures no unexpected bugs arise in your application.

List items
Make sure list items for your navigation menu is correct. The ‘current of’ properties also have to be set properly. In Shared Components (Application Builder) click ‘Lists’ under Navigation. Switch to the tab ‘List Details’ and their you can select a list. Choose ‘Report Tabs’ and click on the entries that appear on your screen.  On the tab ‘Current List Entry’ check whether the settings are correct. If the ‘Current of’ properties are not set correctly, the navigation links will not be selected when you navigate to the pages.

Decide if you want to stick with Side Navigation or the Top Menu as the app’s primary navigation. Go to Shared Components and then navigate to User Interface Attributes. (The edit button with the pencil icon on it). Under tab Navigation Menu set these values as following:
  • Position: Top
  • List Template:Top Navigation Menu


If you choose to stick with side navigation then you have to select navigation icons for your theme. A default page icon will appear if you do not select icons. Go to Shared Components, then to Navigation Menu and then pick the list Navigation Menu. Now pick a list entry and click on the name.
On the page that appears you find the select list ‘Image/Class’. When you click the arrow at the right side of the item an overview of all available icons is shown. Select an icon you want and this will be set into the calling page in ‘Image/Class’.



Now we migrated the Oracle APEX 4.2 application…






…. to an Oracle APEX 5.0 application using the Universal Theme.







In fact the migration is now finished but Oracle provides in his own migration guide some best practices for managing post-migration issues and frequently asked questions and for now we refer to that guide.


That’s it for this tutorial, great job!

Are You The Smartest Contest (AYTS) 2013

This battle for all the Oracle Partners in Belgium and the Netherlands is organized by Oracle (Yves Van Looy(BE) and Charles Billar(NL)). All employees of these Oracle Partner companies can compete to be the Oracle smartest of their company for that year. Just like last year, the contest was also aiming to provide an in-depth architectural knowledge about seven different technology tracks.
Like previous editions of AYTS, iAdvise joined this year’s  AYTS contest.

This year, 17 people represented iAdvise, and tried to win the prestigious price: a business travel to the Oracle HQ in San Francisco and Las Vegas.
Six out of seven tracks were covered by the iAdvise team: Security, Data Integration, BI & Applications, HW & Software combination, Service Integration and Database & options.

This year, iAdvise also improved the oraevents site which is used for this contest. Many new features and functionalities were added to improve the user experience of this tool.  The usability and new functionalities were clearly appreciated by all the contenders, all credits goes to the iAdvise apex team who really made this a very nice tool to work with!

Of course we also had a top 3 for iAdvise: Tuur made it as ‘nummero uno’ for the security track, second place went to David for the BI track and on the third place Kristof who also followed the security tracks. Congratulations to all three!

So we had some high scores on different tracks, which ones again proves that iAdvise is very proficient in several technologies.
But even more important was that Tuur got a gigantic high score of 39/40, something that nobody ever achieved before in the AYTS history and it will likely take some time before someone will achieve an equal or higher score.
He is without question the very convincing winner of this edition, and will enjoy his trip to the States! Congratulations Tuur!

Next year will be without question very exciting, since there are a whole lot of new technologies coming up our way and of course iAdvise will be one of the participating companies!