Tuesday, July 14, 2020

Bulk submit all region items to session state

Recently I came across one simple but effective solution so why not to share it... 

Colege and I were building a search page with lots of filters on the left side of the screen (similar to Faceted Search).  In the middle of the page, we've created an Interactive Report that uses a function that returns the SQL query. There's a lot of logic going in there and we used the v function to fetch item values (no worries, SQL query uses only bind variables). It was just easier and faster than to put everything into input parameters. Also, I'm not a fan of using functions to return SQL queries, but in this case, it was a perfect match. 

The only problem was that we didn't want to submit the page to get item values into the session state nor to put all the items into region property Page Items to Submit (it's hard to handle that with lots of items). So we needed a quick and easy solution to submit all items from the filter region to the session state and here it is:

First, I've created a dummy AJAX Callback process, that doesn't do anything, just returns empty JSON object:

After that, I've created a simple JS function

Function loops through region items (didn't test it for all possible item types in APEX), adds them to the JS array, and with the use of the feature of apex.server.process that you can put an array of item names in property pageItems, it submits them to the session state.
On success, it refreshes the Interactive Report region.

That's all!

Stay safe & enjoy!

Tested in APEX 20.1.0.00.13

 

Sunday, November 10, 2019

Region Display Selector - How to Prevent Scroll on Page Load

A few days ago I visited my dear friends Aljaž Mali and Andrej Grlica and they had one interesting case. They had a page where they used region display selector in Scroll Window mode to display some regions in tabs. Since region display selector wasn't positioned on top of the page, on page load navigation was scrolled down to the first tab region (as in this example).

To fix it, the first thought from Andrej and me was to somehow do it with JavaScript, but after we examined JS API we concluded that there isn't any clean solution.

And then, as always, four eyes are better than two...we came out with a nice but dirty solution.

The Fix

To fix it you need to:
  • create a dummy region with Region Display Property turned on an put it before all other regions with that property on
  • use region template - Blank with Attributes 
  • add Static ID (in our case it was noScrollTab)
  • add the following CSS to the page either as inline CSS or to the external static file (preferred way)

How?

What have we done here? We created a region on the first position in region display selector - the region that usually is scrolled down to on page load and then with CSS we've positioned it to the top left corner of the page and hid it.

The demo is available here.

Tested in APEX 19.2.0.00.18.

Enjoy!