Условное форматирование в таблице AppMaker - PullRequest
Новая
       9

Условное форматирование в таблице AppMaker

0 голосов
/ 01 сентября 2018

Имеют таблицу данных в AppMaker и хотели бы выполнить условное форматирование (от зеленого до красного) в нескольких столбцах на основе значения поля.

Например, если ROI превышает 40%, укажите число темно-зеленый bg, 20% светло-зеленый, <0% красный и т. Д. </p>

В идеале я хочу сделать градиент как Excel, но это может быть слишком сложно. Любая помощь будет оценена.

1 Ответ

0 голосов
/ 04 сентября 2018

Пара предположений. Я предполагаю, что ваш столбец - это вертикальная / горизонтальная / фиксированная панель или другой виджет, который вы можете редактировать в редакторе свойств App Maker, и что ROI - это поле в вашем источнике данных. Это можно сделать, установив 3 класса стилей в «Редакторе стилей» следующим образом: 

.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);
}

Затем в редакторе свойств вашего виджета перейдите к «Показать» - «Стили» и свяжите ваши стили следующим образом: 

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

Вы можете поэкспериментировать с CSS для фона и так далее, когда у вас есть классы и привязка для стилей, выполненных, чтобы найти визуальный вид, который вам нравится.

Чтобы применить эту концепцию ко всей строке таблицы и по-прежнему включать стили «app-ListTableRow» и «hoverAncestor», необходимо связать стили строки таблицы следующим образом: 

@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']
...