Conditional Display On Results Page

DaleW · November 24, 2019

I'd like to dynamically change the color background of a results page. Caspio provides Javascript to do this, but it operates on a single condition. Here's the code they provide:

<script>
var isi = document.getElementById("visi[@field:UniqueFieldName]");
if('[@Yes/No FieldName]' == 'Yes'){
isi.parentNode.parentNode.style.backgroundColor = '#YesColor';
}
else{
isi.parentNode.parentNode.style.backgroundColor = '#NoColor';
}
</script>

This works great on a single yes/no condition, but I need to have four different colors displayed depending on the condition of a single field:

If fielda=1, display color 1

If fielda=2, display color 2

If fielda=3, display color 3

If field a=4, display color 4.

I love Caspio because as a non-programmer, I can do many, many things. But I don't code and could use some help modifying the java script to produce the outcome I'm seeking. I'd be very grateful if someone could provide assistance. The datapage is a tabular report.

Many thanks.

Dale

geoffdude · November 25, 2019

Take this sample code below and play around with it a bit. - Note the script works based upon a select dropdown .. then targets a DIV by changing it's background color and placing the selected value into the targeted span id. - This may help you alter your code to achieve similar results.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
	

	
<title>Untitled Document</title>
</head>

<body>
	
<select id="fielda">
	<option value="0">Select</option>
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3">three</option>
    <option value="4">four</option>
</select>

<div id="answerBox" style="background:#ccc; width:50%; margin:20px auto; border:1px solid red; padding:5px; color:#000; font-size:14px">Answer = <span id="selectNmbr" style="color:red; font-weight:bold">Selected Option</span>
	</div>	
</body>
	<script>
var select = document.getElementById("fielda");
select.onchange = function(){
    var selectedString = select.options[select.selectedIndex].value;
	
	if (selectedString == "1") {
		document.getElementById("answerBox").style.background = 'pink';
		document.getElementById("selectNmbr").innerHTML = selectedString;
       
} 
 else if (selectedString == "2") {
		document.getElementById("answerBox").style.background = 'lime';
	 document.getElementById("selectNmbr").innerHTML = selectedString;
       
} 
	 else if (selectedString == "3") {
		document.getElementById("answerBox").style.background = 'cyan';
		 document.getElementById("selectNmbr").innerHTML = selectedString;
      
} 
	else if (selectedString == "4") {
		document.getElementById("answerBox").style.background = 'gold';
		document.getElementById("selectNmbr").innerHTML = selectedString;
       
} 
	
 else {
document.getElementById("answerBox").style.background = '#ccc';
document.getElementById("selectNmbr").innerHTML = "Selected Option";
alert("nothing selected");

}
}
	</script>
</html>

Good luck, LMK how it goes.

DaleW · November 25, 2019

Wow! Many thanks. I'm pretty good with Caspio functionality but get a bit lost when code starts getting involved. Please share how to deploy the code? I assume it is deployed in a HTML Block on the results page. Also, the field that determines the color of the row is already in the table by row. There isn't a need to select anything. The background color of the row should be already in the table. Would that change how this is built?

This looks like quite a bit of thinking. I really appreciate the effort and look forward to your guidance.

Thanks.

DaleW · November 25, 2019

Hit send prematurely. Please disregard the sentence "The background color of the row should already be in the table". Doesn't make any sense, does it?

Sorry.

geoffdude · November 25, 2019

Well.. based on the code example you and caspio provided, I'd start from there, like so (again based on a drop down):

<script>
var isi = document.getElementById("visi[@field:UniqueFieldName]");
var select = document.getElementById("fielda");
var selectedString = select.options[select.selectedIndex].value;

if (selectedString == "1") {
isi.parentNode.parentNode.style.backgroundColor = '#firstColor';
} 
else if (selectedString == "2"){
isi.parentNode.parentNode.style.backgroundColor = '#secondColor';
}
else if (selectedString == "3"){
isi.parentNode.parentNode.style.backgroundColor = '#thirdColor';
}
else if (selectedString == "4"){
isi.parentNode.parentNode.style.backgroundColor = '#fourthColor';
}  
else{
isi.parentNode.parentNode.style.backgroundColor = '#defaultColor';
}
</script>

This script should go at the bottom of the page in an HTML block .. and the colors would be hexadecimal like (#0000FF) or just "cyan", "yellow" etc.. but no number sign when using just color names.

geoffdude · November 26, 2019

Or .. given that it's a results page, maybe this is more accurate:

<script>
var isi = document.getElementById("visi[@field:UniqueFieldName]");

if ('[@choiceList FieldName]' == "1") {
isi.parentNode.parentNode.style.backgroundColor = '#firstColor';
} 
else if ('[@choiceList FieldName]' == "2"){
isi.parentNode.parentNode.style.backgroundColor = '#secondColor';
}
else if ('[@choiceList FieldName]' == "3"){
isi.parentNode.parentNode.style.backgroundColor = '#thirdColor';
}
else if ('[@choiceList FieldName]' == "4"){
isi.parentNode.parentNode.style.backgroundColor = '#fourthColor';
}  
else{
isi.parentNode.parentNode.style.backgroundColor = '#defaultColor';
}
</script>

With "choiceList" being the results page targeted field name. Just change it to your unique field name.

Login

Conditional Display On Results Page

Recommended Posts

DaleW

Link to comment

Share on other sites

geoffdude

Link to comment

Share on other sites

DaleW

Link to comment

Share on other sites

DaleW

Link to comment

Share on other sites

geoffdude

Link to comment

Share on other sites

geoffdude

Link to comment

Share on other sites

Join the conversation

Browse