Hello all,
I have a field in our app (several, tbh) where we are storing the data as a simple choice of three, lets say NO, SOME, YES. Then later we want to be able to show this choice in a grid column, but with three different icons, Thumbs Up, Thumbs Down, Smiley face etc. rather than the text data. I’ve bashed my head against the wall a bit, but can’t think of how I’d do it. Any ideas.?
Thanks for looking
Neil
Hi Neil,
you can do this with display rules in the column settings for that table. They would look a bit like this, but three rule for the 3 options:
Cheers
Hugo
Hi Hugo, yes, of course you can do it like this, and I feel a bit silly for not thinking about it and from that side. Appreciate the help.
Not at all, you’re welcome!
Sorry, need a bit more help. I’ve just tried this method, and I’m finding an issue with ‘Hide Value’ which appears to hide the icon I want to use as well as the textual version of the option in the grid column. I get any background colour formatting I’ve set, but as soon as I ‘hide value’ the icon goes with it. Any thoughts.?
Top one is in the builder, bottom one in the app…
I’m not sure I completely understand your specific implementation but the below video I created three years ago may provide some inspiration 
Feel free to reach out to me via DM if you’d like to connect.
Like my good friend Hugo, I’m in the U.K.
Cheers Carl. Another thing that might not be referenced in the video are the link design settings (under the display rules etc). Play around with them but I think the icon doesn’t always appear if set to Legacy. Try setting them like this and see if it helps.
Morning Carl, You saw our app a few months back, so you’ll recall we have a lot of columns on display in our main pages. It’s currently 17, but I need to add 5 more. Unsurprisingly, the page is becoming hard to zoom in to something readable where I can see the whole grid. So, I kind of recalled that we could maybe display representative icons instead of textual data. With thoughts of hopefully reducing some columns to small and easier to understand I naively imagined that it could be done without having to invoke lots of workarounds. I can see I was over-optimistic. It’s no problem. I thought that might improve something for us on our live app, but hey-ho. I’ll just park it up for now and maybe come back to it another time. .
Appreciate your help Gents, but let’s leave this one here for now.
Hey Neil,
You can accomplish this by just creating another blank text field called something like icon display. Then, you can display your new blank icon field in the table and created a display rule that references the original choice field and show whatever icon you want. I can share an example if that would help.
Tyler
Hi @Tyler1 - agreed, that’s what I covered in the video. 
Hello Tyler,
Thanks for the response. I think this is the same method that Carl showed me in one of his video’s. I’m going to put this on my list for some app updates over the Christmas holidays, and see where we go with it. My main table is 82 fields now, with quite a few workaround fields for transforming something into something else. Its getting a bit unwieldy from a maintenance point of view, and I was hoping not to have to do this. Our app allows us to run our business, and I have no intention of being an ‘expert builder’ even though we’ve been doing this since 2016. I’ll see what I can come up with. Appreciate the help.
Neil
Wow 
there must be a lot of horizontal scrolling going on with so many columns. 
I only show about 20 at a time, but we use big wide screens and take the zoom down to 80%. Anything that we can do to reduce a column to a single character is worth trying.!
Neil
I should have watched the video first! Agreed, its not a perfect solution to add more fields. I have a couple tables that have >100 fields 
… kind of snuck up on me. I try to just bury those at the end and name them appropriately so they’re out of sight, out of mind.
@NeilParkin60970 - not sure if you’ve explored changing the font size by view or scene with CSS.
That way you can keep your browser at 100%. Every little helps 
/* Clients Table Font Size */
#view_4 {
font-size: 8px; /* Adjust the font size */
}
/* Clients Page Font Size */
#kn-scene_3 {
font-size: 8px; /* Adjust the font size */
}
If you’re a Windows user and your tables have horizontal scrolling, you can use SHIFT and the scroll wheel.
Thats useful Carl. THanks.
Being a food business, I am keen to keep fingers off keyboards and mice as much as we possibly can.
We’ve experimented with touch screen monitors too, but with mixed results as the points of touch are pretty small.
I also don’t want to have staff changing screens or viewing pop-up detail windows etc. One screen, everything visible, no scrolling. Thats my objective really.
Glad that the CSS might be useful.
Here is another thought, and another little challenge for the CSS wizards.
I was thinking that if I can get the data down to an icon, but not the column title which may still be several characters. If I was doing this in Excel, I would format the title row with a -45deg or a 90deg alignment, like this…
We use sticky headers, but how about transformed headers.?
Thanks in hope and anticipation. Neil
@NeilParkin60970 - As you know, I’m not a coder, but I have included the snippet below, which I have used in the past to create a vertical column heading. You need to add this to the CSS section, and then you can reference the class and label name directly in the column header.
Add this to CSS
/* Vertical Text */
.clVertical {
writing-mode: vertical-rl;
padding: 4px;
}
Add this to the Column Properties Header
<span class="clVertical">ID Number</span>
I like that.
And it wouldn’t take much to make it at a 45° angle I’ll get back to you on that tomorrow.
To apply that to all headers in the table you could do this:
#view_123 thead tr th{
writing-mode: vertical-rl;
padding: 4px;
}
Craig