Triggering an event on record selection in a Data View without losing column sorting

How do I?
1

Hello,

Is there a way to trigger an event when a user clicks on any column or row of a Data View?

Previously, I attached a function to the On Click event of a specific data field. It worked, but my problem is that any field with an On Click event attached can no longer be sorted by the user.

image
image381×181 7.48 KB

I need all my fields to remain sortable. The only solution I’ve found so far is to insert an empty button with a minimum width in the very first column to act as an “Open Record” button, but this looks like a bit of a hack.

image
image424×187 6.1 KB

I would like to have the same behavior where clicking anywhere on a record opens its details or an associated subform, but I don’t know how and if it is possible. The ‘On Selection’ event of the Data View is rather applied to the menu that to the selected record itself.

Thank you!

Jean

2

Hi Jean,

We don’t have any events related to a data view row or column.

The only way I can think of is by create a function which injects an event listening when the data view action opens/shows.

This custom function will be targeting a specific data view id in the HTML, and it will be applied to rows.

But the downside of it is:
Create a custom function to control it (AI may be able to speedy it).

Only the values on the screen will be accessible, because when triggering a function using a button/field on a row, you can also have access to the fields that are not displayed in the list (fields with the show if condition set to false, such as primary keys).

Regards,
Elton S

3

Hello Elton. Thank you for your reply. Well I see… some hidden fields of the Data View are required in my function. It is just a “nice to have”, so maybe this specific event as a feature in a future release?

Regards,

Jean

4

Hi Jean,

As an alternative solution, you can combine your solution with my suggestion.

You can create a function and attach it to the event On Show ot the dataview, and you add a delay until the elements are rendered on the screen.

This function will inject an event trigger in the rows, and by selecting the row, you can trigger the button you created (you must have the button because the hidden values you need will be only available when a function is triggered from five).

This button will have an On Click function with your functionality.

Therefore, you can click on any row, and it will automatically click on the button you created.

This is the function added to the On Show event of the dataview.

function TargetRowsDataviews(five, context, result)  {
    console.log('TargetRowsDataviews')
    function enableRowButtonClick() {
      console.log('TargetRowsDataviews')
      // Wait 1 second for elements to render
      setTimeout(() => {
      
        // First verify Five-ListView exists
        const listView = document.getElementById('Five-ListView');

        if (!listView) {
          console.log('Five-ListView not found');
          return;
        }

        // Verify if one of its child elements contains 'ProductSQL View'
        const hasProductSQLView = Array.from(listView.querySelectorAll('*'))
          .some(el => el.textContent.includes('ProductSQL View'));

        // Stop process if text does not exist
        if (!hasProductSQLView) {
          console.log('ProductSQL View not found');
          return;
        }

        // Only now verify the grid exists
        const grid = document.getElementById('virtual-table-grid-div');

        if (!grid) {
          console.log('Grid not found');
          return;
        }

        console.log('ProductSQL View found - adding event listener');

        // Add click listener to the grid
        grid.addEventListener('click', function (event) {
        
          // Find clicked row
          const row = event.target.closest('[role="row"]');

          if (!row) return;

          // Prevent duplicate execution if button itself was clicked
          if (event.target.closest('button')) return;

          // Find button inside row
          const button = row.querySelector('button');

          // Trigger button click
          if (button) {
            button.click();
          }
        });

      }, 1000);
    }

    // Initialize
    enableRowButtonClick();

    return five.success(result);
}

This is the function that runs when the button is clicked.

function NavigateProductRecord(five, context, result)  {

five.selectAction('Products', five.field.ProductKey)

return five.success(result);

}

This is my dataview with a button in the first column, like your example:

image
image1897×671 37.2 KB

Basically, instead of clicking on the button to execute the function, I click on any row, and it will automatically click on the button for that row to execute the function for me.

Workflow:

  1. Wait 1 second for rendering.

  2. Check if Five-ListView exists.

  3. Verify if it contains the text ProductSQL View. This is the name of my dataview (you must change it to yours).

  4. Only if the text exists:

    • Check if virtual-table-grid-div it exists.

    • Add the row click event listener.

  5. Clicking a row automatically triggers the row button.

Regards,

Elton S

5

This solution works fine, great! Thank you!
Jean