Apex 5.1 migration and templates - APAC webinar tour

Lino Schildenfeld 21 July 2017

Oracle APEXOur experience – Upgrading to 5.1.1

www.apexRnD.co.nzlschilde.blogspot.com@LinoSchildelschilde@apexRnD.co.nz

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@LinoSchildelschilde@apexRnD.co.nz