Examples

Manual Events

This example presents 2 levels of nested reports created on top of the DEPT table.

The first level uses the default template with custom HTML (see Extend default template region) which uses built-in classes (see Built-in classes) that affect the nested report.

The second level uses a custom template (see Custom template region) which is bound with an APEX modal page through the Edit button. The modal page allows users to change employee details, and after saving the changes the 2nd nested report is refreshed using the dialog close event triggered on the edit button. The modal page URL is generated using the second level SQL Query.

Expand all Collapse all Refresh

#DEFAULT_TEMPLATE#

  
{{#data}}
  
    
       Edit 
    
      Collapse 
    
      Collapse (1500ms) 
    
    
      Refresh 
    
    
  
  
    
      Employee name
      {{{ENAME}}}
      Employee ID
      {{EMPNO}}
    
    
      Phone number
      {{{PHONE}}}
      Employee e-mail
      {{{EMAIL}}}
    
    
      City
      {{{CITY}}}
      Hire date
      {{HIREDATE}}
    
    
      Address
      {{{ADDRESS}}}
      
      
    
    
      Postal code
      {{{POSTAL_CODE}}}
      
      
    
  
  {{/data}}

Employee name	{{{ENAME}}}	Employee ID	{{EMPNO}}
Phone number	{{{PHONE}}}	Employee e-mail	{{{EMAIL}}}
City	{{{CITY}}}	Hire date	{{HIREDATE}}
Address	{{{ADDRESS}}}
Postal code	{{{POSTAL_CODE}}}

Class	Selector	Duration	Description
nestedreport--refresh	No	No	Refreshes current nested report
nestedreport--slideup	No	Yes	Collapses current nested report
nestedreport--slideupAll	No	Yes	Collapses all expanded rows within current nested report.
nestedreport--expandAll	Yes	No	Expands all rows within current nested report matching given jQuery selector in anchor attribute "selector".

	Deptno	Dname	Loc
10	10	ACCOUNTING	NEW YORK
20	20	RESEARCH	DALLAS
30	30	SALES	CHICAGO
40	40	OPERATIONS	BOSTON
80	80	kkk	ppp
90	90	pop	-
60	60	Tech	-
70	70	-	-

1 - 8

Drilldown

This example shows how one dynamic action can drill-down into hierarchical data. The dynamic action is listening to the Click event on jQuery selector .levelsGetInferiors which is a class of the anchor .

select 
  case
    when count(EMPNO)-1 = 0 then '-'
    else '
      
         
      
      '||EMPNO||'
  ' end           as derivied01_fa_sitemap_vertical,
  EMPNO           as "Empno",
  ENAME           as "Name",
  JOB             as "Job",
  SAL             as "Salary",
  NVL(COMM, 0)    as "Commission",
  count(EMPNO)-1  as "Inferiors"
from 
  uc_emp
where
  mgr = '#EMPNO#'
connect by prior 
  mgr = empno
group by
  EMPNO,
  ENAME,
  JOB,
  SAL,
  COMM

Empno	Ename	Job	Sal	Comm
7839	KING	PRESIDENT	1800	-
7839	KING	PRESIDENT	1800	-
7839	KING	PRESIDENT	1800	-
7839	KING	PRESIDENT	1800	-
7839	KING	PRESIDENT	1800	-
7839	KING	PRESIDENT	1800	-
7839	KING	PRESIDENT	1800	-
7839	KING	PRESIDENT	1800	-
7839	KING	PRESIDENT	1800	-
7839	KING	PRESIDENT	1800	-
7839	KING	PRESIDENT	1800	-
7839	KING	PRESIDENT	1800	-
7839	KING	PRESIDENT	1800	-
7839	KING	PRESIDENT	1800	-

1 - 14

Interactive Report

IR

Dname: ACCOUNTING
Details	Empno	Ename	Job	Mgr	Hiredate	Sal	Comm	Deptno	Loc
7782	7782	CLARK	MANAGER	7839	6/9/1981	2000	-	10	NEW YORK
7934	7934	MILLER	CLERK	7782	1/23/1982	1300	-	10	NEW YORK
7839	7839	KING	PRESIDENT	-	11/17/1981	1800	-	10	NEW YORK
Dname: RESEARCH
Details	Empno	Ename	Job	Mgr	Hiredate	Sal	Comm	Deptno	Loc
7902	7902	FORD	ANALYST	7566	12/3/1981	1400	-	20	DALLAS
7788	7788	SCOTT	ANALYST	7566	4/19/1987	1400	-	20	DALLAS
7566	7566	JONES	MANAGER	7839	4/2/1981	1800	-	20	DALLAS
7369	7369	SMITH	CLERK	7902	12/17/1980	1300	-	20	DALLAS
7876	7876	ADAMS	CLERK	7788	5/23/1987	1100	-	20	DALLAS
Dname: SALES
Details	Empno	Ename	Job	Mgr	Hiredate	Sal	Comm	Deptno	Loc
7521	7521	WARD	SALESMAN	7698	2/22/1981	1250	500	30	CHICAGO
7654	7654	MARTIN	SALESMAN	7698	9/28/1981	1250	1400	30	CHICAGO
7844	7844	TURNER	SALESMAN	7698	9/8/1981	1500	0	30	CHICAGO
7900	7900	JAMES	CLERK	7698	12/3/1981	950	-	30	CHICAGO
7499	7499	ALLEN	SALESMAN	7698	2/20/1981	1300	300	30	CHICAGO
7698	7698	BLAKE	MANAGER	7839	5/1/1981	2300	-	30	CHICAGO

1 - 14

Plug-in Events

Whenever United Codes Nested Reports shows, hides or refreshes a nested report it triggers the Default Callback [United Codes Nested Reports] event. This event can be bound with a dynamic actions on the document (Selection Type set to Javascript Expression = document) to listen tp all nested report events. Or, the event can be bound to a particular report (Selection Type set to Region) to listen only on specific report events.

In this example, a dynamic action changes the look of the triggering element icon and adds animation. The JavaScript used in the dynamic action "Execute Javascript Code" can be viewed in the Example event handler region.

Event data describes the state of the currently active nested report. Event data object can be referenced by this.data within the Execute JavaScript Code True Action.

The event data object is described below.

Property	Type	Description
this.data.afterRefresh	Boolean	When true the nested report is rendered after forced refresh.
this.data.animationRunning	Boolean	When true the nested report is the middle of animation (expanding or collapsing).
this.data.isCollapsed	Boolean	When true the nested report is collapsed.
this.data.isCollapsing	Boolean	When true the nested report is collapsing
this.data.isExpanded	Boolean	When true the nested report is expanded.
this.data.isExpanding	Boolean	When true the nested report is expanding
this.data.parent	Object	describes the parent element of the current nested report.
this.data.report	jQuery	object reference to parent report (1 level higher report)
this.data.triggeringElement	jQuery	object reference to the element that was bound in dynamic action (eg. Selection Type = jQuery Selector)
this.data.triggeringTd	jQuery	object reference to the cell from which nested report was performed.
this.data.parent.element	jQuery	object Reference to parent element of the nested report (instance of the plugin or native APEX report)
this.data.parent.level	Number	Describes the level of nested report. First level starts with 1.
this.data.parent.type	String	When "nested" the parent element of nested report is instance of the plugin. When "affectedElement" the parent element of nested report is native APEX component such as Classic Report or Interactive report.

var 
  icon              = this.data.triggeringElement.find('.fa'),
  iconUp            = 'fa-arrow-up',
  iconDown          = 'fa-arrow-down'
  nestedReportRow   = this.data.nestedReportRow
;

if ( this.data.isExpanding == true ) {  
  icon.data('initClass', icon.attr('class'));
  icon.removeAttr('class');
  icon.addClass('fa '+iconDown+' fa-anim-vertical-shake');  
}
else if ( this.data.isExpanded == true ) {  
  icon.removeAttr('class');  
  icon.addClass('fa '+iconUp);

  nestedReportRow.find( 'table' ).addClass( 'fa-anim-flash' );
  setTimeout( function(){
    nestedReportRow.find('table').removeClass( 'fa-anim-flash' );
  }, 1000 )

}
else if ( this.data.isCollapsing == true ) {  
  icon.removeAttr('class');  
  icon.addClass('fa '+iconUp+' fa-anim-vertical-shake');
}
else if ( this.data.isCollapsed == true ) {  
  icon.removeAttr('class');
  icon.addClass( icon.data('initClass') );
}
else {   
  null;
}

	Dname	Loc
10	ACCOUNTING	NEW YORK
20	RESEARCH	DALLAS
30	SALES	CHICAGO
40	OPERATIONS	BOSTON
80	kkk	ppp
90	pop	-
60	Tech	-
70	-	-

row(s) 1 - 8 of 8

Breadcrumb

Examples

Manual Events

Extend default template

Custom template

Built-in classes

Nested Report

Drilldown

Drilldown SQL Query

Example

Interactive Report

IR

Report Settings

Column Actions

Plug-in Events

this.data

Example event handler

Report

Dynamic Action definition

True action "Execute JavaScript Code"

UC - Nested Reports

Breadcrumb

Examples

Manual Events

Extend default template

Custom template

Built-in classes

Nested Report

Drilldown

Drilldown SQL Query

Example

Interactive Report

IR

Report Settings

Plug-in Events

this.data

Example event handler

Report

Dynamic Action definition

True action "Execute JavaScript Code"