Table with multiple URL clumns on Cell Click lose hover formatting

💬 App Building
1

  • Goal: An employee records table with different phone numbers, each clickable to open our teams app and make a call.

  • Steps: 1) create table with phone numbers. 2) set each phone column Click Cell event handler to Open URL to tel:{{ currentSourceRow.WorkPhone }}

  • Details: the cell clicks work for both columns but the hover highlight only works for one. the only thing I can think of is because the first phone number in the one that doesn't highlight is null. but even if I where clause down to a single record with both numbers, it still doesn't highlight.

  • Screenshots:
    image
    notice the curved highlight around the field in the first image but not the second.
    the cursor also changes. from finger to text.
    image
    This following image are the settings for the field that works:

    image
    image640×690 38.6 KB

    This following image are the settings for the field that loses the hover and cursor formatting:
    image
    image630×697 39.6 KB

2

tested this in my app as a demo, and it's true that null values also trigger the "Open URL" action.

As a solution, you can add a condition in the event handler using the "Only run when" option:

{{ !_.isNil(currentSourceRow.workPhone) && currentSourceRow.workPhone !== '' }}

This ensures the action only runs when workPhone has a valid value.

image
image693×790 42.1 KB

3 Likes
3

I was going to add something like that, but I don't think it concerns my larger issue of missing formatting on one column but not the other.

4

deleting and re-adding the column worked.
I was pretty sure I had already tried that but it worked this time.

1 Like
5

Glad to hear that you got it working, @Shegs! I'll mark your most recent post as the "Solution" for this particular topic, but don't hesitate to reach out if you notice anything else or have additional questions. :+1:

1 Like