Customizing the Custom Reports Page

If you have run into a situation where you are using many Custom Reports in your application, chances are you’ve noticed the list really starts to grow. This article is a quick sample of a page extension that allows you to split your Custom Reports into columns using categories that you create from code.

Starting Point

The first thing you’ll want to do is to setup a new page extension for the reports/menu page. This targets the page extension and limits it to be injected onto the page only when you’re looking at the reports.

Gathering the Pieces

Here’s where we start the script. We get going by finding the row in the report table where the Custom Reports live.

// get references to the bits we want to twiddle
var customReportsTable = jQuery("h3:contains('Custom Reports')").parent().parent();
var reportsToMove = jQuery("[id*='MGMT']");

You can see that you’re also grabbing any report that has ‘MGMT’ in the ID. The name of the report is injected as part of the ID on the reports list, so if you have a standard naming convention for your management reports as we do here, this would select all of those reports.

You could also add each report individually to the reportsToMove array, but you’ll need to keep the page extension updated as you add new reports.

Building the DOM Elements and Wiring up The Links

Next up is to create our new column and “push” all the links that meet our criteria above into that new column. To match the existing formatting of the page we’ll also inject a line break after each report.

// create a new column in the reports table to house the reports we're moving
var newColumn = jQuery(" ");
newColumn.append('<h3><img src="/boss/images/Custom Reports.gif"/> Management Reports</h3>');

// add each report to the new column
reportsToMove.each(function(el){
    newColumn.append(this);
    newColumn.append(jQuery("<br/>"));
});

// add the column to the custom reports table
customReportsRow.append(newColumn);

We complete our re-engineering of the page here by appending the new column to the row we found earlier.

Cleaning Up The Old List

Finally, the work we did above left some gaps in our custom report list.

// remove the superflous BR elements
customReportsRow.find('br').each(function(){
  if(jQuery(this).next().is('br')){
    jQuery(this).next().remove();
  }
  if(jQuery(this).prev().is('h3')){
    jQuery(this).remove();
  }
});

Each link has a line break after it, so if multiple reports are moved over you’ll get a bunch of blank spaces in your list. The above code heals that by removing any BR that is first in the list or next to another BR.

The Whole Enchilada

Here is the completed script:

// get references to the bits we want to twiddle
var customReportsTable = jQuery("h3:contains('Custom Reports')").parent().parent();
var reportsToMove = jQuery("[id*='MGMT']");

// create a new column in the reports table to house the reports we're moving
var newColumn = jQuery(" ");
newColumn.append('<h3><img src="/boss/images/Custom Reports.gif"/> Management Reports</h3>');

// add each report to the new column
reportsToMove.each(function(el){
    newColumn.append(this);
    newColumn.append(jQuery("<br/>"));
});

// add the column to the custom reports table
customReportsRow.append(newColumn);

// remove the superflous BR elements
customReportsRow.find('br').each(function(){
  if(jQuery(this).next().is('br')){
    jQuery(this).next().remove();
  }
  if(jQuery(this).prev().is('h3')){
    jQuery(this).remove();
  }
});