Mobile Responsive view

App Building
1

Hi, Just singed up and love the tool.
I'm working through some designs and have noticed that on Mobile view some of the containers don't look great....and in reality aren't usable. Is there a way to manage the CSS or is ReTool looking at ways to render the app better in mobile viewports?

retool
retool1203×2220 186 KB

Thanks

2

Hi ajr! Welcome, welcome :blush:

Ack, that's not great. It seems like the app likely needs to be edited to pull out the container width a bit more. Here's a screenshot of a widened container in mobile, and a GIF showing how it looks initially (before widening manually). Let me know how it goes (or if it's still compressed)

1042×1118 52.9 KB

3

Brilliant, thanks Victoria, that's worked a treat.

One other question. Can you advise on any good resources for manipulating the Object and Array data in REST API's.

I'd like to do some calculations based on integer values returned in an Array.

thanks again

4

Awesome, very happy to hear that :smile:

What kind of calculations are you interested in doing here? You can do a fair number of calculations/JS methods in a JS query or JS transformer by referencing the API data directly, like {{query1.data.name}}

The left panel shows the data structure of your query (and component) returns, so you can see how to best select the data you're interested in!

1740×736 57.6 KB

6 
let initialValue = 0;
let sum = RadixValdiators.data.result.validators.reduce(
    (accumulator, currentValue) => accumulator + currentValue.totalDelegatedStake
    , initialValue
)

return(sum);

but it returns the numbers as a long string instead of adding all the numbers

8

So I managed to get the query working in the Query preview window at the bottom and when I run it the values are returned in the main pane. However when I preview the app I get the following error

image

{{TotalDelegatedStake.data}} will return NaN within the component in App preview
{{TotalDelegatedStake.rawData}} will return 0 within the component in App preview

The code I am running is

let initialValue = 0;
let sum = RadixValdiators.data.result.validators.reduce(
    (accumulator, currentValue) => accumulator + parseInt(currentValue.totalDelegatedStake)
    , initialValue
)

return (sum/10000000000000000);
9

I managed to get it loading by adding a 2 sec page load delay to the query. Is that normal behaviour?

10

Awesome! It does seem like queries load in a different order in Preview than in Edit, so it's likely that adding a delay ensures the correct load order.

And just as a quick note, Retool has lodash loaded in, so if you'd like to find the sum you can do something like _.sum(array), or in your case, _.sum(RadixValdiators.data.result.validators)

11