Oracle Apex提交时实现双动作：创建标签页+打开模态窗口

Got it, let's tackle your Oracle APEX enhancement request step by step. You want to keep the existing dynamic tab/record generation functionality, plus add two new features: opening a modal window from another page when clicking Submit, and ensuring the page re-submits every time the button is clicked. Here's how to make it work:

Step 1: Fix & Refine the Dynamic Tab/Record Generation Code #

First, let's clean up your existing PL/SQL code to fix a logical issue in the condition checks (your original OR condition would trigger even when :P2_CREATE_TABS is NULL) and make it more maintainable:

BEGIN
    -- Validate tab count: non-null, non-zero, max 5 tabs
    IF :P2_CREATE_TABS IS NOT NULL 
       AND :P2_CREATE_TABS != 0 
       AND :P2_CREATE_TABS <= 5 THEN

        -- Generate tab navigation bar
        htp.p('<nav><div class="nav nav-tabs" id="nav-tab" role="tablist">');
        FOR k IN 1..:P2_CREATE_TABS LOOP
            htp.p(
                '<a class="nav-item nav-link ' || CASE WHEN k = 1 THEN 'active' ELSE '' END || '" ' ||
                'id="nav-'||k||'-tab" data-toggle="tab" href="#nav-'||k||'" ' ||
                'role="tab" aria-controls="nav-'||k||'" ' ||
                'aria-selected="'||CASE WHEN k = 1 THEN 'true' ELSE 'false' END||'">' ||
                'Document '||k||'</a>'
            );
        END LOOP;
        htp.p('</div></nav><div class="tab-content" id="nav-tabContent">');

        -- Generate content for each tab (record rows table)
        FOR l IN 1..:P2_CREATE_TABS LOOP
            htp.p(
                '<div class="tab-pane fade ' || CASE WHEN l = 1 THEN 'show active' ELSE '' END || '" ' ||
                'id="nav-'||l||'" role="tabpanel" aria-labelledby="nav-'||l||'-tab">'
            );

            -- Validate line count: non-null, non-zero, max 20 lines
            IF :P2_LINES IS NOT NULL 
               AND :P2_LINES != 0 
               AND :P2_LINES <= 20 THEN

                htp.p('<div class="row"><div class="col-md-6" style="margin-left: 17em;"><table class="table">');
                FOR i IN 1..:P2_LINES LOOP
                    -- Add header every odd row (as per your original logic)
                    IF MOD(i,2) != 0 THEN
                        htp.p('<thead><tr><th scope="col">#</th><th scope="col">Name</th><th scope="col">Details</th></tr></thead>');
                    END IF;
                    -- Add editable row (adjust input names to match your form items)
                    htp.p('<tr><td>'||i||'</td><td><input type="text" name="P2_DOC_'||l||'_NAME_'||i||'" class="form-control"></td><td><input type="text" name="P2_DOC_'||l||'_DETAILS_'||i||'" class="form-control"></td></tr>');
                END LOOP;
                htp.p('</table></div></div>');
            END IF;

            htp.p('</div>'); -- Close tab pane
        END LOOP;
        htp.p('</div>'); -- Close tab content container
    END IF;
END;

Step 2: Add Modal Window + Page Re-Submit on Submit Button Click #

To meet your two new requirements, we'll leverage Oracle APEX's built-in features:

Option 1: Submit First, Then Open Modal (Recommended) #

This ensures the page fully re-submits before launching the modal:

1. Configure the Submit Button:
   • Set the button's Action to Submit Page (this guarantees the page re-submits every time you click it).
2. Add an After-Submit PL/SQL Process:
   • Create a new process in the After Submit section of your page.
   • Set the process type to PL/SQL.
   • Use this code to trigger the modal window once the page reloads:

     apex_javascript.add_onload_code(
         'apex.navigation.dialog(
             "f?p=' || apex_application.g_instance || ':YOUR_TARGET_PAGE_ID:' || apex_application.g_session || '::NO::P_TARGET_PARAM:' || :P2_YOUR_VALUE || '",
             {
                 title: "Your Modal Title",
                 height: "500px",
                 width: "700px",
                 modal: true,
                 resizable: true
             }
         );'
     );
     

   • Replace YOUR_TARGET_PAGE_ID with the ID of the page you want to open in the modal, and adjust parameters like P_TARGET_PARAM to pass any needed values.

Option 2: Open Modal First, Then Submit (If Needed) #

If you want the modal to open before submitting, use a dynamic action:

1. Set Button Action to Defined by Dynamic Action:
   • Change the button's Action to avoid immediate submission.
2. Create a Dynamic Action:
   • Trigger: Button Click (select your Submit button).
   • Add two actions in order:
     1. Execute JavaScript Code: Use the same apex.navigation.dialog code from Option 1 to open the modal. Add a callback to submit the page once the modal closes:

        apex.navigation.dialog(
            'f?p=' + apex.g_instance + ':YOUR_TARGET_PAGE_ID:' + apex.g_session + '::NO::P_TARGET_PARAM:' + apex.item('P2_YOUR_VALUE').getValue(),
            { title: "Modal Title", height: 500, width:700, modal:true },
            function() {
                // Submit the page after modal closes
                apex.submit('YOUR_SUBMIT_BUTTON_NAME');
            }
        );
        

     2. Ensure Page Re-Submit: The callback above triggers the page submit, so every click will re-submit the page after the modal is closed.

Key Notes #

• Always validate your page items (:P2_CREATE_TABS, :P2_LINES) to prevent invalid values from breaking the dynamic generation.
• Adjust the modal window's size, title, and parameters to match your use case.
• Test both the dynamic tab/record generation and the modal/submit flow to ensure they work together seamlessly.

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