Retool mobile custom components?

Mobile
1

Is there a way to create custom components on mobile? So far I have not been able to find a way to make anything other than in html. Is there something I am missing?

2

Hello @WHC1855!

Unfortunately there is not a way to create custom components on mobile :smiling_face_with_tear:

Due to the differences in platforms between Android and iOS there are a number of road blocks to having a single editor that can create code that will run properly in both.

A possible work around could be to use custom components in a web app, and access the web app from a mobile browser but I have yet to test that out myself :sweat_smile:

1 Like
3

I just thought.. this is what I need. I'm going to create my own custom components for retool mobile so I can minimise the amount of components I use. Just got one test component uploaded to notice the option is not available for mobile.

Are there any plans for this? Not even a basic version? I was planning a tag-list component for mobile. :smiling_face_with_tear: that only uses divs/spans and some color and rounded corners.

1 Like
4

Oh no I am so sorry to hear that.

Custom components for mobile are a feature request that is on the roadmap, I just checked and it doesn't seem to assigned to a team currently so I would imagine this is farther off than either of us would like :sweat:

I love the idea for a tag-list component, and can definitely make a feature request for it and keep you posted on that!

5

I get that this might be a challenging feature to implement due to the different platforms iOS/android.

Same situation for modules for mobile. The most important thing is that it would enable us to reuse code in different projects. Or to simplify the component tree.

In my example:
I needed a tag list for mobile. You would think that’s something easy to do. However, this tag list is in a custom component.

  1. Option 1 was to create containers with rounded corners and a background and a text component inside. Using the hidden property you can show or hide it. This worked, but I have to do this for every tag. At some point you have 10 different tags. That’s 20 components. If you have a custom component list of 20 with card components where the tag list is part of, the total amount of components for tags would be 20x20 =400 components. This makes your app slow.

  2. Option 2. I created an html components where I dynamically add spans/divs with rounded corner and add the text. This is only one component per list item. But because display: inline-block gets stripped, the tags get wrapped. And there’s no app custom custom component or a module I think. But I module would have caused many components as well I think.

For problems like this, a simple version of custom components would already suffice. Retool could vet the components that can be used or “arisk”. Things like span, a, button, image and div would be basic building blocks that could make it work already.

General guidelines and perhaps a linter checker that just shows errors when you push it to the custom component library.

I do not know where the hurdles are with this. :sweat_smile:I am probably skipping some steps.

6

Hi @Steven_W,

I completely agree, a very simple version of custom components for mobile would be very useful, reducing the need to duplicate work and allowing for highly reusable pieces of code.

I would imagine that you are correct, that the biggest challenge to us adding this is the difference between iOS and Android :sweat_smile: needing to have compatibility across browsers, devices and versions is likely the issue that has limited development speed.

There are feature requests for both tag list components and mobile custom components, and I will definitely be following up with our mobile eng team to see if they have more details on why these are still outstanding requests!

I wish I had a work around with another component that is available on mobile that would fit your tags use case :sweat: custom icons with list items is the closest I can think of but I am not sure they will meet your needs.

The other best option would be a web app used via a mobile browser :thinking: our mobile app is fairly new and continuously being developed but our web app has much great functionality with components having a "Show on mobile" option.