Is there a way to implement traffic lights into one column of a table?

Dear App Builders,

In order to visualize three different states (“outdated”, (null), “up to date”) in one column of a table, I would like to use a traffic light functionality. So that I can display a simple red circle for “outdated”, yellow for “(null)” and green for “up to date”.

Does somebody have an idea how I could implement this functionality or has maybe already tried this out?

Example Data:
image

Thank you very much in advance!

Telling from my experience: No, there is no such Apps feature right now (I might be wrong, though). However, Apps has the possibility to allow HTML rendering in columns. For my App, I’ve used this approach with SVGs embedded as cell content to get some icons into my table. You only need the SVG code for the three types of traffic lights - there are plenty out there. Their source code can be obtained by opening an SVG in the browser (in a dedicated tab!) and switching to source code view. Then just add them as a new column via your Workflow of choice (e.g. via CIT and the status types as key and joining them to your view data) and use the extended data table it in Apps, setting "escapeHtml": false for the respective column. You need to predefine the size of the SVG in the SVG markup, though. Make sure to go with Public Domain (or at least compatible) licenses if you don’t create the SVGs yourself.
Please also note, that this solution is not the most storage-space efficient since the SVG content can be quite big (1k+ tokens) and has to be replicated (and transferred) for every row. But for only displaying a couple of rows, you should be just fine.

Thanks @Flogge!
Do you know if it is possible to use the icons from our styleguide (http://od-styleguide.pages.intranet.onelogic.de/develop/#/Elements/OIcon) as well?

Well… yes and no. Since the icons are SVGs themselves afaik, they can be used, too, using my approach above (or even easier by using the internal image reference maybe). Using them in the same way as for action buttons I think is not possible, though. You might want to reach out for the dev folks of Apps. Maybe there’s a way (somehow they need to get the icons in there, too). Maybe there’s already a hidden/undocumented/unintentional feature.

Hi @julian.geuder :slight_smile:
If you’re looking for a concrete example of what Flogge described above, I have an implementation of using SVGs as traffic lights in our internal apps. Just give me a ping.