App Data NOT getting displayed as it should on a device


I used a simple collectionview with 4 text elements inside and it seems to render just fine on android. Are you using a different set of elements inside your collection? I just used a static object to test with.


My case is 3 containers with plain text elements populated from the table.

My problem is that the preview shows it to me correctly and I don't know how to troubleshoot something that shows working fine when I check it in the desktop preview.

but ends up loosing first row of the table on ios

and does this mess on an android:

Please advise, how should I approach this than? Design reviews are done on a projector using desktop preview, so at this point everyone expects this functionality implemented. What should I say to execs asking me why the mobile app works and looks not the way they were shown a second ago in the big screen?

"It's an interface glitch support is looking in to it"...

got old after a month. Should I tell the team that current framework is unable to display desired element and they will need to rethink it in context of what the platform is capable of? Or should I keep waiting for someone from Retool to actually fix something that's not working as expected?

I cant answer those questions for you, but i can see if there is a workaround!

So you have a container around each text element?


why dont you just place the text directly in the collection view, rather each inisde there own containers? Whats the purpose of that? Unless i am misunderstanding

Containers in this instance are meant to provide additional styling options text element lacks such as formatting or changing the background color of a row if it needs to be highlighted.

Here i the same element with nested containers removed:

Not exactly that slim 3 row table anymore. It's suppose to be compact summary that I was hoping to fit in the header of a collapsible list with details...

So at this point should I be massaging my data to shrink it till fits? Or there is something else left to try?

Point taken! I wonder if you could use the new html element effectively?

here is some simple html that renders nicely for me on android:

    <table style="width: 100%; border-collapse: collapse; border-bottom: 1px solid rgba(0, 0, 0, 0.5);margin:10px">
            <td style="width: 15%; border-bottom: 1px solid rgba(0, 0, 0, 0.5);">R1c1</td>
            <td style="width: 55%; border-bottom: 1px solid rgba(0, 0, 0, 0.5);">R1c2</td>
            <td style="width: 15%; border-bottom: 1px solid rgba(0, 0, 0, 0.5);">R1c3</td>
            <td style="width: 15%; border-bottom: 1px solid rgba(0, 0, 0, 0.5);">R1c4</td>
            <td style="width: 25%; border-bottom: 1px solid rgba(0, 0, 0, 0.5);">R2c1</td>
            <td style="width: 25%; border-bottom: 1px solid rgba(0, 0, 0, 0.5);">R2c2</td>
            <td style="width: 25%; border-bottom: 1px solid rgba(0, 0, 0, 0.5);">R2c3</td>
            <td style="width: 25%; border-bottom: 1px solid rgba(0, 0, 0, 0.5);">R2c4</td>
            <td style="width: 25%; border-bottom: 1px solid rgba(0, 0, 0, 0.5);">R3c1</td>
            <td style="width: 25%; border-bottom: 1px solid rgba(0, 0, 0, 0.5);">R31c2</td>
            <td style="width: 25%; border-bottom: 1px solid rgba(0, 0, 0, 0.5);">R3c3</td>
            <td style="width: 25%; border-bottom: 1px solid rgba(0, 0, 0, 0.5);">R3c4</td>

Now, if your data is sometimes more than 3 rows etc, you could have this dynamically generated via a javascript function and have that be the source of the html element, etc. But you should be able to style it fairly nice.

Indeed it does display better.
At least much more manageable as an element this way.
Downside I presume is inability to generate dynamic size table with {{item.}}

Inconsistency in between preview and actual app deployment is still there.
Makes me keep the phone handy reopening the app to refresh. Slows me down badly.
Any chance this can be looked in to?

Are you cloud or self hosted?

I'm on Retool Cloud.

@Scottsky I hope this gets resolved in the past I would of used Node-RED dashboard for surfacing sensor/iot data both for web & mobile.

But having discovered Retool I hope the trajectory of new features includes richer reporting & visualisation of timerseries data and having an MQTT resource would be nice.

I'd love to have this element there. Short and informative. But with it taking so long to figure why preview on just this specific element I put a good thought what would work in its place. And it grows on me.

As for the project in whole, I was hoping for an ESP32 with some Blynk or Pi with Node-Red but it quickly grew out of hand and became hardware agnostic scientific data aggregator with some sensor logic driven robotics keeping this ecosystem serviced. Never should've let this jeene out. But since it happened Retool has been a great help.

1 Like

As is often the case with scope.
I've never been happy with task/todo list managers.
So I've been building one on Retool and it keeps growing & growing!

May be we start to suggest IoT/OT (operational technology) type features.
Starting with a mobile slider & gauge components.

I've used Node-RED and Retool to bridge the IT/OT divide.

Having IoT connectivity built in to Retool sounds like a good idea.
Definitely deserves a topic of it's own as I would live to dig in to it deeper.
I was imagining borderline of retool would be API connectivity. Maybe webhooks.
And as much as I would want my dash to be super reactive and WebSocket realtimy I'm not sure retool would be able to handle the load.

Meanwhile I'm getting pretty frustrated with preview not reflecting the actual layout of the app.
I don't know how to edit something I can not properly see. Makes me have a phone by that needs retool relaunched to reflect changes. This is too slow to be a long term solution.

Can someone from Retool show me how can I preview my edits on Retool screen so it reflects the way it looks on the phone, please.

Hey @Scottsky, mind sending over a JSON of the app so I can preview on a few devices. Not sure what device specs we use in our web preview, but will look into that as well. Can you also share what device / OS you are using? Thanks.

it's looking very good BTW.

How are you doing icons the new HTML component?
But v.odd that it's dropping the time stamp.
I have seen something sort of similar "string length" ?
Perhaps try shorting test buoy 3 to say buoy 3 to see if renders on mobile.

I don't see any IoT/OT app dealing with streaming realtime data.
For now I integrate the via Postgres .
But all streaming RT data is stored in influxDB and visualised via Grafana

Problem is this is user generated data. I can't be safe from user would enter something long and meaningful. And shortening name to 8 symbols is sooo 90s =) (almost want to make em name assets no_spases ALL_CAPS)

If you are talking :small_red_triangle::small_red_triangle_down: - it's ascii symbols.
Other icons are hand drawn images I just insert as <IMG> tag.

I was thinking of having Database as a water-barrier between real-time world and Retool, but the need of bi-directional communications and up to 1 hour lag of my satellite downstream keep me actively looking for alternative solution.

MQTT would be my choice for bi-directional coms I've got it on my notional backlog to look at using MQTT.JS via pre-loaded libraries.

BTW EMQX is the best broker I've used.
They have free tier on their serverless service, it's hosted in USA but latency has Not been an issue for me

Using MQTT.js blog

MQTT was the best option by far.

I was considering deploying brokers on survey sites on some pies. Just to have an option to store messages locally until uplink is back up. But was not allowed extra hardware in the ecosystem.

With this being said I added some MQTT client functionality to latest asset firmware. But it's not connected to anywhere just yet. At the moment no asset within stable LTE coverage so can't test it right now.

Another realtime solution I use in Retool-ish is opening an iframe to a bootstrap deployment of navigating interface on the asset itself. Bandwidth hungry, Works great to manually steer the uni, but hard to pass data to retool out of it.

I don't know anywhere near enough about your usecase, but maybe you could set up a webhook to a retool Workflow?

Then your retool app from the client side can set up a REST resource (or javascript query) that writes periodically to the webhook -> which invokes a retool workflow -> which could write to a retool database -> which is then accessible to your retoolapp or whatever else you need.

The workflows are very easy to use.