This website uses cookies. By clicking OK, you consent to the use of cookies. Click Here to learn more about how we use cookies.
OK
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
Create Post
sachsj
Level 12
‎07-30-2014 11:12 AM

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

Reply
1 Solution
sachsj
Level 12
In response to sachsj
‎07-31-2014 10:07 AM

Jump to 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

Reply
6 Replies
sachsj
Level 12
‎07-30-2014 11:57 AM

Jump to solution

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
Reply
sachsj
Level 12
In response to sachsj
‎07-31-2014 07:50 AM

Jump to solution

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
Reply
sachsj
Level 12
In response to sachsj
‎07-31-2014 09:48 AM

Jump to solution

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
Reply
sachsj
Level 12
In response to sachsj
‎07-31-2014 10:07 AM

Jump to 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

Reply
sachsj
Level 12
In response to sachsj
‎07-31-2014 01:24 PM

Jump to solution

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
Reply
sachsj
Level 12
In response to sachsj
‎08-08-2014 01:01 PM

Jump to solution

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.

Reply

SolarWinds solutions are rooted in our deep connection to our user base in the THWACK® online community. More than 150,000 members are here to solve problems, share technology and best practices, and directly contribute to our product development process.

SolarWinds Customer Success Center Certification SolarWinds Lab
About THWACK Blogs Federal & Government Edit Settings Free Tools & Trials
Legal Documents Terms of Use Privacy California Privacy Rights Security Information
© 2021 SolarWinds Worldwide, LLC. All Rights Reserved.