Jump to content
  • 0

Conditional Formatting


Joemac
 Share

Question

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?

Link to comment
Share on other sites

13 answers to this question

Recommended Posts

  • 0
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>

image.png.8b23d486cc0df8030aa0741513bc9e8f.pngimage.png.464b3ef4e4dae4b656c75e05cef2bab0.png

 

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

 

Link to comment
Share on other sites

  • 0
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).

Link to comment
Share on other sites

  • 0

@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>

Link to comment
Share on other sites

  • 0

@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>
 

Link to comment
Share on other sites

  • 0
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

Link to comment
Share on other sites

  • 0
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

Link to comment
Share on other sites

  • 0
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 

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...