cancel
Showing results for 
Search instead for 
Did you mean: 
Create Post
Level 12

Custom Properties with custom HTML resource

Jump to solution

Just like many others, I found myself wanting to have my custom properties in a specific order instead of alphabetically.

I created a custom resource under Node Details with the following :

for the sake of this discussion I have removed most of cells because the code is 4 pages long.

<table border="1" style="width:600px">

<tr>

<tr style="background-color: #E3DEDE;">

  <td>Address:</td>

  <td>${Address}</td>

  </tr>

<tr>

  <td>City:</td>

  <td>${City}</td>

  </tr>

<tr>

<tr style="background-color: #E3DEDE;">

  <td>State:</td>

  <td>${State}</td>

  </tr>

<tr>

  <td>ZipCode:</td>

  <td>${ZipCode}</td>

  </tr>

<tr>

<tr style="background-color: #E3DEDE;">

  <td>TelephoneNumber:</td>

  <td>${TelephoneNumber}</td>

  </tr>

<tr>

<tr style="background-color: #E3DEDE;">

  <td>Website:</td>

  <td>${Website}</td>

  </tr>

</table>

pic1.png

My Question:

Is there a way to hide the cells if they are not populated using style display?

Update:  Is there a way to remove the entire row if cell on right is empty....?

Thanks

1 Solution

Boom baby!~   that's how it's done.   The jquery will remove the entire row if a cell under the Information column is empty.   You can use the entire code below.  Just change the text between <td> </td> to match your custom properties.

one custom property example:

<tr>

  <td>City:</td>

  <td>${City}</td>

  </tr>

----------------------------------------------

<html>

<head>

<script type="text/javascript">

$(document).ready(function() {

$("tr").filter(function(){return $("td:last",this).is(":empty");}).hide();

});

</script>

 

<table border="4" style="width:650px">

<th style="text-align:center" bgcolor="756767"><font color="FFFFFF">Custom Property</th>

<th style="text-align:center" bgcolor="756767"><font color="FFFFFF">Information</th>

<tr>

<tr style="background-color: #E3DEDE;">

  <td>Address:</td>

  <td>${Address}</td>

  </tr>

<tr>

  <td>City:</td>

  <td>${City}</td>

  </tr>

<tr>

<tr style="background-color: #E3DEDE;">

  <td>State:</td>

  <td>${State}</td>

  </tr>

<tr>

  <td>ZipCode:</td>

  <td>${ZipCode}</td>

  </tr>

<tr>

<tr style="background-color: #E3DEDE;">

  <td>TelephoneNumber:</td>

  <td>${TelephoneNumber}</td>

  </tr>

<tr>

  <td>FacilityNumber:</td>

  <td>${FacilityNumber}</td>

  </tr>

<tr>

<tr style="background-color: #E3DEDE;">

  <td>FacilityContact:</td>

  <td>${FacilityContact}</td>

  </tr>

<tr>

  <td>Short_Name:</td>

  <td>${Short_Name}</td>

  </tr>

<tr>

<tr style="background-color: #E3DEDE;">

  <td>Failover_IP_Range:</td>

  <td>${Failover_IP_Range}</td>

  </tr>

<tr>

  <td>Failover_Subnet:</td>

  <td>${Failover_Subnet}</td>

  </tr>

<tr>

<tr style="background-color: #E3DEDE;">

  <td>Failover_IP:</td>

  <td>${Failover_IP}</td>

  </tr>

<tr>

  <td>Failover_Mask:</td>

  <td>${Failover_Mask}</td>

  </tr>

<tr>

<tr style="background-color: #E3DEDE;">

  <td>Failover_Gateway:</td>

  <td>${Failover_Gateway}</td>

  </tr>

<tr>

  <td>Failover_Account_ID:</td>

  <td>${Failover_Account_ID}</td>

  </tr>

<tr>

<tr style="background-color: #E3DEDE;">

  <td>Failover_Provider:</td>

  <td>${Failover_Provider}</td>

  </tr>

<tr>

  <td>Failover_Provider_Telephone:</td>

  <td>${Failover_Provider_Telephone}</td>

  </tr>

<tr>

<tr style="background-color: #E3DEDE;">

  <td>WAN_Subnet:</td>

  <td>${WAN_Subnet}</td>

  </tr>

<tr>

  <td>WAN_IP:</td>

  <td>${WAN_IP}</td>

  </tr>

<tr>

<tr style="background-color: #E3DEDE;">

  <td>WAN_Mask:</td>

  <td>${WAN_Mask}</td>

  </tr>

<tr>

  <td>WAN_Neighbor_IP:</td>

  <td>${WAN_Neighbor_IP}</td>

  </tr>

