Hi,
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.