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.  

Workaround

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,
Lino