apex 5.1 migration and templates - apac webinar tour
TRANSCRIPT
Lino Schildenfeld 21 July 2017
Oracle APEXOur experience – Upgrading to 5.1.1
www.apexRnD.co.nzlschilde.blogspot.com@[email protected]
APACOUC Webinar Tour
...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
AUSOUG APEX webinar series organizer
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 typesBradcrumb, Button, Calendar, Label, List, Page, Popup LOV, Region, Report
APEX 5 – significant reduction in number of templates BlueJay 22 had 99 -> Universal theme 56
Biggest change was table to grids/div as main HTML elements.
Themes and templates
Custom modifications
Easy?
Enterprise identity
Standards
APEX 5, Template Options and Theme Roller
CSS export
Please do not break subscriptions to Universal Theme
Migration
3.2 -> 4.x
4.x -> 5.0
5.0 -> 5.1.1
Universal Theme migration
MAKE SURE TO READ https://apex.oracle.com/pls/apex/f?p=42:2010:::NO:::
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.
apex.oracle.comapex.world
Summary
Desktop DEMO
apex.oracle.comapex.world
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)
Error 3 – Application page
Simple page with this AJAX call apex.server.process ("deletePins");
deletepins process-> simple as delete RATE_COLLECTION. TMP_PIN_NUMBERS;
Error 3 – Application page
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
apex.oracle.comapex.world
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
Interactive Grid?!!!!
It is the next big thing
Master detail capability
Is it capable replacing IR as it is now?
Simple processing
Buggy behavior (not ready yet for full replacement)
Summary
Future sessions
Exploring the details of APEX sessions – 3 August 2017
http://www.ausoug.org.au/pages/calendar
www.apexofficeprint.com
Q&A www.apexRnD.co.nzlschilde.blogspot.com@[email protected]