Style d'un attribut basé sur la valeur d'un autre attribut

Support
1

Bonjour,
Je voudrais créer un style d’attribut basé sur le contenu d’un autre attribut :
L’attribut A (zone saisissable ou non) passe au rouge quand sa valeur est supérieure à celle l’attribut B.
Est-ce que c’est faisable ?
Merci d’avance.
Abed.

2

Il faut implementer le hook getStyle(field, row). Ex:

MyObject.getStyle = function(f, row) {
    if (f.getName() == "myField")
        return this.getFieldValue("myOtherField") == "V1" ? "greenbg" : "redbg";
};
3

Merci David, ça marche nickel.

4

PS: L’exemple ci-dessus a été ajouté dans le doc: https://www.simplicite.io/resources/documentation/01-core/businessobject-code-hooks.md

5

Bonjour,

pour continuer sur cette question, j’aimerai pouvoir aller un peu plus loin.
On peut déclarer un attribut de type couleur à un objet.
J’aimerai que la couleur choisie devienne alors le style de l’attribut libellé de l’objet.

comment faire ?

6

Je reformule pour être sûr de bien comprendre…

Votre objet A a un attribut a1de type couleur et un attribut a2 de type texte. Ce que vous voulez c’est, pour un record donné de A, utiliser la valeur de a1 pour le style background de a2 c’est bien ça ?

7

c’est bien ça.

ça permettrait d’étendre le champs des couleurs possibles.

8

Ca ne peut pas se faire autrement qu’avec des hooks clients Javascript.

En effet le hook serveur getStyle dont il est question précédemment est conçu pour renvoyer un (ou plusieurs) noms de classe CSS destinées à être ajoutées aux tags class des elements de l’attribut. Une simple valeur de couleur n’est pas une classe CSS donc ça peut pas marcher par ce mécanisme…

9

PS: rien ne vous empêche de définir vos propres classes CSS dans la resource STYLES de votre disposition ou de votre objet, et dans ce cas vous pourrez utiliser le mécanisme du hook getStyle

10

Voila des exemples de classes pour les couleurs nommées (les couleurs avec un nom connu de tous les navigateurs):

