[ANSWER] Changer couleur bouton/texte en fonction de la valeur d'une variable

Q&A
1

Bonjour à tous,

Je voudrais changer la couleur d’un bouton et la couleur du libellé d’un champ texte en fonction d’une variable.

Par exemple avoir un champ texte en vert quand la variable “état” == “valide” et l’avoir en rouge si “état” == “refusé”.

C’est possible avec la version Teamwork? Comment?

Cordialement,
Sylvain

2

Silvain has an answer…

Silvain a une réponse …

3

Bonjour.

Est ce que le champ texte et le bouton sont dans le même formulaire ?
Si oui, je pense que tu aura besoin d’utiliser du javascript.

Par contre si la valeur du champ “état” est déjà connue avant la génération du formulaire, ça doit être facile de modifier la couleur du bouton en allant dans les Option du bouton. (En ajoutant un HTML attributes)

EDIT :
Je viens de tester le 2eme cas, ça fonctionne très facilement.
J’ai crée 2 boutons. Dans le premier, j’ai mis la condition “Inster widget if” à “état” == “valide” et pour le 2eme j’ai mis “état” == “refusé”.
Dans le champs “HTML attributes”, j’ai mis style=“background: #FF0000” et pour le 2eme style=“background: #00FF00”

4

Désolé, je ne parle pas français …

From what I understand (my reading) you want to have a set of variables on the form that show red for invalid i.e. they are not filled in, but when complete they show green?

First thing is that this is what form field validation is for, however it doesn’t show up until after you click the submit field (if I remember right).

I think you want the change to happen when the user fills in the form, possibly with some validation as well. This is not possible without some JavaScript as follows:

First make your form and give the datafields a STYLE colour RED, and make your button disabled (in button options)

On the form add a HTMLWidget at the bottom of the form (very important because the rest of the form has to load first).

In the widget add something like the following code as CONSTANT (NOTE this is psuedo code, you will have to write it all yourself :slight_smile: )

var varBackgroundClRGB = "rgb(254, 48, 0)"; // This is RED you MUST specify the green RGB version, be careful of spaces, they must be there

// add event listener for field change
document.getElementById(“myfield1”).addEventListener(“change”, validateThisField1(this));
document.getElementById(“myfield2”).addEventListener(“change”, validateThisField2(this));

function validateThisField1(this){
if(this.innerHTML != “”){ // add your validation tests, this just verifies the field is not null
document.getElementById(elID).style.backgroundColor = varBackgroundClRGB;
}
checkIfAllFieldsValid(); //after each field check if all fields complete and reset the button.
}

function validateThisField2(this){
if(this.innerHTML != “”){ // add your validation tests, this just verifies the field is not null
document.getElementById(elID).style.backgroundColor = varBackgroundClRGB;
}
checkIfAllFieldsValid(); //after each field check if all fields complete and reset the button.
}

function checkIfAllFieldsValid(){
//pseudo code
var allFields = true;
for (each field){
//test if green if not set allFields = false
if (field.style.backgroundColor != varBackgroundClRGB){
allFields = false;
}
}
if(allFields == true){
//set button color
document.getElementById(BUTTONID).style.backgroundColor != varBackgroundClRGB;
//set the button to be enabled
document.getElementById(“myBtn”).disabled = false;
}

 Remember this is not real code, you need to complete it, however it will point you in the correct direction for what I think you want to do, Cordialement. Seán
5

Merci à vous cela marche parfaitement en passant juste par le HTML (petit script groovy pour tester les valeurs possible).

Bonne journée,
Sylvain