Oracle Apex 22.2：点击Add Row按钮默认进入单行视图的实现问题

Issue Analysis #

Your current code inserts a new record but fails to select it before invoking the single-row view, which causes the view to open the previously selected record (or the first record if no selection exists). To fix this, you need to explicitly select the newly created record before switching to single-row view. Additionally, we'll add logic to return to the report view after saving.

Corrected Initialization JavaScript Code #

function(config) { 
    config.initActions = function(actions) {
        // Remove default "Add Row" action
        actions.remove('selection-add-row');
        
        // Add custom "Add Row" action
        actions.add({
            name: "selection-add-row",
            label: "Add row",
            iconBeforeLabel: true,
            action: function(event, focusElement) {
                // Get the Interactive Grid instance
                const ig = $(actions.context).interactiveGrid('instance');
                const model = ig.model;
                
                // Insert new record and capture the reference to it
                const newRecord = model.insertNewRecord();
                
                // Select the newly created record in the grid view
                ig.view.setSelectedRecords([newRecord]);
                
                // Switch to single-row view for the new blank record
                ig.actions.invoke("single-row-view");
            }
        });

        // Add listener to return to report view after save completes
        const ig = $(actions.context).interactiveGrid('instance');
        ig.model.on('save', function() {
            // Small delay to ensure save operation finishes before switching views
            setTimeout(() => {
                ig.actions.invoke('report-view');
            }, 400);
        });
    };
    return config;
}

Key Fixes Explained #

1. Capture & Select New Record:

   • model.insertNewRecord() returns the newly created record object. We store this in newRecord.
   • ig.view.setSelectedRecords([newRecord]) sets the grid's selection to the new record, ensuring the single-row view opens the correct entry.

2. Return to Report View After Save:

   • We listen to the model's save event, which triggers when a save operation starts.
   • A short setTimeout ensures the save completes before invoking report-view to switch back to the grid's default view. Adjust the delay (in milliseconds) if needed based on your application's performance.

Notes #

• If you want the new record inserted at the end instead of the beginning, use model.insertNewRecord(-1) (the -1 parameter specifies inserting at the last position).
• The setTimeout is a reliable way to handle the asynchronous save operation; alternative approaches like listening to interactivegridaftersave event can also be used if preferred.

内容的提问来源于stack exchange，提问作者listix