Tuesday, 12 February 2019

APEX 18.2 and IG Detail view issue

APEX 18.2 and IG Detail view


How to display url based images in your IG cards?


Interactive grid Detail view issue

While it is still fresh I want to write down very interesting feature we encountered working with Interactive grid Detail view last week.

Brief was simple we wanted to have a reporting region base on SQL query that would show us cards and ideally leverage lazy loading as infinite scrolling. Straight away IG rang a bell.

Cutting the story short, we started playing with IG Cookbook application that is great resource to learn about IG in general by John Snyders

Obvious candidate is page 20 titled IG Cards.

It is doing all what we wanted it has a card template embedded it is based on SQL query and has infinite scrolling support. Perfect!

Requirement #2 is let’s display image inside of the card but not one from Font APEX but any image accessible over URL.

Idea to get to this is to  
1. modify your query on page 20 add a column that would hold your URL. 
Something like '#WORKSPACE_IMAGES#any.gif' as img_src.

Then you reference this in your Attributes -> For Each row under a Detail view using a substitution string <img src=&IMG_SRC. />

Save and run the page. Great, image is there, all works as expected. Everyone is happy!???

Well not quite. Open your browser console network tab and refresh the page. You will see 404 resource not found error like below. 
After few days of trying to work out why this is happening we posted a question on #orclapex slack channel and OTN forum. 

As this is not something you would expect to get considering that our page is displaying correctly, IG is working and there are no other JS messages.

More in depth story you can find here.

Bottom line here is, there is a flaw in how IG creates this template and gets your data in so browsers can detect an empty/invalid URL in this process. 

Luckily, APEX community is a great community and Shaun Mauer jump to the rescue with his idea.

  1. Change your Query column source to be 
  2. Change IMG_SRC to be of HTML Expression type with &IMG_SRC. as a source
  3. Change your Card template so that it only uses &IMG_SRC. now in place where we had <img src=”&IMG_SRC.” />    
This should make 404 go away and now is time to celebrate. 

To add to this is that, maybe in next release of APEX we may see this fixed in IG detailed view.

Again big thanks goes to John as well for joining the conversations.

Happy APEXing,

1 comment:

  1. After the upgrade of apex from 5.02 to apex 19.1 i am getting the error after the upgrade can you please shed some light on this...

    Error in PLSQL code raised during plug-in processing.
    Contact your application administrator.
    Technical Info (only visible for developers)
    • is_internal_error: true
    • apex_error_code: WWV_FLOW_PLUGIN.RUN_PLSQL_ERR
    • ora_sqlcode: -6550
    • ora_sqlerrm: ORA-06550: line 157, column 1: PLS-00306: wrong number or types of arguments in call to 'RENDER_RECAPTCHA' ORA-06512: at "APEX_190100.WWV_FLOW_DYNAMIC_EXEC", line 1500 ORA-06512: at "APEX_190100.WWV_FLOW_DYNAMIC_EXEC", line 2501 ORA-06512: at "SYS.WWV_DBMS_SQL_APEX_190100", line 533 ORA-06550: line 157, column 1: PL/SQL: Statement ignored ORA-06512: at "SYS.DBMS_SYS_SQL", line 1458 ORA-06512: at "SYS.WWV_DBMS_SQL_APEX_190100", line 522 ORA-06512: at "APEX_190100.WWV_FLOW_DYNAMIC_EXEC", line 1982 ORA-06512: at "APEX_190100.WWV_FLOW_DYNAMIC_EXEC", line 2467 ORA-06512: at "APEX_190100.WWV_FLOW_DYNAMIC_EXEC", line 1476
    • component.type: APEX_APPLICATION_PAGE_ITEMS
    • component.id: 9453620874308487
    • component.name: P6_RECAPTCHA