Improve Current Record Indicator

This post is about how to improve current record indicator. Your application have a lot of APEX reports and sometime each page has several reports that by edit link to navigate to another pages or modal page so this post can help to you to support all situations.

Thanks to blog post from Roel Hartman about Implementing a Current Record Indicator and blog post from Jorge Rimblas.

Before I‘ll start you should read Role’s blog because without that I could not implement this feature.

So, this sample includes of three report pages and 0 Global Page and two form pages.

Create a 0 Global page and Do some Setting

1. Create a Global Page through wizard

2. Create a region e.g : New and I'll create three items

3. First item in this region is P0_CUR_RECORD_CLICKED. This item ’ll use to maintain current item value.

• Name => P0_CUR_RECORD_CLICKED
• Type => Hidden
• Value Protected => NO
• Source => Null

4 Second item in this region is P0_SAVE_POSITION. This item ’ll use to maintain current item position

• Name => P0_SAVE_POSITION
• Type => Hidden
• Value Protected => NO
• Source => Null

5 Third item in this region is P0_COUNT_EXEC. If your page has more than one report your JavaScript that I’ll explain in DA run several time so for prevent of that you this item.

• Name => P0_COUNT_EXEC
• Type => Hidden
• Value Protected => NO
• Source => Null
• Static Value => 0

Create Dynamic Action on 0 Global page

I'll create four Events on rendering tab that three events on Click and an event on After Refresh.

1.Create a Dynamic Action Current Record Indicator in order to execute some setting on current record for classic and interactive records.

a.Name => Current Record Indicator

b.Event => After Refresh

c.Selection Type => JavaScript Expression

d.Client-side Condition =>
$(".rowlinkreport").closest("div.t-Region, div.t-IRR-region")

e. Create a true action Execute JavaScript Code  

/*
Current Record Indicator

Created by: Roel Hartman 2015
Modified by: Saeed Hassanpour 2017
*/

//Check to prevent repeated calls this Dynamic Action
if (apex.item( "P0_COUNT_EXEC" ).getValue() == 1) {
    return;
}

//set value to prevent repeated calls this Dynamic Action
//The issue of more than two reports on each page is repeating this Dynamic action
apex.item( "P0_COUNT_EXEC" ).setValue(1);


//Remove the alternating rows and row highlighting from the report
$('.t-Report--altRowsDefault, .t-Report--rowHighlight', this.triggeringElement).removeClass('t-Report--altRowsDefault t-Report--rowHighlight');

//maximum repots in each page e.g. => 10
var maxreport = 10;

//Hide the rowlinkreport column and header
for (i = 1; i <=maxreport; i++) {
    var header = $(".rep"+i).closest('td').hide().attr('headers');
    // is emtpy
    if (!header) {
        break;
    }
    $('#'+header).hide();
    //console.log(header);

};    

// For each "rowlinkreport" item
$(".rowlinkreport").each( function(i,key){
  // Define a click handler for the TR that contains a   
  $(this).closest('tr').on("click", function(){ 
    $(".highlight").removeClass("highlight");
    $(this).addClass("highlight");
    $s('P0_CUR_RECORD_CLICKED', $(key).text());
    
      
  });
  // Create a data-id attribute for each rowlinkreport  
  $(this).attr("data-id", $(key).text())  
});

// Add a "clickable" class to the TR -- not for this feature, see next blog post
$('.rowlinkreport').closest('tr').addClass('clickable');

if ( !( $v("P0_CUR_RECORD_CLICKED") ) ) {
  // Issue a dummmy click on the first row
  $(".rowlinkreport:first").closest("tr").click();
}
else {
    
  // Issue a dummmy click on the row containing the current PK
  var clickedvalarray = $v("P0_CUR_RECORD_CLICKED").split(/[::]/);
    
  //Check current page with pervious page occured row clicked
  if (clickedvalarray[1] === $v('pFlowStepId')) {
      $(".rowlinkreport.rep"+clickedvalarray[2]+"[data-id='"+ $v("P0_CUR_RECORD_CLICKED") +"']").closest("tr").click();
      $(window).scrollTop($v("P0_SAVE_POSITION"));  
  }
 
  //empty values
  else{
      apex.item( "P0_SAVE_POSITION" ).setValue( "" );
      apex.item( "P0_CUR_RECORD_CLICKED" ).setValue( "" );  
  }

}

f.Fire on Initialization => YES
g.Create a true action Execute PL/SQL Code 

:P0_CUR_RECORD_CLICKED := '';
:P0_SAVE_POSITION := '';
:P0_COUNT_EXEC := 0;

Items to Submit => P0_CUR_RECORD_CLICKED,P0_SAVE_POSITION,P0_COUNT_EXEC
Items to Return => P0_CUR_RECORD_CLICKED,P0_SAVE_POSITION,P0_COUNT_EXEC
h.Wait For Result => YES

2.Create a Dynamic Action Current Row Clicked when clicked on record for classic and interactive records.

a.Name => Current Row Clicked

b.Event => CLick

c.Selection Type => jQuery Selector

d.jQuery Selector => a.rowlinkreport
e. Create a true action Execute JavaScript Code 

spandataid = $(this.triggeringElement).closest('tr').find("span.rowlinkreport").attr('data-id');
apex.item( "P0_CUR_RECORD_CLICKED" ).setValue(spandataid);
apex.item( "P0_SAVE_POSITION" ).setValue($(window).scrollTop());

f.Create a true action Execute PL/SQL Code
PL/SQL Code:

