Overview
In Oracle APEX, a interactive grid had a concept of adding multiple row. Here in some cases the specific requirement here is to insert only one record at a time. This could imply a design choice for user experience or system constraints, ensuring that users focus on adding individual data entries rather than bulk operations.
Technologies and Tools Used
The following technologies has been used to achieve the same.
- Oracle APEX
- JavaScript
Architecture
Here we are going to implement this in two way by.
- Hide Add Row Button
- Disable Add Row Button
Hide Add Row Button.
Step1: Create a Interactive Grid Report by using Employee Table.
Step2: In Edit attribute property make enable as true.
Note – Ensure one primary column is available in the report.
Step3: Create one Dynamic Action in page load event. In True action set as Execute Javascript Code.
Step4: Use the below code.
const button = document.querySelector(‘button[data-action=”selection-add-row”]’);
const button_save = document.querySelector(‘button[data-action=”save”]’);
button.addEventListener(‘click’, function() {
button.style.display = ‘none’;
});
button_save.addEventListener(‘click’, function() {
button.style.display = ‘block’;
});
Step5: Save and Run.
- First theinteractive grid will appear as like the above screenshot.
- Then we are adding one row. After clicking on add row button.
- The Add Row button will hide.
- Again while we are saving that particular record by clicking save buttonthen that Add Row button will be appear.
Disable Add Row Button:
Step1: Here same as like above in page load of dynamic action at Javascript part use the below code.
const button = document.querySelector(‘button[data-action=”selection-add-row”]’);
const button_save = document.querySelector(‘button[data-action=”save”]’)
let count_v = 0;
button.addEventListener(‘click’, function() {
count_v++;
if (count_v > 1){
button.disabled=true;
apex.message.showErrors([
{
type: “error”,
location: “page”,
message: “You Are allowed to insert one record at a time”,
unsafe: false
}
]);
}
});
Setp2: Click on add row button without saving anything again click on add row button it will get disappear and throw error.
Conclusion
This specified functionality contributes to a user-friendly and efficient task management system, allowing users to interact with and update their data in a controlled and intuitive manner. The use of JavaScript ensures a dynamic and responsive user interface, enhancing the overall user experience.
