Display unicode emojis in tables

App Building
1

Hello,

I have now been trying for some time to display unicode emojis in my tables, but couldn't make it work fully.
My database has one table with different status types, they have an identifier, a label, a hex color code and I also wanted to add an emoji (one of the colored circles) as a representation for the status when there is not enough space in the app to display the full label. I wanted to go with storing this in the databse as this would allow me to change the emoji in one place, the database, if needed and it would change in all places I have used it in my apps. I made good experiences with this practice from storing the background color hex code in the database that is then dynamically used in Retool when needed. If I would hardcode the emojis into Retool it works, but also means that I have to build long tentative JS code and need to adapt it in all places when I want to change the emoji for a specific status tyape or when status types are added.

So, my table in the database and the emoji column are formatted in 'utf8mb4_0900_ai_ci'. I can see the emojis perfectly well in phpmyadmin:
image

The same data view in Retool will look like this:

image
image1049Ă—311 23.5 KB

Interestingly enough Retool is able to display one of the emojis, that is the black circle ' U+26AB. All the others are not displayed and I do not know how to fix this. The collation should be correct and I also tried to store the Unicode in the database instead of the emoji, but then the table will display the unicode as text.

I have not even tried to display them in other components as they are already shown as '?' in the query results in Retool:
image

Any ideas how to make this work? It seems to be connected to the database connection, but I can't wrap my head around it. Maybe @ben you have an idea, as you answered in this thread.

Thank you and best,
Timo

2

Hi Timo, were you able to solve this? If not, let me know and I can find out internally what you can do to get your unicode emojis to display correctly. Thanks!

3

Hi @alina.retool, no unfortunately I wasn't able to solve this issue. It would be great if you could check this!

1 Like
4

I was able to do this by looking at markdown and viewing source and copying the emoji and pasting it in the field of cell I wanted it to appear in. When I have a chance I will post some more info

View the source and literally copy the image you want and paste it into the column value field.... column type in my case is HTML
Screen Shot 2022-05-18 at 8.00.10 AM

1 Like
5

Hey @betternet!

Would you also mind posting what query.data looks like in Retool for the query that is returning those emojis? I'm curious how it's showing up there.

6

Hi @Kabirdas, sure:

{"status_id":[1,2,3,4,5,6,7,8],"label":["Neuer Kontakt","Kontaktiert","Wartet auf Vermittlung","Vermittelt","Unvollständig vermittelt","Inaktiv","Löschung beantragt","Gelöscht"],"color_code":["#F39898","#FBD293","#FFA5FC","#89E963","#A5F685","#89BCFF","#C6C6C6","#C6C6C6"],"icon":["?","?","?","??","?","?","⚫","⚫"]}

@ScottR Thanks for posting, but my problem is that I can't get the emojis through the query. They are dynamic and should not be added through Retool.

7

I see, and are you using MySQL here?

If that's the case, it is on our radar to allow you to connect to your database using different charsets which should resolve this issue, but it isn't possible at the moment :confused: I can report here when that functionality is included though.

8

Yes, I'm using MySQL.

Okay, thank you for keeping me posted on this!

9

Hi there, just updating here that this feature is now available behind a feature flag as it is still in early testing. Feel free to write into support if you'd like this early feature enabled for your org! :nerd_face:

10

Hi Jay, thanks for letting me know! This is great to hear :slight_smile:

11

Hi, how do I do this setting in my MySQL connection resource?

12

Hey @seedz_farm!

You should be able to specify your charset by entering it as one of the additional connection options on your resource configuration screen:

Can you let me know if that works?