Tuesday, 16 February 2021

APEX 20.2 - radio item issue

Unusual radio item DA behavior in APEX 20.2 - bug!??

JavaScript Dynamic action on radio item stops working as expected


Yet another post touching on naming standards causing issues in APEX 20.2. I was asked to help by a client that stumbled on this issue and I wanted to share it here. 
 
Scenario is simple let's say you create a blank page like below.
 

So all we have on this page is simple region with two radio buttons.

If you run the page and click on your radio items all should work fine. Easy enough to do and expected behavior since we did not add any logic to it yet.
 
Please notice here the unconventional naming standard we are using here for these items PX_100 and PX_100_1. Keep in mind that this would not be a recommended way to name your items.

All good, let's now add a simple on change Javascript Dynamic Action on PX_100_1 item which will alert some text for us like "Hello world".
We are keeping it simple to make the point here...

Save and run the page. This part now depends on how complex your DA is but expected behavior in this example would be that we get alert messages when we keep clicking and changing values on PX_100_1 item, wouldn't it.
 
But wait this is not what happens. 
 
Firstly actual action triggers on my first element which is weird plus it does not do it on every change I make on that same item which we would also expect.
What you can also experience is that your cursor gets refocused as result of your action (or something very similar usually) causing your DA not to act as you would expect.

Why is this and where does it come from? Notice how second item on the page has very similar name to first item and that they both have only numbers in their names which then somehow causes an issue with DA selectors and listeners.

Fixing this issue is simple - simply rename your items for example PX_X100_1 would resolve the problem.

Try it for your self here
 
As you see this example is running on apex.oracle.com which should have all the latest patches applied.
 
Should APEX handle this situation a little bit better is a good question but hey having a good naming standard in place would help you too. :)

This was not happening on APEX 20.1 as far as I know so please keep an eye for it. 
 
Good thing is that 99.9% of your apps will not hit this use case so there is very little to worry about. :D


Happy APEXing,
Lino

Friday, 11 December 2020

APEX 20.2 - On Submit JS Syntax error, unrecognized expression: #PX_{BUTTON_NAME}_DISPLAY

 

Submit page and button JS error when hidden page item name contains $ sign

Page submit stopped working and you get some strange JavaScript error?


This is another post touching on naming standards
 
I was asked for an advice by a client that stumbled on this issue and I wanted to share it here. Scenario is simple let's say you create a blank page like below.
 

So all we have on the page is simple region with one submit page button and one hidden item.

If you run the page and click the button your page would submit and page would be re rendered. Perfect that is easy enough to do and expected behavior.
 
What if we as a user decide to go with unconventional naming standard and named this hidden item PX_NEW$TEST. Notice $ sign in there. 


Perfect, save and run the page click on the the same button again. Nice JS warning message alert is there with this in console log - Syntax error, unrecognized expression. 


But wait how do we debug this? Imagine if this was a huge page with over 30 items on it. Where do you start?!!! There is nothing in the page called NEW$TEST_DISPLAY on my page not even on the application level..... 
 
I am hoping you will not lose time on this and that somewhere down the line it will ring the bell that probably naming page items with special signs is probably not a good idea anyway.
 
For fun of it, try calling your page item something along NEW#TEST and see what APEX will actually save as an item name.  

We could say it would be nice to see APEX handling this situation too but hey having good naming standard in place would help here too. :)

To be clear this may not have been just APEX 20.2 error but potentially can happen in earlier version too so add this odd use case to your memory box somewhere.


Happy APEXing,
Lino

Friday, 23 October 2020

Preview Oracle cloud storage images in APEX

 

 Preview Oracle cloud storage images in APEX


How to show your Oracle Cloud stored images?

 
Let's say you wanted to store your images on external storage and that your pick was to use always free ATP environment which comes with equally good 20GB of online space included. This makes it a perfect place for all your APEX application files, images etc.....if you choose not to store them in database or on application servers.
 
First thing first we have to be able to manage images on the Cloud Storage. Here I will point you to an excellent blog by Adrian Png that covers all steps on how to do this part.
 
It takes you from creating Cloud credentials all the way to creating APEX application that can upload, download and delete images in your buckets. Thanks again Adrian for sharing.
 
Today's 2 cent will be in how do we now display these images we uploaded in our reports or even better in an image gallery. 
 
If you have seen my previous post on how to create simple and responsive image gallery in APEX using fotorama.js library today's post will make all the sense. From this point on I will assume you have all these things configured and working.....
 
Let's first see how would we simply show a preview of an image on page 1 bucket content region which is a classic report based on web source list_objects_in_bucket that we created earlier.
Note here we are assuming that your images are in bucket storage that is not public else you could simply access your images with direct urls. Since private buckets are secured and require authentication we will not be able to use a direct links here.
 
Firstly lets add a new column to report, there are few ways how we can do this easiest one is to edit the query in Local Post Processing
 
We are simply rendering a link IMG_URL to page 3 and passing through file name and a bucket name. Page 3 will if you got your download working retrieve the file from the cloud which we will use in our report. 
 
Currently on page 3 there is a before Header process: 
 
which is the same process as original on Adrian's post running web
 
How does this help? We will change column setting HTML expression of IMG_URL to 
Here <img src="#IMG_URL#" /> will do the trick of displaying the image in report column for us. Please note we also need to disable Escape special characters. If you were to have public images this same trick with direct url set in the query above should do the same trick. Difference is that we are using REST calls to authenticate with CI storage.

The result will be that now we have our Cloud images shown in a report. 

OK, a small tweak to this would be to turn this report into an image gallery now based on images coming from Oracle Cloud storage. How? We will use same trick as on my image gallery post.

Create a new region as a copy of your classic report, edit its Local Post Processing to 
select nvl(LISTAGG('<img src="'
       || APEX_PAGE.GET_URL (
          p_page   => 3,
          p_items  => 'P3_BUCKET_NAME,P3_OBJECT_NAME',
          p_values => :P1_BUCKET_NAME || ','|| NAME) || '">', ' ') WITHIN GROUP (ORDER BY TIMECREATED)
      , 'No data found')          
  as IMAGES
  from #APEX$SOURCE_DATA#
Where NAME like 'test/%' --to filter result set
Save your change and report should only have IMAGES column now. Edit its HTML Expression to be:
<div class="fotorama" data-allowfullscreen="true" data-nav="thumbs" data-fit="contain" data-width="100%"     data-ratio="800/600"  data-minwidth="350" data-maxwidth="350"      data-minheight="300"      data-maxheight="100%" >#IMAGES#</div>
Set Escape special characters to no. All that we are missing now are adding references to our fotorama library. Adding this to page header should do it.

https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js
https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css

Save and run the page. You should see gallery working.
Leaving you with an app preview. Again all credits go to Adrian as his tips did all the heavy lifting. ;)
 
Happy APEXing,
Lino