<tr>

<tr style="background-color: #E3DEDE;">

  <td>WAN_Circuit_ID_1:</td>

  <td>${WAN_Circuit_ID_1}</td>

  </tr>

<tr>

  <td>WAN_Circuit_ID_2</td>

  <td>${WAN_Circuit_ID_2}</td>

  </tr>

<tr>

<tr style="background-color: #E3DEDE;">

  <td>WAN_Circuit_ID_3:</td>

  <td>${WAN_Circuit_ID_3}</td>

  </tr>

<tr>

  <td>WAN_Type:</td>

  <td>${WAN_Type}</td>

  </tr>

<tr>

<tr style="background-color: #E3DEDE;">

  <td>WAN_Speed:</td>

  <td>${WAN_Speed}</td>

  </tr>

<tr>

  <td>WAN_Account_ID:</td>

  <td>${WAN_Account_ID}</td>

  </tr>

<tr>

<tr style="background-color: #E3DEDE;">

  <td>WAN_Provider:</td>

  <td>${WAN_Provider}</td>

  </tr>

<tr>

  <td>WAN_Provider_Telephone:</td>

  <td> ${WAN_Provider_Telephone}</td>

  </tr>

<tr>

<tr style="background-color: #E3DEDE;">

  <td>Pic1:</td>

  <td>${Pic1}</td>

  </tr>

<tr>

  <td>Pic2:</td>

  <td>${Pic2}</td>

  </tr>

<tr>

<tr style="background-color: #E3DEDE;">

  <td>Pic3:</td>

  <td>${Pic3}</td>

  </tr>

<tr>

  <td>Pic4:</td>

  <td>${Pic4}</td>

  </tr>

<tr>

<tr style="background-color: #E3DEDE;">

  <td>Website:</td>

  <td>${Website}</td>

  </tr>

</table>

</head>

View solution in original post

6 Replies
Level 12

OK.  I thought I had it figured out but this is not the solution I need......

<table border="2" style="empty-cells:hide;  style="width:600px">

I could use it, but then only the rows that do not have any information will show.   The problem is that only the right side will disappear... LOL


DOH!



wow.png


Thank you!  I will be here all week......

0 Kudos

I added headers to the table.  If I can figure out how to remove the entire row if a cell on the right is empty, then I will probably need to somehow reference the Information header.

<table border="4" style="width:650px">

<th style="text-align:center" bgcolor="756767"><font color="FFFFFF">Custom Property</th>

<th style="text-align:center" bgcolor="756767"><font color="FFFFFF">Information</th>

<tr>

<tr style="background-color: #E3DEDE;">

<td>Address:</td>

<td>${Address}</td>

  </tr>

<tr>

<td>City:</td>

<td>${City}</td>

  </tr>

<tr>

<tr style="background-color: #E3DEDE;">

<td>State:</td>

<td>${State}</td>

  </tr>

<tr>

<td>ZipCode:</td>

<td>${ZipCode}</td>

  </tr>

<tr>

<tr style="background-color: #E3DEDE;">

<td>TelephoneNumber:</td>

<td>${TelephoneNumber}</td>

  </tr>

<tr>

<tr style="background-color: #E3DEDE;">

<td>Website:</td>

<td>${Website}</td>

  </tr>

</table>

pic1.png

0 Kudos

Using jsfiddle.net I was able to get this to work:

$("tr").filter(function(){return $("td:last",this).is(":empty");}).hide();


Now I just need to figure out how to use it under the html resource

0 Kudos

Boom baby!~   that's how it's done.   The jquery will remove the entire row if a cell under the Information column is empty.   You can use the entire code below.  Just change the text between <td> </td> to match your custom properties.

one custom property example:

<tr>

  <td>City:</td>

  <td>${City}</td>

  </tr>

----------------------------------------------

<html>

<head>

<script type="text/javascript">

$(document).ready(function() {

$("tr").filter(function(){return $("td:last",this).is(":empty");}).hide();

});

</script>

 

<table border="4" style="width:650px">

<th style="text-align:center" bgcolor="756767"><font color="FFFFFF">Custom Property</th>

<th style="text-align:center" bgcolor="756767"><font color="FFFFFF">Information</th>

<tr>

<tr style="background-color: #E3DEDE;">

  <td>Address:</td>

  <td>${Address}</td>

  </tr>

<tr>

  <td>City:</td>

  <td>${City}</td>

  </tr>

<tr>

<tr style="background-color: #E3DEDE;">

  <td>State:</td>

  <td>${State}</td>

  </tr>

<tr>

  <td>ZipCode:</td>

  <td>${ZipCode}</td>

  </tr>

