Apply conditionnal color on icon/text on FORM

Platform
1

To apply a specific color on text/color in a form like this :

image

You will have to use the Cell class attribute of your column :

image
image698×650 44.1 KB

Use a Javascript expression to choose which CSS class has to be applied :

For example this ternary function :
row.__modif_user_login == ‘administrateur’ ? ‘green-cell’ : ‘red-cell’

It means : if the user is administrateur, it will apply green-cell, else it will apply red-cell.

You can also compute the correct CSS class in the database (in the model), and just for each line choose row.my_css_class instead.

Then just compute your style in V1 custom form attribute :

image
image725×165 3.23 KB 

<style>

.green-cell span { color : green }
.green-icon i { color : green !important }
.red-cell span { color : red }
.red-icon i { color : red !important }

</style>

Do not forget : on icon you have to add !important because style is overriden by default

1 Like
2

In V3 please add following Custom Code in studio and then you can use the style

Html :

<script src="/js/jquery-3.6.0.min.js"></script>

JavaScript :

var customStyle = '<style>' +
'.ii-form-table .red_icon i{ color:#F9ACAA !important;}' +
'.green_icon i{ color:#F9ACAA !important;}'+
'.orange_icon i{ color:#FE5000 !important;}' + 
'.yellow_icon i{ color:#FE5000 !important;}' + 
'.centered .ii-cell-display{ text-align: center; padding: 0px;}' + '</style>'
jQuery(window.parent.document.querySelector('#ii-grid')).append(customStyle);