Classic Report交互需求咨询：点击图标获列表项、链接弹窗显参会者

Alright, let's break down these two Classic Report scenarios for you— I’ve handled these exact use cases multiple times in Oracle APEX, so here’s a practical, step-by-step guide:

When you click an icon in a Classic Report, the core idea is to tie the click event to its parent row, then extract the specific data you need. Here are two reliable approaches:

方法1：用APEX动态动作（低代码，推荐） #

• First, add a CSS class to your icon column (e.g., report-action-icon). If you’re building the icon via SQL, include the class directly in the HTML:

  SELECT 
    event_id,
    '<i class="fa fa-eye report-action-icon"></i>' AS view_icon
  FROM your_events_table
  

• Create a Dynamic Action on your page:
  1. Set the Event to Click
  2. Set the Selector to .report-action-icon
  3. Add an Execute JavaScript Code action with this snippet:

     // Grab the row containing the clicked icon
     const targetRow = $(this.triggeringElement).closest('tr');
     // Extract a specific column value (replace "P1_EVENT_ID" with your column's static ID)
     const eventId = targetRow.find('[headers="P1_EVENT_ID"]').text().trim();
     // Optional: Store the value in a page item for later use
     apex.item('P1_SELECTED_EVENT').setValue(eventId);
     

• If you need to use this value elsewhere (like in a popup), chain additional actions (e.g., Set Value) to pass it along.

方法2：直接绑定click事件 via JavaScript #

If you prefer more control, bind the event globally:

• Add this code to your page’s Function and Global Variable Declaration:

  $(document).on('click', '.report-action-icon', function() {
    // Get the event ID from a data attribute (add this in your SQL)
    const eventId = $(this).data('event-id');
    console.log('Clicked event:', eventId);
    // Do something with the ID here (like open a popup)
  });
  

• Update your SQL to include the data attribute:

  SELECT 
    event_id,
    '<i class="fa fa-eye report-action-icon" data-event-id="' || event_id || '"></i>' AS view_icon
  FROM your_events_table
  

To show attendees in a modal popup, we’ll use APEX’s built-in Modal Dialog page— it integrates seamlessly with your existing report and requires minimal custom code.

Step 1: Build the Modal Dialog page #

1. Create a new page, select Modal Dialog as the type.
2. Add a Classic/Interactive Report to this page to display attendees. Use a parameterized SQL query to filter by event ID:

   SELECT 
     attendee_name,
     email_address,
     registration_date
   FROM event_attendees
   WHERE event_id = :P2_EVENT_ID -- P2_EVENT_ID is a hidden page item on the dialog
   

3. Add a hidden page item P2_EVENT_ID to the dialog page— this will hold the event ID passed from your main report.
4. Configure the dialog’s appearance (width, height, title) in the page attributes to match your needs.

Step 2: Add the popup trigger to your main Classic Report #

Update the column in your main report to act as a clickable link that opens the dialog:

1. In your main Classic Report’s column properties, set the Type to Link.
2. For the Link Target, select URL and paste this JavaScript snippet (replace placeholders with your actual page ID and column names):

   javascript:apex.navigation.dialog('f?p=&APP_ID.:2:&APP_SESSION.::NO::P2_EVENT_ID:#EVENT_ID#', {
     title: '参会者列表 - #EVENT_NAME#',
     width: 800,
     height: 600,
     modal: true
   });
   

   • Replace 2 with your dialog page’s ID
   • #EVENT_ID# is the column in your main report that holds the event’s unique ID
   • #EVENT_NAME# will populate the dialog’s title with the event name

Alternative: Trigger via icon click #

If you want to use an icon instead of a text link, combine this with the first question’s method— just replace the console.log in the JavaScript with the apex.navigation.dialog call, passing the extracted event ID.

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