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:
tut2image004

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.

tut2image006

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’.

tut2image008

In the following page, click ‘Next’.

tut2image010

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

tut2image012

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

tut2image014

At the next screen, click ‘Install’.

tut2image016

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

tut2image018

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.

tut2image020

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

tut2image022

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.

tut2image024

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.

tut2image026

Select all items and then click ‘Upgrade’.

tut2image028

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.

tut2image030

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

tut2image032

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

tut2image034

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

tut2image036

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

tut2image038

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.

tut2image040

tut2image042

In section ‘Navigation’, click Themes.

tut2image044

In the next window click ‘Create’.

tut2image046

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

tut2image048

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

tut2image050

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

tut2image052

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

tut2image054

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

tut2image056

Set values as shown below and click ‘Next’.

tut2image058

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

tut2image060

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.

tut2image062

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.

tut2image064

Now click ‘Switch Theme’.

tut2image066

Check the Universal Theme is one of the current themes.

tut2image068

 

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.

tut2image070
Navigation
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

tut2image072

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’.

tut2image074

tut2image076

Now we migrated the Oracle APEX 4.2 application…

tut2image078

tut2image080

tut2image082

tut2image084

tut2image086

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

tut2image088

tut2image090

tut2image092

tut2image094

tut2image096

tut2image098

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.

https://apex.oracle.com/pls/apex/f?p=42:2000:::NO:RP::

That’s it for this tutorial, great job!

2 thoughts on “Migrate an application to the APEX 5.0 Universal Theme

    1. Hi,

      I’m not sure if there is one direct way to migratie from APEX 3.2. to 5.0.
      Because of the flexibility of APEX I would give it a try to migrate at once from 3.2 to 5.0. If this doesn’t give you the results you prefer I should first migrate to a 4.x environment. If that result is fine for you, then migrate it to a 5.0-environment.

      Personally, I am not experencied in migrate from 3.2 to 5.0. If you need assistance in migration your application(s), you can always contact iAdvise to inform about consultancy.

      Kind regards and good luck with your migration,
      Hubert Schollen

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

About scholhu