Introduction: –
In spreadsheet applications like Microsoft Excel, users can efficiently duplicate a cell’s value across adjacent cells within a column using drag-and-fill gestures. This “Copy Cells” feature enhances data entry by allowing quick replication of data. Implementing similar functionality in Oracle APEX Interactive Grid can significantly improve user experience by streamlining data input processes. This blog demonstrates how to achieve Excel-like Copy Cells Fill Series functionality in Oracle APEX Interactive Grids, focusing on copying values within a single column.
The following technologies have been used in excel copy cells fill series functionality in Oracle APEX.
- Javascript
- Oracle APEX
Why we need to do: –
Replicating cell values within a column reduces manual input, saving time and minimizing errors.Ensures that specific values are uniformly applied across records, maintaining data integrity.Provides a familiar experience for users accustomed to spreadsheet applications, reducing the learning curve.
How do we solve:
To implement Excel-like “Copy Cells” fill series functionality in an Oracle APEX Interactive Grid, follow these steps:
Step 1: Set a Static ID for the Interactive Grid
Select your Interactive Grid region.
In the Property Editor, under Identification, set the Static ID to something (e.g. my_ig).
Step 2: Add Custom CSS Class to Highlight “Copyable” Cells
Go to your Page Designer → Click on CSS section (in the page attributes).
.checkname {
position: relative;
padding-right: 25px;
}
.checkname::after {
content: "^";
font-size: 16px;
font-weight: bold;
color: #db3338;
position: absolute;
top: 50%;
right: 5px;
transform: translateY(-50%);
background: white;
border-radius: 50%;
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
cursor: pointer;
}
Step 3: Add JavaScript to Enable Copy Functionality
This script enables copying the value from one cell to others by dragging over rows.
In Page Designer, select the page number.
Scroll to “Execute when Page Loads”.
Code
$(document).ready(function () {
let draggedValue = null;
let draggedColumn = null;
$(document).on("mousedown", ".checkname", function (event) {
let $cell = $(this);
let $row = $cell.closest("tr");
let ig$ = apex.region("my_ig").widget();
let model = ig$.interactiveGrid("getViews", "grid").model;
let record = model.getRecord($row[0].dataset.id);
// Get column name from model
let columnIdx = $cell.index();
let view = ig$.interactiveGrid("getViews", "grid");
let config = view.modelColumns;
let columnName = Object.keys(config)[columnIdx];
if (columnName) {
draggedValue = model.getValue(record, columnName);
draggedColumn = columnName;
}
event.preventDefault();
});
$(document).on("mousemove", "tr", function () {
if (draggedValue !== null && draggedColumn !== null) {
let $row = $(this);
let ig$ = apex.region("my_ig").widget();
let model = ig$.interactiveGrid("getViews", "grid").model;
let record = model.getRecord($row[0].dataset.id);
model.setValue(record, draggedColumn, draggedValue);
}
});
$(document).on("mouseup", function () {
draggedValue = null;
draggedColumn = null;
});
});
Conclusion:
Implementing Excel-like Copy Cells Fill Series functionality in Oracle APEX Interactive Grids enhances data entry efficiency and provides users with a familiar and intuitive experience. By following the steps outlined above, developers can enable users to replicate cell values within a column effortlessly. This approach not only improves productivity but also ensures consistency and accuracy in data management within Oracle APEX applications.
