Conditional Formatting

[Joemac]

I've mostly worked in Microsoft Accces where I'd use conditional formatting on fields to change the color of the text in a field if it equaled a certain value.  I have found a way to do this in Caspio with check boxes but not with regular fields.  So for example if a field = Proof Approved I'd like it to be in red, if anything else have it black.  Any suggestions?

[TellMeWhy]

35 minutes ago, Joemac said:

I've mostly worked in Microsoft Accces where I'd use conditional formatting on fields to change the color of the text in a field if it equaled a certain value.  I have found a way to do this in Caspio with check boxes but not with regular fields.  So for example if a field = Proof Approved I'd like it to be in red, if anything else have it black.  Any suggestions?

Since Caspio uses Web, it needs JavaScript to change contents dynamically.

For example, I have a field in Submission Form named Title

<script>

document.addEventListener("input", function colors(){

var field = document.getElementById("InsertRecordTitle").value;


if (field == "test"){

document.getElementById("InsertRecordTitle").style.color = "red";

}

if (field == "testss"){

document.getElementById("InsertRecordTitle").style.color = "green";

}

});

</script>

 

Here's a quick reference for how to reference caspio fields

 

[Joemac]

@TellMeWhy - Cool thanks!  So if I wanted to recreate this in my Caspio I would copy and paste this into the header of that datapage right?  Also I just change the InsertRecordTitle to my actual field name right?  Anything else I need to change on my end (aside from the colors).

[TellMeWhy]

26 minutes ago, Joemac said:

@TellMeWhy - Cool thanks!  So if I wanted to recreate this in my Caspio I would copy and paste this into the header of that datapage right?  Also I just change the InsertRecordTitle to my actual field name right?  Anything else I need to change on my end (aside from the colors).

Nothing else. Better put it in the footer, though, as that's more recommended when using scripts (so, it's the last one loaded when a page loads).

[Joemac]

@TellMeWhy - thanks for your help again

[Joemac]

@TellMeWhy  I tried and couldn't get it to work.  Here is exactly what I wrote.  Any help? 

<script>

document.addEventListener("input", function colors(){

var field = document.getElementById("design_status").value;

if (field == "Proof Approved"){

document.getElementById("design_status").style.color = "red";

}

if (field == "Out on Proof"){

document.getElementById("design_status").style.color = "green";

}

});

</script>

[Joemac]

design_status is the field name

Out on Proof and Proof Approved are values that could be entered into that field. 

[TellMeWhy]

1 minute ago, Joemac said:

design_status is the field name

Out on Proof and Proof Approved are values that could be entered into that field. 

you're missing the InsertRecord Part as stated in this post 

InsertRecordFIELDNAME

[Joemac]

@TellMeWhy - sorry I have almost zero understanding of JS.  Here is what I updated it too and it still doesn't work.

 

<script>
document.addEventListener("input", function colors(){
var field = document.getElementById("InsertRecorddesign_status").value;

if (field == "Proof Approved"){
document.getElementById("InsertRecorddesign_status").style.color = "red";
}
if (field == "Need to Proof"){
document.getElementById("InsertRecorddesign_status").style.color = "green";
}
});
</script>
 

[TellMeWhy]

3 minutes ago, Joemac said:

@TellMeWhy - sorry I have almost zero understanding of JS.  Here is what I updated it too and it still doesn't work.

 

<script>
document.addEventListener("input", function colors(){
var field = document.getElementById("InsertRecorddesign_status").value;

if (field == "Proof Approved"){
document.getElementById("InsertRecorddesign_status").style.color = "red";
}
if (field == "Need to Proof"){
document.getElementById("InsertRecorddesign_status").style.color = "green";
}
});
</script>
 

What field is this? Is this a Text Field Form Element? Also, are you using Submission Form? Seems to be correct now, but there can be specific configurations depending on the setup

[Joemac]

@TellMeWhy - I'm doing a single record update form.  The field called design_status is a drop down field on the datapage.  Maybe thats the issue?

[TellMeWhy]

21 hours ago, Joemac said:

@TellMeWhy - I'm doing a single record update form.  The field called design_status is a drop down field on the datapage.  Maybe thats the issue?

I see, again, I recommend reading through the post I've provided first, it should be detailed there. Single Record Update Form used EDITRECORDFIELDNAME instead of INSERTRECORDNAME.

Since this is a dropdown, we have to use combination of CSS and JavaScript

For the Header: You want to set the options that are NOT selected to your desired default color:

<style>
#EditRecordFIELDNAME >option:not(:checked){
  color:black;
}


</style>

For the Footer:

<script>



document.getElementById("EditRecordFIELDNAME").addEventListener("input", function colors(){

var field = document.getElementById("EditRecordFIELDNAME");


if (field.value == "Test"){

field.style.color = "red";

}

else if (field.value == "Test1"){

field.style.color = "green";

}

else{
field.style.color = "black";
}


});

</script>

 

I've tweaked this a little bit, first line just checks the SPECIFIC Field you're inputting into.

2nd line gets the FIELD you want to check (your dropdown) and places it into the variable 'field'

field.value gets the value of the said element.

field.style.color changes the text color.

Just change the FIELDNAME to your exact field name, the same in the Header

[Joemac]

@TellMeWhy - not sure if this is allowed to ask in here but can I hire you to help with this type of stuff and also create some automated emails through Caspio?

[TellMeWhy]

1 hour ago, Joemac said:

@TellMeWhy - not sure if this is allowed to ask in here but can I hire you to help with this type of stuff and also create some automated emails through Caspio?

As much as I'd like to, I'm currently tied with another for the meantime. I can suggest posting 'Looking For Developer' or a more specific kind of developer, perhaps, they might see your post. You can also check this one