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

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