Implementing Traffic Lights / Color Changing Objects in SAP Analytics Cloud

[butfirstcoffee]

Hi there communitiy - I need some swarm intelligence help! 

I am trying to implement color changing objects (here: text fields in SAP GUI Icon font - in the Code these are the ones called "...Ampel"). 
Colors shall change according to the value in a table. Values are "green", "grey" ... (so names of colors essentially). And these values are in the following structure: "Vendor" (Dimension) - "Risk 1" (Property) - "green" (Value/Member); Risk 2 = grey, Risk 3 = red. 

My approach was to insert a Table that give the output above and to implement an Input Control to change the Vendor; so I only have one Result Set at once. Vendor 1 has 3 risk categories - all of them have different colors/values. 

The initial color is set (Code is working from "onInitialisation" of the page). That works. 

Now I am trying my best in the onChange Event of the Table but I cannot wrap my head around how to get this working. Maybe it is the wrong event? Maybe there's a total twist in my head?

//Define properties
var properties = [
"Anti-Bribery & Anti-Corruption (Assessment)",
"Assessment Result",
"Country & Industry Risk",
"ESG Risk"
];

//Iterate over properties
for (var p = 0; p < properties.length; p++) {
var property = properties[p];

// Get dimension properties from Data Source of Table
var dimensionProperties = Table.getDataSource().getDimensionProperties(property);

// Get Member(s) of Dimension Vendor (Do I need this anyway)
var allMembers = Table.getDataSource().getMembers("Vendor");

for (var i = 0; i < allMembers.length; i++) {
var memberProperties = dimensionProperties[i];

var description = memberProperties.description;

// Use the properties to set CSS class 

switch (description) {
case "green":
if (property === "Anti-Bribery & Anti-Corruption (Assessment)") {
AntiBribAmpel.setCssClass("greentext");
} else if (property === "Assessment Result") {
ResultAmpel.setCssClass("greentext");
} else if (property === "Country & Industry Risk") {
CountryAmpel.setCssClass("greentext");
} else if (property === "ESG Risk") {
ESGAmpel.setCssClass("greentext");
}
break;
case "grey":
if (property === "Anti-Bribery & Anti-Corruption (Assessment)") {
AntiBribAmpel.setCssClass("greytext");
} else if (property === "Assessment Result") {
ResultAmpel.setCssClass("greytext");
} else if (property === "Country & Industry Risk") {
CountryAmpel.setCssClass("greytext");
} else if (property === "ESG Risk") {
ESGAmpel.setCssClass("greytext");
}
break;
case "yellow":
if (property === "Anti-Bribery & Anti-Corruption (Assessment)") {
AntiBribAmpel.setCssClass("yellowtext");
} else if (property === "Assessment Result") {
ResultAmpel.setCssClass("yellowtext");
} else if (property === "Country & Industry Risk") {
CountryAmpel.setCssClass("yellowtext");
} else if (property === "ESG Risk") {
ESGAmpel.setCssClass("yellowtext");
}
break;
case "red":
if (property === "Anti-Bribery & Anti-Corruption (Assessment)") {
AntiBribAmpel.setCssClass("redtext");
} else if (property === "Assessment Result") {
ResultAmpel.setCssClass("redtext");
} else if (property === "Country & Industry Risk") {
CountryAmpel.setCssClass("redtext");
} else if (property === "ESG Risk") {
ESGAmpel.setCssClass("redtext");
}
break;
default:
break;
}
}
}