Setting item session state using AJAX in APEX 5

You probably know about the old way how to do this with htmldb_Get JS object:

  var get = new htmldb_Get(null, $v('pFlowId'), null, 0);

  get.add('F_APP_ITEM', vNewItemValue);
  gReturn = get.get();

You can find more about "the old way" here.

But If you've read APEX 5 Release Notes carefully you know that htmldb_Get object is deprecated and it's moved to legacy.js - and you don't what to use legacy JS in your new, modern and shiny APEX 5 applications. You should use apex.server.process or apex.server.plugin for plugins.

So, how can you do it in APEX 5?
It's easy if you want to set current page item values to session state. For this you have a parameter pageItems which can be of type jQuery selector, jQuery or DOM object or array of item names that identifies the page items:

apex.server.process ('MY_PROCESS', 
  {
     pageItems: '#P1_DEPTNO,#P1_EMPNO'
  }, 
  {
    success: function(pData) { ... do something here ... }
  } 
);

But if you want to do some calculations before request or if you want to set application item value to session state you have to dig a bit deeper into the documentation where you can find that with pData parameter of AJAX requests you can set additional parameters that the wwv_flow.show procedure provides.

If you need to set session state of only one item (page or application) you can use parameters p_arg_name and p_arg_value:

apex.server.process ('MY_PROCESS', 
  {
     p_arg_name: 'F_APP_ITEM',
     p_arg_value: vNewAppItemValue
  }, 
  {
    success: function(pData) { ... do something here ... }
  } 
);

If you need to set session state of more than one item (page or application) you have to use parameters p_arg_names and p_arg_values where you have to pass JS array as parameter:

apex.server.process ('MY_PROCESS', 
  {
     p_arg_names: ['F_APP_ITEM','P1_DEPTNO'],
     p_arg_values: [vNewAppItemValue, vNewItemValue]
  }, 
  {
    success: function(pData) { ... do something here ... }
  } 
);

Enjoy!

Tested on APEX 5.0.4.00.12

How to check ORDS version from APEX builder

Probably somebody blogged about this, but I couldn't find it.

So, if you need to check ORDS version and you only have access to APEX Builder you can do it by running following SQL query in SQL Workshop > SQL Commands:

select owa_util.get_cgi_env('APEX_LISTENER_VERSION') 
  from dual;

If you need to check other environment variables you can do it by running following PL/SQL block:

begin 
  owa_util.print_cgi_env;
end;

Edit no. 1 (thanks to Robert Schafer):

You can also query:

select ords.installed_version 
  from dual

Edit no. 2 (thanks to Christian Neumuller)

You can also open Help > About dialog in APEX to see the most important CGI variables and some additional info about APEX and database.

Tested on APEX 5.0.4.00.12 and ORDS 3.0.*

APEX 4 to APEX 5 Migration Tip: Tree Regions

If you're moving your applications to APEX 5 you've probably read about deprecated features. One of the notes there is about the deprecation of jsTree Region.

It doesn't matter if you've turned on legacy JavaScript or jQuery Migrate you'll still get some errors by using old implementation so you have to move them to new APEX tree.

Most probably you'll get error in JS Console like this one:

The reason of this is that $.curCSS() method is removed in jQuery 1.8 and it's not added into jQuery Migrate library.

The next thing you'll probably notice is that there's no icons in new tree.

Old legacy tree:

New APEX tree:

FontAwsome Tree Icons

You can easily use FontAwsome icons there. To do this set Icon Type property to fa in Tree Attributes:

Next step is to modify SQL query of Tree region and set icon column to fa-folder-o

If you want a bit more, for example to have special icon for expanded folder you have to add additional CSS to you page (preferably to CSS file):

.a-TreeView .is-collapsible > .a-TreeView-content > span.fa:before{
  content:"\f115"
}

After those modifications your tree should look like this:

APEX Tree Icons

There's also a way to use APEX font icons for the new APEX tree. Unfortunately, CSS classes are not included by default so you have to add it manually.

In case that you want to use APEX font icons you have to set Icon Type property to a-Icon:

Also you have to modify CSS class in icon column of source SQL query to icon-tree-folder:

The last thing is to add CSS classes (preferably to CSS file and not to inline CSS code page property):

  /* line 583, ../scss/core/IconFont.scss */
  .a-Icon.icon-tree-folder:before,
  .a-TreeView-node.is-expandable > .a-TreeView-content > .a-Icon.icon-tree-folder:before {
    content: "\e0da";
  }

  /* line 588, ../scss/core/IconFont.scss */
  .a-Icon.icon-tree-folder-open:before,
  .a-TreeView-node.is-collapsible > .a-TreeView-content > .a-Icon.icon-tree-folder:before {
    content: "\e0d7";
  }

With APEX font icons your tree should look like this:

Returning selected node value dynamically

If you need to return node value dynamically without submitting page the easiest way to do it is to call $s function inside your SQL query:

Expand tree on page load

To expand tree on page load you have to call: 

apex.widget.tree.expand_all('treeID');

where treeID is value of attribute property Static Tree ID of tree region.
Just put this code into page property Execute when Page Loads.

Edit: You can expand/collapse tree declaratively by using Dynamic Actions Expand/Collapse tree.

Enjoy!

Tested on APEX 5.0.4.00.12