oracle apex migration to 5.1 - our experience

Lino Schildenfeld 26th April 2017

Oracle APEXOur experience – Upgrading to 5.1.1

www.apexRnD.co.nzlschilde.blogspot.com@[email protected]

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?

Safe harbor……….

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

Themes and templates

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 undefinedat 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 / PrintingInclude In Export / PrintYes 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 errorUncaught TypeError: Cannot read property 'pageItems' of nullat 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_SOURCE_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 definedat 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.1APEX 5.0 - fine

APEX 5.1.1 - broken

Summary

Future sessions

APEX Intro part I – 27 April 2017

http://www.ausoug.org.au/pages/calendar

www.apexofficeprint.com

Q&A www.apexRnD.co.nzlschilde.blogspot.com@[email protected]

oracle apex migration to 5.1 - our experience

Software