Creating a list of icons based on condition everytime a js code is run

💬 App Building
1

I have a multipage app. Each app has multiple tabs and each tab loads from a data source (mainly REST API GET) up on a event.

For purpose this post let's set few items:
outcome wanted: I want to display a list of 4 icons after a query is run via an event.

How is query run? Today this query is a button that takes an input from user and fetched data from multiple REST API calls and loads few key/values and tables.

as part of the load I have set of key/values from multiple data source. They are displayed on screen in various tabs. No issues.
Some of the key values are important to call out. They are spread over multiple tabs so I user wants to view these import key/values they have to click into each tab. Not a good user experience.

I instead created 4 icons to represent 4 import key/values from these tabs. All of these key values are true/false type of data types or text types that represent true/false.

I placed these 4 icons outside of tab container on main page just under the search button. So it is right up front and very visible regardless of what tab user may be viewing. I also added tooltip to icons so a new user can see what they mean.

I futher wrote javascript to show/hide icones. Logic is basis: if thru then show the icon othereise hide the icon.

few issue with 4 icons:

  1. icon size vs amount of room it takes up horizontally. I can't get them to show up right next to each other. This is a problem as more icons will be addded in future.
  2. show/hide of icons leave gaps between icons when 2nd, 3rd icon is hidden. not a good look.
  3. I learned how to use the color property but it is a static color.

In a perfect implmentation. I would have a line of icons bunched up next to each other and dynamically create the placement so that hidden one's don't even appear and take up any spaces.
or
I would use light grey color and dim the icon that are false result and use bright color for true result icons. In this I would still need to place the icons next to each other bunched up.

I am a beginner javascript person. I would think one could use their own icons (available on secured network via https GET, write a js code that takes input from Retool app, creates a train of icons with correct color/shading, and display it on Retool app page.

Backgroud: I reasearched the net and retool community. Icon and in general component spacing options are limited. Icon next to each other with 4 pixel between is not possible. I can't stack 2 icons on top of each other. If I could stack it then I would be able to grab a light shade icon and dark bold icon; place it on top of each other; and logic would only show one and hide one.

Any suggestions???

1 Like
2

Hi Kamlesh, thanks for joining the forums.

I can see your point, layout is somewhat constrained in Retool.

Here are my suggestions:

  1. Retool has 12 columns, so use a container of a smaller width than the screen. Also, feel free to nest containers to make even smaller ones. Additionally you can turn off margin on the icons to eliminate some whitespace.

  2. As far as I know containers won't collapse their contents to eliminate the whitespace between the icons. So your idea to grey them out seems the best.

  3. To grey out the icons, link their colour property to your true/false keys. You do this by setting the colour property as {{ yourBooleanKeyValue ? 'grey' : 'red' }}.

  4. If you can't toggle on your key values, make new state variables and set them to toggle each time you click on an icon.

Hope this is helpful for your use case.

image
image2517×734 111 KB

image