Classic report custom row actions

The Interactive Grid offers an actions menu column type, but what if you want to implement an actions menu in a classic report? The builder doesn't provide a default option for this. However, by using some out-of-the-box components and a bit of JavaScript, you can create a custom actions menu that is aware of each row's context.

First we need to add the button HTML to the report, I’ve chosen to add the HTML directly to the query. You can use the button builder from the universal theme reference. I've added the onclick="setPrimaryKey()". I'll explain this function later. I also want the button to open a dropdown menu, so the page shouldn't be submitted. Here's an example query:

select
  eno
, '<button id="' || eno || '" type="button" title="Actions" aria-label="Actions" ' ||
  'class="t-Button t-Button--noLabel t-Button--icon t-Button--noUI" ' ||
  'onclick="setPrimaryKey(' || eno || ');">' ||
  '<span aria-hidden="true" class="t-Icon fa fa-ellipsis-v"></span></button>' as actions
from
  employees

Don't forget to turn off the escape special characters option; otherwise, the plain HTML will appear in the column. I've chosen to display the button as a vertical ellipsis without a label to save space.

Once the button is visible in the report, you can add an options list to it using a list. In this example, we'll use actions for deleting and duplicating a row. I've created a list in the shared components with two static entries. The target of these entries is a JavaScript function, which will submit the page with the corresponding request.

Next, we create a List region on the page based on this list and place it in the footer slot. We assign a static ID (rowActions) to the region, which will be used later, and set the appearance to ‘Blank with attributes‘. In the attributes section we choose the list template ‘Menu Popup‘ and leave the remaining options at their default settings.

Finally, we need to link the buttons so that when a button is clicked, the list opens beneath it. For this, we need the static ID from the list region. We need to add the HTML attributes data-menu and aria-haspopup to the buttons' HTML. For data-menu, we add <list region staticID>_menu which in this case is rowActions_menu.

select
  eno
, '<button id="' || eno || '" name="rowButton" type="button" title="Actions" aria-label="Actions" ' ||
  'data-menu="rowActions_menu" aria-haspopup="menu"' || -- extra attributes
  'class="t-Button t-Button--noLabel t-Button--icon t-Button--noUI" '  ||
  'onclick="setPrimaryKey(' || eno || ');">' ||
  '<span aria-hidden="true" class="t-Icon fa fa-ellipsis-v"></span></button>' as actions
from
  employees

When we run the page, a button will appear in each row of the table. Clicking the button will display a dropdown menu, as shown below.

Now that the buttons display the menu, we can make them navigate to different pages, submit the page, or, in our case, execute a JavaScript function. But before the menu opens we need to know which row is selected. Here we set a on click event listener on all the buttons, and put the eno in the page item. This function is put in the ‘Execute when Page Loads‘ page attribute.

setPrimaryKey = (id) => {
    apex.items.P2_ENO.value = id;
}

The page item can then be used in a after submit page process to delete or duplicate the row.

To wrap up, adding a custom actions menu to a classic report can make it more interactive and user-friendly. By using HTML, JavaScript, and the universal theme's tools, you can create a dropdown menu that offers specific actions for each row, like deleting or duplicating. This not only enhances the report's functionality but also makes it more engaging for users.