Jump to content

Conditional Display On Results Page


Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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.

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
Reply to this topic...

×   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...