Conditional formatting in AppMaker table

问题

Have a data table in AppMaker and would like to do conditional formatting (Green to Red) in several columns based on the field value.

For example if ROI is over 40% give the number a dark green bg, 20% light green, < 0% red, etc.

Ideally I want to do a gradient like excel but that might be too complicated. Any help would be appreciated.

回答1:

Couple of assumptions, I am guessing your column is a vertical/horizontal/fixed panel or some other type of widget that you can edit in App Maker's property editor and that ROI is a field in your datasource. You can get this accomplished by setting 3 style classes in your 'Style Editor' like this:

.dark-green {
  background: linear-gradient(to bottom, darkgreen, green);
}
.light-green {
  background: linear-gradient(to bottom, green, lightgreen);
}
.red {
  background: linear-gradient(to bottom, darkred, red);
}

Then in the property editor for your widget go to 'Display' - 'styles' and bind your styles as follows:

@datasource.item.Percent === 0 ? 'red' : @datasource.item.Percent > 0 && @datasource.item.Percent <= 0.2 ? 'light-green' : @datasource.item.Percent > 0.2 ? 'dark-green' : ''

You can play around with the CSS for the background and such once you have your classes and binding for the styles accomplished to find a visual look that you like.

To apply this concept to the entire table row and still include the 'app-ListTableRow' and 'hoverAncestor' styling you would bind your table row styles as follows:

@datasource.item.Percent === 0 ? ['red','app-ListTableRow','hoverAncestor'] : @datasource.item.Percent > 0 && @datasource.item.Percent <= 0.2 ? ['light-green','app-ListTableRow','hoverAncestor'] : @datasource.item.Percent > 0.2 ? ['dark-green','app-ListTableRow','hoverAncestor'] : ['app-ListTableRow','hoverAncestor']

来源：https://stackoverflow.com/questions/52126309/conditional-formatting-in-appmaker-table

标签

google-app-maker