cancel
Showing results for 
Search instead for 
Did you mean: 

Coloring a row in a table based on selection (SAC Table CSS)

0 Kudos
215

Hello and good morning:

I have the following challenge:
I want to (dynamically) color a row in an SAC table according to the cell a user clicked on.
I can color the selected cell with no problem, but how do I then color the completetable row?
There seems to be no CSS class for that.

I looked at nth-child(i), but how do I determine the i (== row number) and set it dynamically? Or is there a different way?

Thanks in advance,
Andreas J.A.

View Entire Topic
Alexander_Blasl
Participant

Hi @andreasja_schneider 
There is a way to achieve that.

  1. Create for every potential row in your table a css entry (I did 200)
    .tablecolor1 .sap-custom-table-row:nth-child(1) {background-color: rgb(233,233,233);}
    .tablecolor2 .sap-custom-table-row:nth-child(2) {background-color: rgb(233,233,233);}
    .... 
  2. Go to the Table.OnSelect script (in my case):

    Application.showBusyIndicator("Loading...");
    var sel= Table_1.getSelections();
    if (sel.length >0)
    {
    var memberId2=Table_1.getDataSource().getResultMember("YMAT_PLNT",sel[0]).id;
    }
    var arr = ArrayUtils.create(Type.MemberInfo);
    var mem = Table_1.getDataSource().getResultSet();
    for (var i = 0; i < mem.length; i++) {
    var member = mem[i]["YMAT_PLNT"];
    var memberId = member.id;
    var memberDescription = member.description;
    var alreadyExists = false;
    for (var j = 0; j < arr.length; j++) {
    if (arr[j].id === memberId) {
    alreadyExists = true;
    break;
    }
    }
    if (!alreadyExists) {
    arr.push({id: memberId, description: memberDescription});
    }
    }
    var position = -1;
    for (var k = 0; k < arr.length; k++) {
    if (arr[k].id === memberId2) {
    position = k;
    break;
    }
    }
    var color = "tablecolor"+(position+1).toString();
    console.log(color);
    Table_1.setCssClass(color);

    Application.hideBusyIndicator();