Row action to populate search field, and also highlight the updated field

[trillich]

• Goal: when user clicks a row in a table, we want it to populate a field in a search form (that part is easy) and then highlight that input field's background with a different color, temporarily.

• Steps:

1. with a standard CONTROL COMPONENT click handler, it's easy to setValue( {{currentRow.CODE}} ), no problem
2. we have CSS set up like so:

    .srch_fld {
      background-color: #9999ff;
      transition: background-color 1s ease;
    }

3. triggering the set-class javascript is where we have our main puzzle: how/where do we switch between retool-objects and javascript-dom-objects?

    function srch_fld (which,val) {
      console.log(which);
      which.setValue(val);
      const fld = document.querySelector("input[name='" + which.id + "']"); // nope
      fld.classList.add("srch_fld");
      setTimeout(() => { fld.classList.remove("srch_fld")},1200);
    }

Presumably we would call this in a ROW-ACTION RUN-SCRIPT handler like so:

srch_fld( the_input_field_obj_here, currentRow.CODE )

But that gives us

// Error:Cannot read properties of null (reading 'classList')

We've also tried document.getElementById(which.id) to the same result.

This is gonna be simple, but we haven't quite got the right combo. Ideas?

We are on Retool Cloud.

[lindakwoo]

@trillich,
I can try to help you with this. Can you please provide me with an export of your json file for your app? Export it like this:

thanks!

[trillich]

hilight-flash-bg.json (197.6 KB)

Here's a streamlined instance of what we are shooting for. Thanks for taking a look, Linda

[lindakwoo]

@trillich,
I THINK I have accomplished what you want. In your event handlers on your table, add two more click actions to set your background colors:

The first one you add will set the color to the interim color that you want:

Then on the last click action, return it to the original background color, but set your Debounce to the number of seconds you want your temporary flash of color to be. (I've set it to half a second in this example). Debounce is essentially the same as using setTimeout to delay a function.

attached is a video.

Is this what you needed? Let me know!

[trillich]

Debounce! D'oh, that's so simple... and it will do nicely.

Thanks!