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.
  


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

Friday, 8 February 2019

Oracle APEX and Google reCAPTCHA v3

Google reCAPTCHA v3

 

How to integrate reCAPTCHA v3 into APEX?


Oracle APEX and reCAPTCHA v3 integration


Some of you may know that APEX plugin for reCAPTCHA v2 has been available for a while which you can download here thanks to Mohamed Zebib.  



In October 2018 Google announced new version which now does not require any user interaction what so ever unlike version 2 where websites had


and users had to click I'm not a robot checkbox. 

This post is about integration it into your APEX apps. Let's have a look how.

For simplicity we will do it on Login page - P9999 where before user is allowed to login we will run a reCAPTCHA check.
All about reCaptcha v3 you can find at https://developers.google.com/recaptcha/intro

Implementation

Step 1.
To start using reCAPTCHA, you need to sign up for an API key pair for your site. Why? 
"The key pair consists of a site key and secret key.

The site key is used to invoke reCAPTCHA service on your site or mobile application.
The secret key authorizes communication between your application backend and the reCAPTCHA server to verify the user's response. "

Step 2.
Create Application settings that will store your public and secret keys like

Give them any name you want. 

Also create application process and application item. Something like this
:APP_RECAPTCHAV3_SITE_KEY := APEX_APP_SETTING.GET_VALUE( p_name => 'RECAPTCHAV3_SITE_KEY');

Where APP_RECAPTCHAV3_SITE_KEY is application item getting set.

Step 3.
On your login page add lines to initialize reCAPTCHA as per https://developers.google.com/recaptcha/docs/v3



Try running the page if you have done all things correctly you should get the famous logo running on the page. 

Step 4.
Now create P9999_TOKEN and P0_MESSAGE items on page 9999 and page 0. We will store the return message into global P0_MESSAGE element so that we can show it once landing page shows up.

Step 5.
Add application process with similar package call.


begin
  authentication_util.process_recaptcha_reply (p_token => :P9999_TOKEN, p_message_out => :P0_MESSAGE);
end;





Step 6.
Change condition on the standard Login process