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.
We assume you have an environment where you can work with APEX 5.0.
Step 1: Pre-migration step
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:
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.
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!