10.2.1. Creating Layout

Below is a sample of standard compliant HTML layout for a production report. Note the highlighted script inclusion is needed to add-in the reporting tool-bar; i.e. GUI.

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>IntegraXor Snapshot 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></td>
            </tr>
            <tr>
                <td>2</td>
                <td>Part B</td>
                <td></td>
            </tr>
            <tr>
                <td>3</td>
                <td>Part C</td>
                <td></td>
            </tr>
            <tr>
                <td>4</td>
                <td>Part D</td>
                <td></td>
            </tr>
        </table>
                        
    <script type="text/javascript" src="./system/scripts/igrX.js"></script>
    <script type="text/javascript">
        var rpt = igrx.report();
    </script>
                     
    </body>
</html>

[Tip] Tip

Engineer who's beginner in HTML editing may prefers visual editing tool like KompoZer.


Output in browser from above listing

The output from the above listing can be seen once the layout is added into the mimic menu.