Apex 5.1 migration and templates - APAC webinar tour Our experiences going to 5.1 and issues we found working on custom themes.

1. Lino Schildenfeld 21 July 2017
Oracle APEX
Our experience – Upgrading to 5.1.1
www.apexRnD.co.nz
lschilde.blogspot.com
@LinoSchilde
lschilde@apexRnD.co.nz
APACOUC Webinar Tour

2. ...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?

3. Safe harbor……….

4. APEX Template Basics
apex.oracle.comapex.world

5. 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
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.

6. Themes and templates

7. Custom modifications
Easy?
Enterprise identity
Standards
APEX 5, Template Options and Theme Roller
CSS export
Please do not break subscriptions to Universal Theme

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

9. Universal Theme migration
MAKE SURE TO READ
https://apex.oracle.com/pls/apex/f?p=42:2010:::NO:::

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

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

12. Summary

13. Desktop DEMO
apex.oracle.comapex.world

14. 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 ."

15. 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 ."

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

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

18. 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)

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

20. 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);
}
} );

21. 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....

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

23. 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.

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

25. 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.

26. Mobile DEMO
apex.oracle.comapex.world

27. 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

28. 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

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

30. 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

31. 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

32. 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

33. 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(.....

34. 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.

35. 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

36. 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)

37. Summary

38. Future sessions
Exploring the details of APEX sessions – 3 August 2017
http://www.ausoug.org.au/pages/calendar

39. www.apexofficeprint.com

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