alicebluebg { background: #F0F8FF; }
antiquewhitebg { background: #FAEBD7; }
aquabg { background: #00FFFF; }
aquamarinebg { background: #7FFFD4; }
azurebg { background: #F0FFFF; }
beigebg { background: #F5F5DC; }
bisquebg { background: #FFE4C4; }
blackbg { background: #000000; }
blanchedalmondbg { background: #FFEBCD; }
bluebg { background: #0000FF; }
bluevioletbg { background: #8A2BE2; }
brownbg { background: #A52A2A; }
burlywoodbg { background: #DEB887; }
cadetbluebg { background: #5F9EA0; }
chartreusebg { background: #7FFF00; }
chocolatebg { background: #D2691E; }
coralbg { background: #FF7F50; }
cornflowerbluebg { background: #6495ED; }
cornsilkbg { background: #FFF8DC; }
crimsonbg { background: #DC143C; }
cyanbg { background: #00FFFF; }
darkbluebg { background: #00008B; }
darkcyanbg { background: #008B8B; }
darkgoldenrodbg { background: #B8860B; }
darkgraybg { background: #A9A9A9; }
darkgreybg { background: #A9A9A9; }
darkgreenbg { background: #006400; }
darkkhakibg { background: #BDB76B; }
darkmagentabg { background: #8B008B; }
darkolivegreenbg { background: #556B2F; }
darkorangebg { background: #FF8C00; }
darkorchidbg { background: #9932CC; }
darkredbg { background: #8B0000; }
darksalmonbg { background: #E9967A; }
darkseagreenbg { background: #8FBC8F; }
darkslatebluebg { background: #483D8B; }
darkslategraybg { background: #2F4F4F; }
darkslategreybg { background: #2F4F4F; }
darkturquoisebg { background: #00CED1; }
darkvioletbg { background: #9400D3; }
deeppinkbg { background: #FF1493; }
deepskybluebg { background: #00BFFF; }
dimgraybg { background: #696969; }
dimgreybg { background: #696969; }
dodgerbluebg { background: #1E90FF; }
firebrickbg { background: #B22222; }
floralwhitebg { background: #FFFAF0; }
forestgreenbg { background: #228B22; }
fuchsiabg { background: #FF00FF; }
gainsborobg { background: #DCDCDC; }
ghostwhitebg { background: #F8F8FF; }
goldbg { background: #FFD700; }
goldenrodbg { background: #DAA520; }
graybg { background: #808080; }
greybg { background: #808080; }
greenbg { background: #008000; }
greenyellowbg { background: #ADFF2F; }
honeydewbg { background: #F0FFF0; }
hotpinkbg { background: #FF69B4; }
indianredbg { background: #CD5C5C; }
indigobg { background: #4B0082; }
ivorybg { background: #FFFFF0; }
khakibg { background: #F0E68C; }
lavenderbg { background: #E6E6FA; }
lavenderblushbg { background: #FFF0F5; }
lawngreenbg { background: #7CFC00; }
lemonchiffonbg { background: #FFFACD; }
lightbluebg { background: #ADD8E6; }
lightcoralbg { background: #F08080; }
lightcyanbg { background: #E0FFFF; }
lightgoldenrodyellowbg { background: #FAFAD2; }
lightgraybg { background: #D3D3D3; }
lightgreybg { background: #D3D3D3; }
lightgreenbg { background: #90EE90; }
lightpinkbg { background: #FFB6C1; }
lightsalmonbg { background: #FFA07A; }
lightseagreenbg { background: #20B2AA; }
lightskybluebg { background: #87CEFA; }
lightslategraybg { background: #778899; }
lightslategreybg { background: #778899; }
lightsteelbluebg { background: #B0C4DE; }
lightyellowbg { background: #FFFFE0; }
limebg { background: #00FF00; }
limegreenbg { background: #32CD32; }
linenbg { background: #FAF0E6; }
magentabg { background: #FF00FF; }
maroonbg { background: #800000; }
mediumaquamarinebg { background: #66CDAA; }
mediumbluebg { background: #0000CD; }
mediumorchidbg { background: #BA55D3; }
mediumpurplebg { background: #9370DB; }
mediumseagreenbg { background: #3CB371; }
mediumslatebluebg { background: #7B68EE; }
mediumspringgreenbg { background: #00FA9A; }
mediumturquoisebg { background: #48D1CC; }
mediumvioletredbg { background: #C71585; }
midnightbluebg { background: #191970; }
mintcreambg { background: #F5FFFA; }
mistyrosebg { background: #FFE4E1; }
moccasinbg { background: #FFE4B5; }
navajowhitebg { background: #FFDEAD; }
navybg { background: #000080; }
oldlacebg { background: #FDF5E6; }
olivebg { background: #808000; }
olivedrabbg { background: #6B8E23; }
orangebg { background: #FFA500; }
orangeredbg { background: #FF4500; }
orchidbg { background: #DA70D6; }
palegoldenrodbg { background: #EEE8AA; }
palegreenbg { background: #98FB98; }
paleturquoisebg { background: #AFEEEE; }
palevioletredbg { background: #DB7093; }
papayawhipbg { background: #FFEFD5; }
peachpuffbg { background: #FFDAB9; }
perubg { background: #CD853F; }
pinkbg { background: #FFC0CB; }
plumbg { background: #DDA0DD; }
powderbluebg { background: #B0E0E6; }
purplebg { background: #800080; }
rebeccapurplebg { background: #663399; }
redbg { background: #FF0000; }
rosybrownbg { background: #BC8F8F; }
royalbluebg { background: #4169E1; }
saddlebrownbg { background: #8B4513; }
salmonbg { background: #FA8072; }
sandybrownbg { background: #F4A460; }
seagreenbg { background: #2E8B57; }
seashellbg { background: #FFF5EE; }
siennabg { background: #A0522D; }
silverbg { background: #C0C0C0; }
skybluebg { background: #87CEEB; }
slatebluebg { background: #6A5ACD; }
slategraybg { background: #708090; }
slategreybg { background: #708090; }
snowbg { background: #FFFAFA; }
springgreenbg { background: #00FF7F; }
steelbluebg { background: #4682B4; }
tanbg { background: #D2B48C; }
tealbg { background: #008080; }
thistlebg { background: #D8BFD8; }
tomatobg { background: #FF6347; }
turquoisebg { background: #40E0D0; }
violetbg { background: #EE82EE; }
wheatbg { background: #F5DEB3; }
whitebg { background: #FFFFFF; }
whitesmokebg { background: #F5F5F5; }
yellowbg { background: #FFFF00; }
yellowgreenbg { background: #9ACD32; }
11

l’idée c’est d’utiliser le type couleur et donc de laisser les utilisateurs choisir eux même.
impossible de définir tous les codes couleur en classes CSS

12

Avec les 140 couleurs nommées ça laisse une bonne palette de choix…

Mais si vous tenez à une approche à base de champ de type couleur alors vous devez le faire en Javascript client (en récupérant la valeur de votre champ et en faisant un .css("background", val) sur les éléments que vous voulez colorer. L’avantage de le faire comme ça c’est que ça peut être dynamique (via un hook change sur votre champ couleur)

13

Ca m’a tout l’air d’être un besoin de type contrainte “Front”.

On pourrait imaginer ajouter des types d’impact d’attribut de type color, style… mais il y a tellement de cas que c’est impossible de tous les implémenter.

Mais de façon plus générique, l’expression d’impact étant évaluée côté front, on peut utiliser un impact existant pour lui faire faire des choses en plus via une fonction javascript auto-appelante).

Imaginons qu’on fasse un impact “Copie” sur le champ Couleur.

(function() {
     var c = $('input[name="myColorField"]').val();
     if (c) $('input[name="myLabelField"]').css("background", c);
     return true;
})()

Si cela fonctionne, il faudra ajouter un impact de type “Other” au moteur qui ne fait qu’évaluer l’expression javascript pour le traitement spécifique.

14

Oui contraintes front ou hooks front JavaScript les deux approches sont similaires.

Par contre l’approche à base de getStyle serveur est capable de styler un champ y compris en liste, en contrainte/hook front ça va être un peu plus complexe notamment en liste en lecture seule.

Peut être faudrait il autoriser une syntaxe CSS “inliné” dans le getStyle (si CSS alors on applique la valeur à la balise style de l’element, sinon on applique la valeur à la balise class comme toujours)… à voir