null;

Items to Submit => P0_CUR_RECORD_CLICKED,P0_SAVE_POSITION,P0_COUNT_EXEC
Items to Return => P0_CUR_RECORD_CLICKED,P0_SAVE_POSITION,P0_COUNT_EXEC
g.Wait For Result => YES

3.Create a Dynamic Action Current Row Modal Clicked when clicked on record for classic and interactive records that open dialog window.

a.Name => Current Row Modal Clicked

b.Event => CLick

c.Selection Type => JavaScript Expression

d.Client-side Condition =>

 $(".rep-modal").closest("div.t-Region, div.t-IRR-region")

e. Create a true action Execute JavaScript Code

apex.item( "P0_SAVE_POSITION" ).setValue($(window).scrollTop());
//used at single modal report 
apex.item( "P0_COUNT_EXEC" ).setValue(0);

4.Create a Dynamic Action Pagination Link when pagination occurs for classic and interactive records that open dialog window.

a.Event => CLick

b.Selection Type => jQuery Selector

c.jQuery Selector => a.t-Report-paginationLink, button.a-IRR-button--pagination

d. Create a true action Execute JavaScript Code

apex.item( "P0_COUNT_EXEC" ).setValue(0);
apex.item( "P0_CUR_RECORD_CLICKED" ).setValue();
apex.item( "P0_SAVE_POSITION" ).setValue($(window).scrollTop());

e.Create a true action Execute PL/SQL Code
PL/SQL Code:

null;

Items to Return => P0_CUR_RECORD_CLICKED,P0_SAVE_POSITION,P0_COUNT_EXEC
f.Wait For Result => YES

g. Create a true action Execute JavaScript Code

/*
Current Record Indicator

Created by: Roel Hartman 2015
Modified by: Saeed Hassanpour 2017
*/

//Check to prevent repeated calls this Dynamic Action
if (apex.item( "P0_COUNT_EXEC" ).getValue() == 1) {
    return;
}

//set value to prevent repeated calls this Dynamic Action
//The issue of more than two reports on each page is repeating this Dynamic action
apex.item( "P0_COUNT_EXEC" ).setValue(1);


//Remove the alternating rows and row highlighting from the report
$('.t-Report--altRowsDefault, .t-Report--rowHighlight', this.triggeringElement).removeClass('t-Report--altRowsDefault t-Report--rowHighlight');

//maximum repots in each page e.g. => 10
var maxreport = 10;

//Hide the rowlinkreport column and header
for (i = 1; i <=maxreport; i++) {
    var header = $(".rep"+i).closest('td').hide().attr('headers');
    // is emtpy
    if (!header) {
        break;
    }
    $('#'+header).hide();
    //console.log(header);

};    

// For each "rowlinkreport" item
$(".rowlinkreport").each( function(i,key){
  // Define a click handler for the TR that contains a   
  $(this).closest('tr').on("click", function(){ 
    $(".highlight").removeClass("highlight");
    $(this).addClass("highlight");
    $s('P0_CUR_RECORD_CLICKED', $(key).text());
    
      
  });
  // Create a data-id attribute for each rowlinkreport  
  $(this).attr("data-id", $(key).text())  
});

// Add a "clickable" class to the TR -- not for this feature, see next blog post
$('.rowlinkreport').closest('tr').addClass('clickable');

if ( !( $v("P0_CUR_RECORD_CLICKED") ) ) {
  // Issue a dummmy click on the first row
  $(".rowlinkreport:first").closest("tr").click();
}
else {
    
  // Issue a dummmy click on the row containing the current PK
  var clickedvalarray = $v("P0_CUR_RECORD_CLICKED").split(/[::]/);
    
  //Check current page with pervious page occured row clicked
  if (clickedvalarray[1] === $v('pFlowStepId')) {
      $(".rowlinkreport.rep"+clickedvalarray[2]+"[data-id='"+ $v("P0_CUR_RECORD_CLICKED") +"']").closest("tr").click();
      $(window).scrollTop($v("P0_SAVE_POSITION"));  
  }
 
  //empty values
  else{
      apex.item( "P0_SAVE_POSITION" ).setValue( "" );
      apex.item( "P0_CUR_RECORD_CLICKED" ).setValue( "" );  
  }

}   

h.Fire on Initialization => YES

i.Create a true action Execute PL/SQL Code
PL/SQL Code:

:P0_CUR_RECORD_CLICKED := '';
:P0_SAVE_POSITION := '';
:P0_COUNT_EXEC := 0;

Items to Submit => P0_CUR_RECORD_CLICKED,P0_SAVE_POSITION,P0_COUNT_EXEC
Items to Return => P0_CUR_RECORD_CLICKED,P0_SAVE_POSITION,P0_COUNT_EXEC
j.Wait For Result => YES

Create a Report Page

1. Create a simple form through wizard, e.g. : page 2 that name is REPORT1

2. Create four regions  includes Classic & Interactive report so you can set HTML Expression and Link Attributes for every Report Region. e.g first region Report_IR is Interactive report you set for first column like below code:

Column Name => EMPNO
Type=> Plain Text
HTML Expression=> 

#EMPNO#:&APP_PAGE_ID.:1

Link Attributes => class= "rowlinkreport"

Tips

a.If you look at the below images you see a class="... rep1" in HTML Expression that each report region has different HTML Expression.
b.why have been used this expression("&APP_PAGE_ID")? when to navigate to another report page cause to reset current record indicator.

Finish this task and I hope to enjoy it.