Hi Team,
I have a use case where I display a list of items on the screen. When a user clicks on a list item (OnClick), I call a Client Action that filters another list based on the selected item's value — this part is working fine.
Now, I want to trigger the same Client Action when the user hovers over the list item, instead of just clicking it.
I tried using JavaScript to listen to the mouseenter event and then call the Client Action using $actions.MyClientAction(). The action does get triggered on hover, but the issue is that it always uses the first value of the list, not the one currently being hovered.
Hi,
can you share your .oml file or javascript code?
Hi ,I can't share the oml but here is the screenshot of the Javascript
You can add custom attribute for each element in your list with itemId, like this:
Then your javascript code should look like this:
Now you can use itemId in your client action
Okay , Thanks for your input
Above solution should work since each element in the list has its record ID. On hover, JS picks and passes that value to the Client action. This way it should not default to the first row.
Thanks for the input
adding the "why do it with javascript if you can do it low code" answer : you can have any html event trigger a screen action :
Dorine
Thanks for the info
Add a parameter to your Client Action
Make sure your Client Action accepts an input parameter for the value that should be used for filtering. For example, SelectedItem.
2. Set a dynamic attribute on each list item
In your list widget, set a data attribute with the value of that item:
Here, {ItemValue} is the value you want to pass to the Client Action.
3. Add a JavaScript block to handle mouseenter
document.querySelectorAll('.list-item').forEach(item => { item.addEventListener('mouseenter', function() { const value = this.getAttribute('data-value'); // Get hovered item's value $actions.MyClientAction({ SelectedItem: value }); // Pass it to Client Action });});
Explanation:
this.getAttribute('data-value') gets the value of the item being hovered.
$actions.MyClientAction({ SelectedItem: value }) correctly calls the Client Action with the hovered item's value.