Oracle APEX migration to 5.1 - Our experience

Lino Schildenfeld 26th
April 2017
Oracle APEX
Our experience – Upgrading to 5.1.1
www.apexRnD.co.nz
lschilde.blogspot.com
@LinoSchilde
lschilde@apexRnD.co.nz
AUSOUG WA

...in short
APEX R&D manager for NZ and AU
10+ years Oracle development experience
APEX Blogger and enthusiast
NZ APEX meetup organizer
Conference speaker
Who am I?

APEX Template Basics
apex.oracle.comapex.world

What we know
Themes and templates are responsible for the look and feel
of APEX applications.
Nine different types:
Bradcrumb, Button, Calendar, Label, List, Page, Popup LOV,
Region, Report

Custom modifications
Easy?
Enterprise identity
Standards
APEX 5 and Theme Roller
CSS export

Migration
3.2 -> 4.x
4.x -> 5.0
5.0 -> 5.1.1

APEX 5.1.1 release notes
https://apex.oracle.com/otn/

Our story
20 applications -> 2 mobile most running apex 5.0
about 6 running in 4.2 compatibility mode.

Desktop DEMO

Error 1 – Page Item
"error":"Ajax call returned server error ORA-20987: APEX - Session state protection
violation: This may be caused by manual alteration of a URL containing a checksum
or by using a link with an incorrect or missing checksum. If you are unsure what
caused this error, please contact the application administrator for assistance. - Contact
your application administrator. for ."

Error 1
"error":"Ajax call returned server error ORA-20987: APEX - Session state protection
violation: This may be caused by manual alteration of a URL containing a checksum
or by using a link with an incorrect or missing checksum. If you are unsure what
caused this error, please contact the application administrator for assistance. - Contact
your application administrator. for ."

Error 2 – Interactive report
Chrome console throws this error when you select Action- > Filter

Error 2 - IR
http://lschilde.blogspot.com.au/2017/04/apex-51-migration-compatibility-tips.html
4. problem
Bad programming practice example.

Error 3 – Application page
Uncaught TypeError: Cannot read property 'pageItems' of undefined
at i (desktop.min.js:10)
at h (desktop.min.js:10)
at Object.a.process (desktop.min.js:10)
at Object.handleJson [as success] (map_rbgassessment.js:232)
at i (jquery-2.2.3.min.js:2)
at Object.fireWith [as resolveWith] (jquery-2.2.3.min.js:2)
at z (jquery-2.2.3.min.js:4)
at HTMLScriptElement.c (jquery-2.2.3.min.js:4)
at HTMLScriptElement.dispatch (jquery-2.2.3.min.js:3)
at HTMLScriptElement.r.handle (jquery-2.2.3.min.js:3)

Simple page with this AJAX call
apex.server.process ("deletePins");
deletepins process-> simple as
delete RATE_COLLECTION. TMP_PIN_NUMBERS;

SOLUTION rewrite AJAX call
apex.server.process ( "deletePins", {
x01: "test",
pageItems: ""
}, {
success: function( pData ) {
console.log("(done) deletePins ");
console.info(data);
}
} );