<tr>

<tr style="background-color: #E3DEDE;">

  <td>TelephoneNumber:</td>

  <td>${TelephoneNumber}</td>

  </tr>

<tr>

  <td>FacilityNumber:</td>

  <td>${FacilityNumber}</td>

  </tr>

<tr>

<tr style="background-color: #E3DEDE;">

  <td>FacilityContact:</td>

  <td>${FacilityContact}</td>

  </tr>

<tr>

  <td>Short_Name:</td>

  <td>${Short_Name}</td>

  </tr>

<tr>

<tr style="background-color: #E3DEDE;">

  <td>Failover_IP_Range:</td>

  <td>${Failover_IP_Range}</td>

  </tr>

<tr>

  <td>Failover_Subnet:</td>

  <td>${Failover_Subnet}</td>

  </tr>

<tr>

<tr style="background-color: #E3DEDE;">

  <td>Failover_IP:</td>

  <td>${Failover_IP}</td>

  </tr>

<tr>

  <td>Failover_Mask:</td>

  <td>${Failover_Mask}</td>

  </tr>

<tr>

<tr style="background-color: #E3DEDE;">

  <td>Failover_Gateway:</td>

  <td>${Failover_Gateway}</td>

  </tr>

<tr>

  <td>Failover_Account_ID:</td>

  <td>${Failover_Account_ID}</td>

  </tr>

<tr>

<tr style="background-color: #E3DEDE;">

  <td>Failover_Provider:</td>

  <td>${Failover_Provider}</td>

  </tr>

<tr>

  <td>Failover_Provider_Telephone:</td>

  <td>${Failover_Provider_Telephone}</td>

  </tr>

<tr>

<tr style="background-color: #E3DEDE;">

  <td>WAN_Subnet:</td>

  <td>${WAN_Subnet}</td>

  </tr>

<tr>

  <td>WAN_IP:</td>

  <td>${WAN_IP}</td>

  </tr>

<tr>

<tr style="background-color: #E3DEDE;">

  <td>WAN_Mask:</td>

  <td>${WAN_Mask}</td>

  </tr>

<tr>

  <td>WAN_Neighbor_IP:</td>

  <td>${WAN_Neighbor_IP}</td>

  </tr>

<tr>

<tr style="background-color: #E3DEDE;">

  <td>WAN_Circuit_ID_1:</td>

  <td>${WAN_Circuit_ID_1}</td>

  </tr>

<tr>

  <td>WAN_Circuit_ID_2</td>

  <td>${WAN_Circuit_ID_2}</td>

  </tr>

<tr>

<tr style="background-color: #E3DEDE;">

  <td>WAN_Circuit_ID_3:</td>

  <td>${WAN_Circuit_ID_3}</td>

  </tr>

<tr>

  <td>WAN_Type:</td>

  <td>${WAN_Type}</td>

  </tr>

<tr>

<tr style="background-color: #E3DEDE;">

  <td>WAN_Speed:</td>

  <td>${WAN_Speed}</td>

  </tr>

<tr>

  <td>WAN_Account_ID:</td>

  <td>${WAN_Account_ID}</td>

  </tr>

<tr>

<tr style="background-color: #E3DEDE;">

  <td>WAN_Provider:</td>

  <td>${WAN_Provider}</td>

  </tr>

<tr>

  <td>WAN_Provider_Telephone:</td>

  <td> ${WAN_Provider_Telephone}</td>

  </tr>

<tr>

<tr style="background-color: #E3DEDE;">

  <td>Pic1:</td>

  <td>${Pic1}</td>

  </tr>

<tr>

  <td>Pic2:</td>

  <td>${Pic2}</td>

  </tr>

<tr>

<tr style="background-color: #E3DEDE;">

  <td>Pic3:</td>

  <td>${Pic3}</td>

  </tr>

<tr>

  <td>Pic4:</td>

  <td>${Pic4}</td>

  </tr>

<tr>

<tr style="background-color: #E3DEDE;">

  <td>Website:</td>

  <td>${Website}</td>

  </tr>

</table>

</head>

View solution in original post

The only issue I've seen so far is that the Nodes Detail page for ICMP only nodes is blank.   when I remove the following it works. 

<script type="text/javascript">

$(document).ready(function() {

$("tr").filter(function(){return $("td:last",this).is(":empty");}).hide();

});

</script>

Not sure why though?

0 Kudos

I am just now able to look at this again.

It's corrected now.  I had to remove the following from the top of the custom html resource.

<html>

<head>

Now the Custom Properties are working for all nodes as expected.   Now the entire row is removed if there is no text in the Information column.