SCADA Report with Selectable Column
SCADA Report is good to have selectable column if you have long list of parameter logging, and when you want to do side by side comparison, or narrow down to small group of data for analysis. You can do this for your operator by adding a dropdown list of checkboxes and a standard script snippet. To illustrate the steps, we use snapshot report in the demo as the example for this guide.
Demo showing columns for Part B, D and E only.
Step 1: Add checkboxes
It’s a lot tidy to add checkboxes into a dropdown list. So the dropdown is attached to the existing report title called Production Log.
<div class="container">
<div class="dropdown">
<button class="btn dropdown-toggle" type="button" data-toggle="dropdown">Production Log
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><label><input type="checkbox" class="part-a" /> AAA</label></li>
<li><label><input type="checkbox" class="part-b" /> BBB</label></li>
<li><label><input type="checkbox" class="part-c" /> CCC</label></li>
<li><label><input type="checkbox" class="part-d" /> DDD</label></li>
</ul>
</div>
</div>
Step 2: Associate checkbox with the report column
Associating the checkboxes with the relevant columns is easy, all you need to do is to add the exact same class name into the <th> element like the checkbox in the menu item.
<tr>
<td>Description</td>
<th class="part-a" >Part A</th>
<th class="part-b" >Part B</th>
<th class="part-c" >Part C</th>
<th class="part-d" >Part D</th>
</tr>
Step 3: Copy and Paste Code Snippet
Last step is simple because no modification needed, just paste the code at the end of your HTML report file.
<script>
$(function () {
var $chk = $(".dropdown input:checkbox");
$chk.prop('checked', 1);
$chk.click(function () {
$("table").find('tr :nth-child('+($($("table th").filter("."+$(this).attr("class"))).index()+1)+')').toggle();
});
});
</script>
3 easy steps are really all you need to make your Ecava IGX report to have selectable data column. However, be informed that this method is only suitable for fixed row report just like snapshot report that have a constant layout. You may also use this in statement report when opening archieved report from the database.
Viewing dynamic runtime report will witness the truncated layout. Although harmless but not graceful. If you need to have selectable column for real-time report that is still growing, you will need next IGX internal system enhancement. Drop a line to support and we will notify you when it’s released later. Also feel free to write to us if you have any feedback or need something else.
