Dynamic action based Expand all and collapsed all in oracle apex

Dynamic action based Expand all and collapsed all in oracle apex

  • Create two buttons like Expand all and Collapse All
  • Create the Cargo Status ad Shipment details region and select the collapsible template and put the static id for each region like below
  • Click the Expand button and create the dynamic action for Execute JavaScript code like below
  • Place the code like ( This is for Expand all dynamic action)
    $('#CARGO_STATUS.a-Collapsible .a-Collapsible-content').show();
    $('#SHIPMENT_DETAILS.a-Collapsible .a-Collapsible-content').show();
  • Place the code like (This is for Collapse all dynamic action
    $('#CARGO_STATUS.a-Collapsible .a-Collapsible-content').show();
    $('#SHIPMENT_DETAILS.a-Collapsible .a-Collapsible-content').show();
  • The same way you can create the N number of region and handle the unique static id and handle the JavaScript code

Show Spinner in oracle apex dynamic action

create the dynamic action,
use the below code for before your plsql process 

1. dynamic action for JavaScript
//execute spinner
var spinner = apex.util.showSpinner();

2. dynamic action for plsql code
	your plsql code
3. dynamic action for JavaScript
//remove spinner

Interactive Grids button’s customization

One of the features I always hated in the previous versions of APEX (before 5) were tabular forms. I never got then, they were always behaving funky, it was hard to debug and I preferred to write dynamic tabular forms by myself then with the built in functionality. It changed with the release of Interactive Grids with the Oracle APEX version 5.

When I’ve started working with them it was in the English speaking company and I didn’t face the problem I had later in Czech company, where I wanted to customize or translate buttons. It was not difficult to understand words like “edit” or “save” for users, but I wanted to have consistency in these buttons across the whole application.

The first button I wanted to change was “add new row”. Luckily to change this label it’s pretty straightforward as it has its own setting in the Interactive Grid Attributes – Toolbar menu, as shown on the picture below.

Sadly this is the extent of the customization you have about the buttons. If you want to add icon, change the button to “hot” or change the names of the other buttons, you simply have to dive into the Interactive Grid JavaScript model. I’ll maybe dig more into details later, but for now, I’ll just show you the pieces, which are related to the topic today. There are few settings you can adjust for each button.

button.iconOnly = true / false;
button.hot = true / false;
button.label = "label"
button.title = "tooltip"
button.iconBeforeLabel = true / false;

I believe all the settings are self explanatory. The only thing which remains, is how to use this in the real example. If you have a look into attributes of Interactive Grid region, you can see, it has field for something called JavaScript Initialization Code (in advanced section of attributes). There you can adjust the configuration of the Interactive Grid region. First we copy the default toolbar, get all the buttons we want to edit and setup their properties, like icons, labels and icon position as shown below. Lastly you save the configuration of your toolbar into the configuration of your Interactive Grid and return the config to be processed.

function(config) {
    let $             = apex.jQuery,
        toolbarData   = $.apex.interactiveGrid.copyDefaultToolbar(),
        addrowAction  = toolbarData.toolbarFind("selection-add-row"),
        saveAction    = toolbarData.toolbarFind("save"),
        editAction    = toolbarData.toolbarFind("edit");
    addrowAction.icon = "icon-ig-add-row";
    addrowAction.iconBeforeLabel = true;
    addrowAction.hot = true;
    saveAction.label = "Uložit změny";
    saveAction.iconBeforeLabel = true;
    saveAction.icon ="icon-ig-save-as";
    saveAction.hot = true;
    editAction.label = "Editovat";

    config.toolbarData = toolbarData;
    return config;

After applying the settings and refreshing the page, you can see the results of your labor.

thanks to https://www.stinolez.com/2018/10/19/interactive-grids-buttons-customization/

ORACLE APEX 5.1 Fade Success Message automatically

We have all wait a long time of APEX 5.1.
One oft he most important feature of 5.1 is Interactive grid.

Were i was playing with 5.1 i see that the success message dont fade out like in 5.0.
For 5.0 i found a solution and i try the same one for 5.1, but it doesnt work.

So i inspect the HTML code and found the change with the APEX_SUCCESS_MESSAGE.

I search the div container to see the success message but i can find it.
Were he is?

After i start an save process i saw what i want the little green box in the upper right corner

I inspect the HTML again and saw that there is the div with the id t_Alert_Success.
Okay the div is didnt render if i come on the page the first time.

I need a function to check permanently the changes of APEX_SUCCESS_MESSAGE.
Because, APEX add classes to APEX_SUCCESS_MESSAGE.
So i found MutationObserver and it was what i need.
I Implement it on a global page to have the outofade on all pages.

1. Create a Dynamic Action on Global page
– Event: Page Load

2. True
-Action: Execute JavaScript Code

// The node to be monitored
var target = $( "#APEX_SUCCESS_MESSAGE" )[0];

// Configuration of the observer:
var config = { 
  attributes: true, 
  childList: true, 
  characterData: true 

// Create an observer instance
var observer = new MutationObserver(function( mutations ) {
  mutations.forEach(function( mutation ) {
    var newNodes = mutation.addedNodes; // DOM NodeList
    if( newNodes !== null ) { // If there are new nodes added
      var $nodes = $( newNodes ); // jQuery set
      $nodes.each(function() {
        var $node = $( this );
        if(  $('#APEX_SUCCESS_MESSAGE').hasClass( "u-visible" ) ) {
          // do something
            $('#t_Alert_Success').ready(function() { 
                setTimeout(function() { 
                   $('#t_Alert_Success .t-Button--closeAlert').click();
                     }, 3000); // here u can change the view time
// Pass in the target node, as well as the observer options
observer.observe(target, config);

Make the cursor a hand when a user hovers over a list item

Use for li:

li:hover {
    cursor: pointer;

See more cursor properties with examples after running snippet option:

.auto          { cursor: auto; }
.default       { cursor: default; }
.none          { cursor: none; }
.context-menu  { cursor: context-menu; }
.help          { cursor: help; }
.pointer       { cursor: pointer; }
.progress      { cursor: progress; }
.wait          { cursor: wait; }
.cell          { cursor: cell; }
.crosshair     { cursor: crosshair; }
.text          { cursor: text; }
.vertical-text { cursor: vertical-text; }
.alias         { cursor: alias; }
.copy          { cursor: copy; }
.move          { cursor: move; }
.no-drop       { cursor: no-drop; }
.not-allowed   { cursor: not-allowed; }
.all-scroll    { cursor: all-scroll; }
.col-resize    { cursor: col-resize; }
.row-resize    { cursor: row-resize; }
.n-resize      { cursor: n-resize; }
.e-resize      { cursor: e-resize; }
.s-resize      { cursor: s-resize; }
.w-resize      { cursor: w-resize; }
.ns-resize     { cursor: ns-resize; }
.ew-resize     { cursor: ew-resize; }
.ne-resize     { cursor: ne-resize; }
.nw-resize     { cursor: nw-resize; }
.se-resize     { cursor: se-resize; }
.sw-resize     { cursor: sw-resize; }
.nesw-resize   { cursor: nesw-resize; }
.nwse-resize   { cursor: nwse-resize; }

.cursors > div {
    float: left;
    box-sizing: border-box;
    background: #f2f2f2;
    border:1px solid #ccc;
    width: 20%;
    padding: 10px 2px;
    text-align: center;
    white-space: nowrap;
    &:nth-child(even) {
       background: #eee;
    &:hover {
       opacity: 0.25


Remove Repeated Column, Page Header, Footer in CSV Export (JASPER)

Remove Repeated Column header, Page Header, Page Footer in CSV Export (JASPER)

In CSV export, we want only column header once and data should be printed. We do not want page header, page footer and repeated columns header. So in order to achieve this do the following.

    1. Remove Page Header:
<property name="net.sf.jasperreports.export.csv.exclude.origin.band.(uniqueValue)" value="pageHeader"/>
    1. Remove Page Footer:

<property name="net.sf.jasperreports.export.csv.exclude.origin.band.(uniqueValue)" value="pageFooter"/>
    1. Remove Title Band:

<property name="net.sf.jasperreports.export.csv.exclude.origin.band.(uniqueValue)"value="title"/>
    1. Remove Repeated Column Header:

<property name="net.sf.jasperreports.export.xlsx.exclude.origin.keep.first.band.(sameValue)" value="columnHeader"/>
<property name="net.sf.jasperreports.export.xlsx.exclude.origin.keep.first.report.(sameValue)" value="*"/>

Some times we are using sub report to display page header and page footer. Do the following to remove the it in CSV Export.

    1. Remove Sub Report:

<property name="net.sf.jasperreports.export.xlsx.exclude.origin.report.(sameValue)" value="Actual Report Name not the sub report name"/>
<property name="net.sf.jasperreports.export.xlsx.exclude.origin.band.(sameValue)" value="detail"/>

This is not working for crosstab.

Thanks & Regards,
Fahad Anjum



Oracle XE 11gR2 installation – “OracleXEService should not be installed already”

Oracle XE 11gR2 beta has just been released, some details here and download here. It’s not a great deal of use for sandboxing DWH-specific stuff, given this list of excluded functionality (and this is by no means everything that’s not included):

  • Bitmapped index, bitmapped join index, and bitmap plan conversions
  • Oracle Partitioning
  • Parallel Data Pump Export/Import
  • Parallel query/DML
  • Parallel Statement Queuing


However, it’s always interesting to have to hand for trying out other things. And I like playing with new toys 🙂

On running the installer, I hit this problem:

“OracleXEService should not be installed already”


Checking for Oracle XE Service instance…:
Expected result : OracleXEService should not be installed already.
Actual result: OracleServiceXE found on system.
Check complete: The overall result of this check is failed.

The previous owner of the machine had installed Oracle XE 10, but I’d removed this:

No Oracle XE 10g listed in add/remove programs

Or so I thought:

OracleServiceXE still listed in Services

To remove the service entry, use the sc command:

sc delete OracleServiceXE

For good measure I did the same for OracleJobSchedulerXE.

Delete service entries using sc

After this, installation proceeded as normal.

thanks https://rnm1978.wordpress.com/2011/04/04/oracle-xe-11gr2-installation-oraclexeservice-should-not-be-installed-already/

APEX: Page Access Protection and Session State Protection

APEX’s Page Access Protection (PAP – For Pages) and Session State Protection (SSP – For Items) are excellent security tools to help prevent users from altering session values. What some people may not be aware of is that if you enable PAP for page it does not prevent users from altering the session state of items on that page. All it does is require that any items passed through that page via the URL require a checksum. Malicious users can still alter the item’s session state using AJAX or from other pages. Long story short, if you want to lock your application down you need to enable SSP for all required items.

APEX has a great tool to do this quickly for you rather than having to go into each page item. Shared Components / Session State Protection / Page / (click page number). You can now set the PAP and the SSP for all the page items.

If you do use PAP and SSP the following queries will help you do some quick validations to ensure all your security checks are in place

Pages without Page Access Protection

SELECT aap.application_id,
  FROM apex_application_pages aap
 WHERE LOWER (aap.page_access_protection) = 'unrestricted'
   AND aap.application_id = :app_id

Page items without Session State Protection

SELECT aapi.application_id,
  FROM apex_application_page_items aapi
 WHERE aapi.application_id = :app_id
   AND LOWER (aapi.item_protection_level) = 'unrestricted'

Pages which have Page Access Protection, but have page items with no Session State Protection

This query helps identify pages which you think are locked down, but end users could set the session state of item values

SELECT aapi.application_id,
  FROM apex_application_pages aap,
       apex_application_page_items aapi
 WHERE LOWER (aap.page_access_protection) != 'unrestricted'
   AND aap.application_id = :app_id
   AND aapi.application_id = aap.application_id
   AND aap.page_id = aapi.page_id
   AND LOWER (aapi.item_protection_level) = 'unrestricted'