Incorporating JavaScript into Reports

Custom JS event handlers can be used in reports anywhere commands are permitted. JS event handlers can be called from panel-level command buttons:

<panel type="grid">
<title translatable="true">Rooms by Building and Floor</title>
<!-- Call JS function to apply custom SQL restriction to the grid -->
<action id="filter">
<title translatable="true">Custom Filter</title>
<command type="callFunction" functionName="applyCustomRestriction"/>
</action>
</panel>

File: \parts\grid\ab-ex-report-grid-sql.axvw

Custom event handlers can also be attached to per-row buttons or field links:

<!-- Per-row button -->
<field controlType="button" onclick="showParts" width="50px">
<title translatable="true">Details</title>
</field>

<!-- Field link -->
<field table="wr" name="wr_id" controlType="link" onclick="showParts" width="50px">

The custom event handler can access the report data, such as primary key values for the current report row (the row that the user clicked on), as well as other controls in the view, using Web Central JS API. When the custom event handler is attached to the field using the onclick attribute, the current report row object is set as this reference inside the event handler code. The row object contains:

• Displayed values for all report columns: this.['wr.status']
• Unformatted (“raw”) values for all report columns: this.['wr.status.raw']
• Values of all primary keys for the current row, even these that are not displayed in the report:
this['wr.wr_id.key' ]
• Reference to the Grid control that displays the report: this.grid

Note: A raw value is only stored and is only accessible if the field value has been formatted.

function showParts(context) {
// 'this' refers to the row that the user clicked on
// 'this.grid' refers to the parent Grid panel
var restriction = this.grid.getPrimaryKeysForRow(this);

// copy the 'wr.wr_id' value as 'wrpt.wr_id'
// for the Work Request Parts report
var wr_id = restriction['wr.wr_id'];
restriction['wrpt.wr_id'] = wr_id;

// open the Work Request Parts report in a dialog window
// and apply the restriction
View.openDialog(
'ab-wr-parts.axvw', '', restriction);
}