Announcements
Attention for Customers without Multi-Factor Authentication or Single Sign-On - OTP Verification rolls out April 2025. Read all about it here.

Javascript and setup sheets.

smackayPFSC4
Enthusiast

Javascript and setup sheets.

smackayPFSC4
Enthusiast
Enthusiast

I've got a problem I've been trying to work through concerning setup sheets and javascript.
On the summary page, I'd like to change the foreground, and background color of a table cell based on the contents of the cell. In this case, it's the toolpath description. I want the background red, and the font white. If the description is empty(which isn't really EMPTY in the HTML file, it contains  , but i digress....), I'd like it to be white background with black font. But it seems passing variables from javascript to HTML isn't really all that easy, maybe I am missing something.



Here's a snippit of the code I am using. 

 

<script>
				var MyDescription = "${Description}";
				var MyBGColor = "#ffffff";
				var MyFGColor = "#000000";
				if (MyDescription == "&nbsp;") {
					MyBGColor = "#ffffff";
					MyFGColor = "color:#000000";
				}else {
					MyBGColor = "#fc0303";
					MyFGColor = "color:#ffffff";
				}
			</script>			

			<tr>
				<th colspan="1" rowspan="8">NOTES:</th>
				<td id="TPNotes" style="{$MyFGColor.value}" bgcolor={MyBGColor.value} colspan="5" rowspan="8">{Description}</td>
				
0 Likes
Reply
570 Views
5 Replies
Replies (5)

iamcdn79
Mentor
Mentor

Does this work?

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Setup Sheet</title>
    <style>
        .red-bg { background-color: #fc0303; color: #ffffff; }
        .white-bg { background-color: #ffffff; color: #000000; }
    </style>
</head>
<body>
    <script>
        var MyDescription = "${Description}";
        var MyClass = "white-bg";
        if (MyDescription.trim() !== " ") {
            MyClass = "red-bg";
        }
        document.addEventListener("DOMContentLoaded", function() {
            document.getElementById("TPNotes").className = MyClass;
        });
    </script>

    <table>
        <tr>
            <th colspan="1" rowspan="8">NOTES:</th>
            <td id="TPNotes" colspan="5" rowspan="8">${Description}</td>
        </tr>
    </table>
</body>
</html>

Intel Core i9 13900KF CPU
128 GB Kingston Beast DDR4 SDRAM
PNY RTX A2000 6GB Video Card
WD 1 TB SSD Hard Drive
Windows 11 Pro

0 Likes

smackayPFSC4
Enthusiast
Enthusiast

1st of all, thank you for the help, but unfortunately it just comes up with white background with black text whether the cell contains text or not.

Here's my entire table that I'm wanting to display. Maybe I am doing something else wrong?

  <!-- Toolpath summary table follows. -->
  
	<table>
		<tr>
			<td colspan="8" class="title">Summary sheet ${SU_SheetNo} of ${SU_MaxSheets}</td>
		</tr>
		<tr>
			<th colspan="5">Toolpath / TAP File</th>
			<th>Strategy</th>
			<th colspan="2">Tool</th>
		</tr>
		<summaryrow>
			<tr>
				<td colspan="5" rowspan="2">${stoolpath.NameTag}  ${stoolpath.TapFile}</td>
				<td rowspan="2">${toolpath.Strategy}</td>
				<th rowspan="1">Name</th><td rowspan="1">${stoolpath.NCToolName}</td>
			</tr>
			<tr>
				<th>Holder</th><td>${tool.holder_name}</td>
			</tr>
			<tr>
				<th colspan="1" rowspan="8">NOTES:</th>
				<td id="TPNotes" colspan="5" rowspan="8">${Description}</td>
			</tr>

			
			
			
			<tr>
				<th>Type</th><td>${tool.Type}</td>
			</tr>
			<tr>
				<th>Diameter</th><td>${tool.Diameter}</td>
			</tr>
			<tr>
				<th>Tip radius</th><td>${tool.TipRadius}</td>
			</tr>
			<tr>
				<th>Length</th><td>${tool.Length}</td>
			</tr>
			<tr>
				<th>Overhang</th><td>${Overhang}</td>
			</tr>
			<tr>
				<th>Gage Length</th><td>${tool.gauge_length}</td>
			</tr>
			<tr>
				<th>Number</th><td>${tool.Number}</td>
			</tr>
		</summaryrow>
	</table>

 

0 Likes

icse
Collaborator
Collaborator

cant you just do a script like this?

 

<body>
  <div class="a4page">
  <!-- Toolpath summary table follows. -->
  
	<table>
		<tr>
			<td colspan="8" class="title">Summary sheet ${SU_SheetNo} of ${SU_MaxSheets}</td>
		</tr>
		<tr>
			<th colspan="5">Toolpath / TAP File</th>
			<th>Strategy</th>
			<th colspan="2">Tool</th>
		</tr>
		<summaryrow>
			<tr>
				<td colspan="5" rowspan="2">${stoolpath.NameTag}  ${stoolpath.TapFile}</td>
				<td rowspan="2">${toolpath.Strategy}</td>
				<th rowspan="1">Name</th><td rowspan="1">${stoolpath.NCToolName}</td>
			</tr>
			<tr>
				<th>Holder</th><td>${tool.holder_name}</td>
			</tr>
			<tr>
				<th colspan="1" rowspan="8">NOTES:</th>
				<td id="TPNotes" colspan="5" rowspan="8">${Description}</td>

			</tr>

			
			
			
			<tr>
				<th>Type</th><td>${tool.Type}</td>
			</tr>
			<tr>
				<th>Diameter</th><td>${tool.Diameter}</td>
			</tr>
			<tr>
				<th>Tip radius</th><td>${tool.TipRadius}</td>
			</tr>
			<tr>
				<th>Length</th><td>${tool.Length}</td>
			</tr>
			<tr>
				<th>Overhang</th><td>${Overhang}</td>
			</tr>
			<tr>
				<th>Gage Length</th><td>${tool.gauge_length}</td>
			</tr>
			<tr>
				<th>Number</th><td>${tool.Number}</td>
			</tr>
		</summaryrow>
		
		<script>
			
			var element = document.getElementById("TPNotes");
			
			if (element.innerHTML.trim() === '&nbsp;') {
				element.style.backgroundColor = "Red";
				element.style.color = "black";
			}
		</script>
	</table>
	
  </div>
</body>

 

 

also you could check this, should do the same:

 

if (element.innerText.trim() === String.fromCharCode(160)) {

 

 

do you whant it to look like this?

icse_0-1723156793103.png

 

0 Likes

smackayPFSC4
Enthusiast
Enthusiast

Capture.JPGThank you for the reply. but. unfortunately, your solution will only do the 1st instance if the ${Description} contains text. But, only after I changed the script slightly to this...

 

			var element = document.getElementById("TPNotes");
			
			if (element.innerHTML.trim() === '&nbsp;') {
				element.style.backgroundColor = "White";
				element.style.color = "black";
			}else{
				element.style.backgroundColor = "Red";
				element.style.color = "black";
			
			}

 






0 Likes

SLevra8AUTD
Explorer
Explorer

I am trying to do something similar, except I am just trying to change the color of the font depending on what the output is. I tried this same method and it also only works for the first instance. Just wondering if anyone knew of a method that would work for the whole <summaryrow>?

0 Likes