Table styling in Platform 7

Support
#1

Hi
I styled some of the tables in legacy version that worked but now trying it in the new platform but seems something is not correct.

Here is my scss style in halo-ext2, within mixin

 //Used in any Table
//------------------------
.v-table-row.background-blue {
     background-color: blue;
     color: white;
}
.v-table-row.background-green {
     background-color: green;
     color: white;
}
.v-table-row.background-yellow {
     background-color: yellow;
     color: white;
}
.v-table-row.background-red {
     background-color: red;
     color: white;
}

Here is how I have implemented following this link

   @Install(to = "brandSalesTable", subject = "styleProvider")
protected String customerTableStyleProvider(SalesSummary entity, String property) {
    if (property == null) {
        if (entity.getSalesDataType().getSalesDataSet().equals(SalesDataSet.ACHIEVEMENT_PERCENT)) {
            if(entity.getPd01Amount().doubleValue()< 80) {
                return "background-red";
            }else if(entity.getPd01Amount().doubleValue()<100) {
                return "background-yellow";
            }else{
                return "background-blue";
            }

        }
    } else {
        if(entity.getPd01Amount().doubleValue()< 80) {
            return "background-red";
        }else if(entity.getPd01Amount().doubleValue()<100) {
            return "background-yellow";
        }else{
            return "background-blue";
        }

    }
    return null;
}

but not working, no style found when I run it.

image
image2612×430 57.1 KB

Thanks for your help.

#3

Hello @mortozakhan

You should fix your CSS, because these custom style names are added to cells:

.v-table-cell-content.background-blue {
background-color: blue;
color: white;
}
.v-table-cell-content.background-green {
  background-color: green;
  color: white;
}
.v-table-cell-content.background-yellow {
  background-color: yellow;
  color: white;
}
.v-table-cell-content.background-red {
  background-color: red;
  color: white;
}

Regards,
Daniil

1 Like