10.3.2. Link to Datasource

Once a table is created, engineer needs to associate a dynamic field with the desired tag. To associate a data field with a tag for growing table row entry, add in syntax as its attribute like this: data-igrx="{attr:'log',tag:'tagname'}". Below is the sample after adding in the tag links.

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>IntegraXor Report</title>
        <link rel="stylesheet"
            type="text/css" href="system/styles/igrX.css" />
    </head>
    <body>
        <div id="idButtons" class="paragraph"></div>
        <h1>High Plant Production Report</h1>

        <table width="60%">
            <tr>
                <th>Item</th><th>Description</th><th>Quantity</th>
            </tr>
            <tr>
                <td>1</td>
                <td>Part A</td>
                <td data-igrx="{attr:'get',tag:'part_a'}">0.00</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Part B</td>
                <td data-igrx="{attr:'get',tag:'part_b'}">0.00</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Part C</td>
                <td data-igrx="{attr:'get',tag:'part_c'}">0.00</td>
            </tr>
            <tr>
                <td>4</td>
                <td>Part D</td>
                <td data-igrx="{attr:'get',tag:'part_d'}">0.00</td>
            </tr>
        </table>
        <h1>Production Log</h1>
        <table width="60%">
            <tr>
                <th width="28%">Description</th>
                <th width="18%">Density</th>
                <th width="18%">Pressure</th>
                <th width="18%">Level</th>
                <th width="18%">Weight</th>
            </tr>
            <tr>
                <td>Time/Unit</td>
                <td>(kg/m3)</td>
                <td>(bar g)</td>
                <td>(m)</td>
                <td>(kg)</td>
            </tr>
            <tr>
                <td 
                        data-igrx="{attr:'log',tag:'app.currentTime'}"
                     ></td>
                <td 
                        data-igrx="{attr:'log',tag:'part_a'}"
                     >0.00</td>
                <td 
                        data-igrx="{attr:'log',tag:'part_b'}"
                     >0.00</td>
                <td 
                        data-igrx="{attr:'log',tag:'part_c'}"
                     >0.00</td>
                <td 
                        data-igrx="{attr:'log',tag:'part_d'}"
                     >0.00</td>
            </tr>
            <tr>
                <td>Summary</td>
                <td>Avg</td>
                <td>Max</td>
                <td>Min</td>
                <td>Sum</td>
            </tr>
            <tr>
                <td></td>
                <td>0.00</td>
                <td>0.00</td>
                <td>0.00</td>
                <td>0.00</td>
            </tr>
        </table>

    <script type="text/javascript" src="./system/scripts/igrX.js"></script>
    <script type="text/javascript">
        var rpt = igrx.report();
    </script>
    </body>
</html>
            

It's common to have another additional summary at the last row of statement report. And the built-in calculations that available for use are like average (avg), maximum (max), minimum (min) & summation (sum). Set the attribute (attr) to the desired calculation syntax in the bracket above. Below is the sample after adding in the additional summary row that configured with summary syntax.

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>IntegraXor Report</title>
        <link rel="stylesheet" type="text/css"
                href="system/styles/igrX.css" />
    </head>
    <body>
        <div id="idButtons" class="paragraph"></div>
        <h1>High Plant Production Report</h1>

        <table width="60%">
            <tr>
                <th>Item</th><th>Description</th><th>Quantity</th>
            </tr>
            <tr>
                <td>1</td>
                <td>Part A</td>
                <td data-igrx="{attr:'get',tag:'part_a'}">0.00</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Part B</td>
                <td data-igrx="{attr:'get',tag:'part_b'}">0.00</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Part C</td>
                <td data-igrx="{attr:'get',tag:'part_c'}">0.00</td>
            </tr>
            <tr>
                <td>4</td>
                <td>Part D</td>
                <td data-igrx="{attr:'get',tag:'part_d'}">0.00</td>
            </tr>
        </table>
        <h1>Production Log</h1>
        <table width="60%">
            <tr>
                <th width="28%">Description</th>
                <th width="18%">Density</th>
                <th width="18%">Pressure</th>
                <th width="18%">Level</th>
                <th width="18%">Weight</th>
            </tr>
            <tr>
                <td>Time/Unit</td>
                <td>(kg/m3)</td>
                <td>(bar g)</td>
                <td>(m)</td>
                <td>(kg)</td>
            </tr>
            <tr>
                <td data-igrx="{attr:'log',tag:'app.currentTime'}"></td>
                <td data-igrx="{attr:'log',tag:'part_a'}">0.00</td>
                <td data-igrx="{attr:'log',tag:'part_b'}">0.00</td>
                <td data-igrx="{attr:'log',tag:'part_c'}">0.00</td>
                <td data-igrx="{attr:'log',tag:'part_d'}">0.00</td>
            </tr>
            <tr>
                <td>Summary</td>
                <td>Avg</td>
                <td>Max</td>
                <td>Min</td>
                <td>Sum</td>
            </tr>
            <tr>
                <td></td>
                <td 
                     data-igrx="{attr:'avg',tag:'part_a'}"
                  >0.00</td>
                <td 
                     data-igrx="{attr:'max',tag:'part_b'}"
                  >0.00</td>
                <td 
                     data-igrx="{attr:'min',tag:'part_c'}"
                  >0.00</td>
                <td 
                     data-igrx="{attr:'sum',tag:'part_d'}"
                  >0.00</td>
            </tr>
        </table>

    <script type="text/javascript" src="./system/scripts/igrX.js"></script>
    <script type="text/javascript">
        var rpt = igrx.report();
    </script>
    </body>
</html>