Monday, 10 April 2017

APEX 5.1 migration - compatibility tips

APEX 5.1 migration

Our experience going 5.1

Compatibility mode issues

The day has come to upgrade your system to APEX 5.1. This is a short post about things we encountered along the way. 

This post covers for Desktop application template version errors that uses compatibility mode 4.2. 

Idea is to show case that even though it seems simple there might be more to it in terms of upgrade plans to 5.1.1 than you and I initially thought. 

For mobile template errors there will be a separate post. 

Please note that I will be updating it as things pop up so watch the space.

1. First on the menu:

Ajax JS calls causing:
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 .

If you dig into debug mode you would get some more details where APEX was listing what page item this problem occurred for. Bottom of the problem was some page items had Security attribute Session State Protection set to Check sum required - Session Level and were used in AJAX calls which now cause security errors to be shown. Solution of the problem was to change this as:

2. problem had to do with Old Custom Theme template and application that was running in 4.x compatibility mode.

Apex 4.x compatibility apps have an issue with the home breadcrumb not substituting values rendered URL looks like this:

How to fix this? One way is to chance this breadcrumb template from:

To this:
There are other ways how to do call this JS fix but for clarity of the blog I used "After Last" section.
3. problem - Dialogs for applications running in compatibility mode 4.x version

Front dialog not at correct z-index – unable to click on it due to modal click blocker being in front. Selenium tests still worked fine.
How to fix this? Add CSS style to your template
body .ui-dialog.ui-front{z-index:1001 !important} 

4. problem - Interactive report Filter Issue for 4.x compatibility mode
When you select Action-> Filter, Chrome console throws this error and it does not display filter options dialog screen:

First hint was this was related to old Classic Date Picker functionality that has been decommissioned.

This was confusing as on this IR there was no usage of Classic Date Picker or anything like that nor did the page contain any page items that were Date Pickers. Plus some IR of the same application were working perfectly fine while few others failed. This indicated that APEX 5.1 LS libraries were not the cause of the problem otherwise it would not have worked at all, right?

Solution: After significant amount of hours investigating, what narrowed it down was a desperate page export and comparison between working and non working IR page.

Core cause of all problems had nothing to do with Classic Date Picker nor with any JQuery conflict. It came down to bad programming practice and simple region Static ID set by developers. Pages where Filter action had an issue had ID set something similar to: 

I guess you see the problem straight away. What this invalid ID did it eventually broke JS functionality of IR as it was trying to use ID to handle user interactions. Once we updated IDs to include no spaces and less characters things were back to normal. All IR Filter actions started working again.

Hard lesson learned here. Only hint to APEX would be to add a check to static ID that it has to be a valid HTML ID for DOM element. Please note that same IDs in APEX worked perfectly fine. 

5. problem - apex.server.process error

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)

Scenario: simple application page using this AJAX call

apex.server.process ("deletePins");

For deletePins application process:
Solution was to rewrite the AJAX call:

apex.server.process ( "deletePins", {
x01: "test",
pageItems: ""
}, {
success: function( pData ) {
console.log("(done) deletePins ");;
} );
Seems like call back needs to have a success handler.

6. problem - Download is showing additional column with URL details

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

Export / Printing
Include In Export / Print
Yes/No -> set to NO defaulted to YES

7. problem - Internet explorer issue with Interactive reports and tabs

<meta http-equiv="X-UA-Compatible" content="IE=8" />
Check if your templates include the line above. This caused IE application to show heaps of related issues in DOM inspector.

Object doesn't support property or method 'submit'
and few others. By removing the line in yellow things were back to normal. Application was running template 24 in 5.0 compatibility mode. 

8. problem - Minor CSS class/DOM changes between APEX 5 and APEX 5.1

This caused some testing scripts to fail. Once you inspect the DOM you would notice small DOM changes and all you have to do is update your test scripts.

This is all for now. Over and out.

Last Update 27/04/2015

Latest update 03/05/2017

1 comment: