Dynamic values in tabbed container title with JavaScript


I'd like to change the name of a tab dynamically based on a row count e.g. "Orders" -> "Orders (x)"

Is this possible?

Hey there @Francis – it sure is! You can write JavaScript anywhere in Retool using {{ }}. Here's a quick example I put together: note that I'm using a Transformer to generate a fake value for orders, but you could pull that from one of your existing queries (or write a new one).

Hi Justin,

Thanks for the answer. The issue I now have is the tab names do not refresh after openOrdersTable loads its data.

If I try to reference the query itself it's worse: since there is no data when query has not run yet, the entire screen goes blank due to a null reference.

How do I force the Tabs control to refresh?

Tab names
[{{ "Orders (" + openOrdersTable .totalRowCount + ")" }}]

@Francis that's weird, when the query gets new data the model should update. Can you send a screenshot / video of what's happening?

Note: the code you included is referencing data from the table component, so you're adding a second layer of dependency away from the query. You can handle the null reference with a ternary.

It's very verbose but this works:

{{ openOrdersQuery.data == null || openOrdersQuery.data.Results == null ? "Orders ": "Orders (" + openOrdersQuery.data.Results.length + ")" }}

@Francis this looks great! You could move this logic into a Transformer if you want to keep things more organized, but I'd say this is a pretty normal chunk to have in there.

Yes, that's my goal as soon as I get functions working, see Javascript function is not defined