1. Overview
This document is about Interactive Grid – Add row from another report using JavaScript in oracle apex.
2. Technologies and Tools Used
The following technologies have been used Interactive Grid – Add row from another report.
- Oracle Apex
- Javascript
3. Use Case
Let us have the requirement to build a page where users can search for data in a report and then choose a row to be added to Interactive Grid (IG), besides regular way of adding rows to IG.
4. Steps with Screenshot
When we convert this requirement into technical specification, essentially it has two parts.
- Adding new row to IG via JS
- Set values for newly added row via JS
Step 1:
Adding new row to IG via JS :
Adding new empty row via JS is rather straight forward and easy.
Code:
// Paste the following JS codes in when page loads in oracle apex
// “order” is IG region static ID
var $widget = apex.region(‘order’).widget();
var $grid = $widget.interactiveGrid(‘getViews’, ‘grid’);
var $model = $grid.model;
//insert new record on a model
var newRecordId = $model.insertNewRecord();
Step 2:
Set values for newly added row via JS
Once row is added you can add values into IG columns using below code.
Code:
//continuation of above code
//get the new record
var $newRecord = $model.getRecord(newRecordId);
// PRODUCT_ID and ORDER_QUANTITY are column names in IG SQL query
//update record values
$model.setValue($newRecord, ‘PRODUCT_ID’, pProductId);
//set default quantity to 1
$model.setValue($newRecord, ‘ORDER_QUANTITY’, ‘1’);
Step 3:
Create a JavaScript function name “addToOrder” as mentioned in below code.
JS Code:
function addToOrder(pProductId) {
// “order” is IG region static ID
var $widget = apex.region(‘order’).widget();
var $grid = $widget.interactiveGrid(‘getViews’, ‘grid’);
var $model = $grid.model;
//insert new record on a model
var newRecordId = $model.insertNewRecord();
//get the new record
var $newRecord = $model.getRecord(newRecordId);
// PRODUCT_ID and ORDER_QUANTITY are column names in IG SQL query
//update record values
$model.setValue($newRecord, ‘PRODUCT_ID’, pProductId);
//set default quantity to 1
$model.setValue($newRecord, ‘ORDER_QUANTITY’, ‘1’);
}
Output :
Example: there is a Interactive Report (IR) region “Search & Select” and “Product Name” column has a link which calls JS function “addToOrder” with product_id passed as input parameter. Another IG region “Your Order”.
Tested with APEX Versions: 18.1,18.2 and 19.1
