register log on
Knowledge base

Using columns with custom content layout in Arnica WebReport

KB Artcile # 2642
Like any reporting tool, Arnica WebReport uses default columns placement from left to right using tabular layout. This works well for most data presentation needs, however, with large number of columns or in case of special presentation needs, columns needs to be clustered together using free-form layout. For example, the following report has been produced with conventional tabular layout (the screen shot has been reduced in size to fit this article format):

This report displays columns set as visible at design time:

The objective of this exercise is to optimize report layout by using custom positioning of columns within the row to save horizontal space as well as make certain content (column Notes) invisible by default and display it only when user clicks on Show link.

The target presentation is like this:

Click on Show Notes expands presentation area vertically and reveal notes:

To achieve this presentation report, we need to create custom column (EmployeePresentation) with the data definition type set to "Saved Content". Column EmployeePresentation is then set as visible and all other columns in the report are set as invisible:

As a result, custom column EmployeePresenation becomes the only column within row and spans within the entire width of the row. Column EmployeePresentation is defined with data type "text" to accommodate large presentation content, with data definition type "Column Template", and the field Column Template on the custom column properties page contains HTML which specifies the layout which determines how each individual field is positioned within the cell. 

Each field is included within the HTML as evaluatable expression , for example: <%sourcedata.firstname%>. To trim leading and trailing blanks, Arnica script function alltrim() is used around field reference, or to convert non-character fields to character string function transform() is used. Any other Arnica script function or Arnica WebFramework function can be used within the evaluatable expression  to customize presentation of a particular field. Here is a complete content of the column template:

<div class="aaContainer" style="padding:6px 6px 6px 6px;">
<table class="aaContainerTable">
        <td style="font-weight:bold;width:150px;color:#555555;">Name</td>
        <td style="width:250px;"><%alltrim(sourcedata.firstname)%> <%alltrim(sourcedata.lastname)%></td>
                <td style="font-weight:bold;width:150px;color:#555555;">Address</td>
                <td style="width:200px;"><%alltrim(sourcedata.address)%></td>
        <td style="font-weight:bold;width:150px;color:#555555;">Title</td>
                <td style="font-weight:bold;width:150px;color:#555555;">&nbsp;</td>
                <td><%alltrim(> <%alltrim(nvl(sourcedata.region, ''))%> 
                    <%alltrim(> <%alltrim(sourcedata.postalcode)%></td> <td></td> </tr> <tr> <td style="font-weight:bold;width:150px;color:#555555;">Employee ID</td> <td><%transform(sourcedata.employeeid)%></td> <td style="font-weight:bold;width:150px;color:#555555;">Phone Number</td> <td><%alltrim(sourcedata.homephone)%></td> <td></td> </tr> <tr> <td style="font-weight:bold;width:150px;color:#555555;">Employed Since</td> <td><%dtoc(ttod(sourcedata.hiredate))%></td> <td></td> <td></td> <td><a name="a<%transform(sourcedata.employeeid)%>" id="a<%transform(sourcedata.employeeid)%>"
                   class="aaTextLink" style="font-weight:bold;">Show Notes</a></td> </tr> <tr> <td colspan="5" style="width:600px;"> <div class="aaContainer" name="d<%transform(sourcedata.employeeid)%>"
                     id="d<%transform(sourcedata.employeeid)%>" style="visibility:hidden;display:none;"> <br /><span style="font-weight:bold;">Notes:</span><br /> <%alltrim(sourcedata.notes)%> </div> </td> </tr> </table> </div> <script> function DisplayEmployeeNotes(cName) { //alert(document.getElementById('d' + cName).visibility); //alert(document.getElementById('d' + cName).display); document.getElementById('d' + cName).style.visibility =
((document.getElementById('d' + cName).style.visibility == "hidden") ? "visible" : "hidden");
document.getElementById('d' + cName).style.display =
((document.getElementById('d' + cName).style.display== "none") ? "inline" : "none"); document.getElementById('a' + cName).innerHTML =
((document.getElementById('d' + cName).style.display== "none") ? "Show Notes" : "Hide Notes"); } </script>