Error 4 – Report region
ISSUE: Download is showing additional column with url
Report on a page had SQL query for the source
SELECT '<a href="javascript:apex.confirm(''Do you want to
return this organism as a member?'', ''REVIVE_' || CARRIER_ID
|| ''');"><img src="#WORKSPACE_IMAGES#red-delete.svg"
alt="revive" title="Revive Member"></a>'
SHOW demo....

Error 4 – Report region
SOLUTION
Export / Printing
Include In Export / Print
Yes No -> set to NO defaulted to YES

Error 5 – Home breadcrumb link
Apex 4.x compatibility apps have an issue with the home breadcrumb not
substituting values
Rendered URL looks like this:
http://agfjsrmw605.agric.wa.gov.au:9004/apex/eds/f?
p=&APP_ID.:HOME:&SESSION.

Error 5 – Home breadcrumb link
http://lschilde.blogspot.com.au/2017/04/apex-51-migration-compatibility-tips.html
2. problem

Other
ERROR 6:
Dialogs for applications running in compatibility:
Front dialog not at correct z-index – unable to click due to modal click blocker
being in front. (Selenium tests still work)
Workaround – add style
body .ui-dialog.ui-front{z-index:1001 !important}
ERROR 7: Change in Y/N behaviour:
The Yes/No field type has changed to Switch – but does not allow null values.
Workaround – change to LOV dropdown with Y/N and allow null value.

Mobile DEMO

1 apex.server.process
ERROR 1:
Simple page when rendered would give this error
Uncaught TypeError: Cannot read property 'pageItems' of null
at i (mobile.min.js?v=5.1.1.00.08:10)
at h (mobile.min.js?v=5.1.1.00.08:10)
at Object.a.process (mobile.min.js?v=5.1.1.00.08:10)
at toggleFavourite (f?
p=106:5:21554343857848::NO:RP,10:P5_STATION_CODE,P5_STATION_NAME,P5_S
OURCE_PAGE:BA, Badgingarra,1:200)
at <anonymous>:1:1

1 apex.server.process
The core of the problem was this JavaScript
<script>
function toggleFavourite() {
apex.server.process (
"togglefavourite",
null,
{
dataType: 'text',
success: function(isFavourite) {
if(isFavourite=='Y') $
('#favouritebutton').addClass('favourite');
else $('#favouritebutton').removeClass('favourite');
}
} );
}
</script>
NULL was an issue

2 invalid JSON
togglefavourite PROCESS:
begin
htp.prn('Y');
end;
Now this became an invalid JSON as characters need a quotes htp.prn('"Y"');

3 Map error
Uncaught ReferenceError: google is not defined
at HTMLDivElement.eval (eval at globalEval (jquery-
2.2.3.min.js?v=5.1.1.00.08:2), <anonymous>:39:20)
at HTMLDivElement.e (jquery-2.2.3.min.js?v=5.1.1.00.08:3)
at HTMLDivElement.dispatch (jquery-2.2.3.min.js?
v=5.1.1.00.08:3)
at HTMLDivElement.r.handle (jquery-2.2.3.min.js?
v=5.1.1.00.08:3)
Page 15

3 Map error
By changing reference to a a Google JS library from inline on
page to page template
https://maps.googleapis.com/maps/api/js?
key=&GOOGLE_API_KEY.&v=3.26&libraries=weather

4 Menu error
bigSlide menu JS
Menu did not work after Save or any navigation happened in the
application was clicked.
Lets have a look at Page with right panel template

4 Menu error
problem was in new way APEX template work (since 4.2 version)
If you are on page ID 1 and navigate to page ID 5 menu stops working because your
page DOM holds more elements with same ID.
Why? inspect your DOM when you navigate from page to page
<div id="P1" data-role="page" data-apex-page-transition="none"
data-apex-popup-transition="none" data-theme="c" data-url
<div id="P5" data-role="page" data-apex-page-transition="none"
data-apex-popup-transition="none" data-theme="c" data-url.....
.....
We had a button on page 0 called Menu with static ID = rightpanel-link. JavaScript
was triggering on ID click which was now broken as multiple existed on same page.
work around apply logic but with the use of a classes.....
insted of $('#rightpanel-link').bigSlide(
$('.rightpanel-link').bigSlide(.....

4b Menu error
Another menu issue showing blank. Region had a condition not to render on page
101.
Due to 101 condition?????? For some reason content was not loaded in.

APEX 5.1.1 Mobile link bug
Demo - APEX mobile bug
I tested this on apex.oracle.com and on new application using 5.1
APEX 5.0 - fine
APEX 5.1.1 - broken

Future sessions
APEX Intro part I – 27 April 2017
http://www.ausoug.org.au/pages/calendar

Q&A
www.apexRnD.co.nz
lschilde.blogspot.com
@LinoSchilde
lschilde@apexRnD.co.nz

Oracle APEX migration to 5.1 - Our experience

Recommended

More Related Content

What's hot (20)

Similar to Oracle APEX migration to 5.1 - Our experience (20)

More from Lino Schildenfeld (6)

Recently uploaded (20)

Oracle APEX migration to 5.1 - Our experience

Editor's Notes