Overview
This document talks about how to Customize Interactive Grid with Auto Populate Column value without Database sequence using JavaScript.
Technologies and Tools Used
The following technologies has been used to implement this requirement.
- SQL
- Oracle Apex
- JavaScript.
Use Case
Assume that there is a requirement with Form having header details and to add corresponding line details in Interactive grid. In that case, User requested for a serial number Column to auto generate column value to track line number whenever user clicks on Add Row Button in Interactive Grid.
Architecture
Following steps explains in detail,
Step 1: In Interactive grid, Please create a hidden item as per screenshot.
Step 2:
In the Before Header Process, fetch the latest serial number value from database table as shown below.
EXAMPLE CODE:
SELECT NVL(MAX(SL_NO),0)
FROM
EMP;
Step 3: Create Dynamic action Event (Row Initialization[Interactive Grid]}
Please refer the screenshot below,
Specify:
Selection type:Columns
IG name
IG column name
Condition :
When column is null
Actions:
- Execute JavaScript Code:
- Map affected element to the Item (P1_MAX_DISPLAY_ORDER)
- Set Fire on Initialization to be turned off.
- Set Value:
- Now setting value to the Item and Map it to the column (SL_NO), refer below screenshots.
Screenshot
Conclusion
This is one of the effective way to generate serial Number using Oracle Apex with JavaScript Functionalities to implement customization in Interactive Grid.
