Refresh a tree
The refresh action doesn't work on a region of type tree. To check that see the region Tree and click it's refresh button. If the refresh would work the time displayed after the employee name would change as it does for the other two regions.
The 2 other regions are reports both with the following query a source.
select lvl
, lead(lvl,1,0) over(order by regel) -lvl "Level difference next record"
, employee_id
, last_name
, to_char(sysdate,'HH24:MI:SS') time
from (
select emp.last_name
, emp.employee_id
, level lvl
, rownum regel
from OEHR_EMPLOYEES emp
CONNECT BY PRIOR emp.employee_id = emp.manager_id
start with emp.manager_id is null
order siblings by emp.last_name
)
order by regel
In the region Column format the formatting of the last_name column is used to visualize the hierarchy of the employees.
<div class="level#LVL#">#LAST_NAME#</div>
In the CSS definition every level class the left padding is increased.
For example level2 10px level3 20px etc.
The Report template regions uses a custom report template to display the same html as with the tree region.
For the parent the following row template is used:
<li class="closed level-#1#" id="#3#">
<a href="#" style="" class="">
<ins> </ins>
#4# #5#
</a>
<ul>
The condition #2# = 1 which is the difference in level with the following record.
For a child the row template is
<li class="leaf level-#1#" id=#3#>
<a href="#" style="" class="">
<ins> </ins>
#4# #5#
</a>
</li>
A drawback off using this methode is that the difference in level between the last child and the folowing parent can be maximum of 2.
With one level difference the row template is:
<li class="last leaf level-#1#" id=#3#>
<a href="#" style="" class="">
<ins> </ins>
#4# #5#
</a>
</li>
</ul></li>
And the condition #2#=-1
For 2 level difference and extra closing
</ul></li> is added. And the condition is #2#=-2
The before row template is:
<div class="tree clearfix tree-default" style="direction: ltr;"><ul class="ltr">
And the after row template is:
</ul></div>
To make the effect complete a dynamic action is added to the links of the list to open or close the parent.
jQuery selector: #REPORTTEMP li a
When condition
apex.jQuery(this.triggeringElement).closest('li').hasClass('closed')
true action Execute javascript code
var Element = apex.jQuery(this.triggeringElement).closest('li'), Event = this.browserEvent;
if (Element.hasClass('closed')){
Element.removeClass('closed').addClass('open');
}
Event.stopPropagation();
For the false action the classes are reversed.