Display Hero Icons as images in List view based on condition

[StefanvanLierop]

Hello Gliders,

So I want to display a specific Hero Icon as image in a List view, based on a conditional statement. So far I’ve created a Hero Icon column, but each row is showing the same icon.

What to do different to make this work?

[Darren_Murphy]

What I normally do here is setup my hero icons in a separate table. Create one row for each of your conditionals, and create the associated hero icon. Then in your main table (where you want to use the icons), create a relation that matches the conditional/keyword with the same in your hero icon table, then use a lookup through that relation to fetch the correct icon.

Here is an example of what the hero icon table might look like:

[StefanvanLierop]

How do you create the Hero Icon with the specific styling the image column?

Is it a url? I don’t get it.

[Darren_Murphy]

It’s not an image column, it’s a Hero Icon column.
It uses the values in the previous two columns as replacements to generate the correct image with the correct colour.

[StefanvanLierop]

Got it!

[StefanvanLierop]

So I created a ‘Relation Status’ column in my Products Table to my Hero Icons Table, as you suggested.

Now I would like some help to conditionally display one of the three Hero Icons dynamically, based on a boolean value (true or false) and stock value (number).

Hero Icons Table:

Products Table:

Boolean and Stock column from Products Table:

[Robert_Petitto]

1. Create an if then else column in the products table that results in one of Statuses from the Hero Icons table.
2. Relate the ITE column to the Status column in the Hero Icons Table
3. In the Products Table, create a lookup column to look up the Hero Icon through the relation

[StefanvanLierop]

So far so good…

But I’m having trouble with the If Then Else conditions.

In fact, I have to match two conditions to result in a Status.

If A is false And B is > 1 Then Status 1

Etc.

How do I do this?

[Jeff_Hager]

@StefanvanLierop

If A is false And B is > 1 Then Status 1

IF A is not false Then blank
IF B <= 1 Then blank
ELSE 1

[StefanvanLierop]

I’m still not getting this correctly in my If Then Else column:

A = boolean value
B = nummeric value
C = Statement

IF A = false
AND B = 0
THEN C: Niet in gebruik en geen voorraad

IF A = true
AND B => 1
THEN C: In gebruik en voorraad 1 of meer

IF A = true
AND B = 0
THEN C: In gebruik en geen voorraad

[Robert_Petitto]

Maybe use a javascript column instead of ITE column?

const A = p1;
const B = p2;

let C;

if (A === false && B === 0) {
  C = "Niet in gebruik en geen voorraad";
} else if (A === true && B >= 1) {
  C = "In gebruik en voorraad 1 of meer";
} else if (A === true && B === 0) {
  C = "In gebruik en geen voorraad";
} else {
  C = "Invalid values for A and/or B";
}

return C;

Replace p1 and p2 with the column values.

[StefanvanLierop]

I don’t know how to put my column values in the code.

Is it just the name of the column? Perhaps you can give me an example?

[Jeff_Hager]

Add a javascript column. Copy and paste the code as is into code box in that column configuration. You should also see p1, p2, and p3 parameters in the column configuration. Point p1 and p2 to your columns that contain the A and B values.

[StefanvanLierop]

It’s working now with the Javascript column

Is it correct that a Boolean column returns true or empty (and not false)?

Because of that I had to make a little change in the Javascript code (first If statement) to make it work:

const A = p1;
const B = p2;

let C;

if (A !== true && B === 0) {
  C = "Niet in gebruik en geen voorraad";
} else if (A === true && B >= 1) {
  C = "In gebruik en voorraad 1 of meer";
} else if (A === true && B === 0) {
  C = "In gebruik en geen voorraad";
} else {
  C = "In gebruik en voorraad 1 of meer";
}

return C;

[Jeff_Hager]

@StefanvanLierop

Is it correct that a Boolean column returns true or empty (and not false)?

A boolean can be either true, false, or blank. Your approach to fix it is perfect! Checking specifically for false is never ideal and can bite you…unless you have a scenario where blank would be a valid option too. Glide did account for that in the IF column by allowing you to check if a boolean is checked or unchecked instead of true or false, but that doesn’t apply to javascript, so what you did is good.

[ThinhDinh]

I would shorten the conditions a bit. You don’t have to write out “== true” or “!== true”.

const A = p1;
const B = p2;

let C; 

if (!A && B === 0) C = "Niet in gebruik en geen voorraad";  
else if (A && B >= 1) C = "In gebruik en voorraad 1 of meer";
else if (A && B === 0) C = "In gebruik en geen voorraad";
else C = "In gebruik en voorraad 1 of meer";

return C;