Display Datapage Columns when No Records Found

[SpedTeam]

Is there a way to show the columns in a datapage/tabular report when the datapage does not return any records? 

We would like the user to be able to see the format/columns of the report and what the report will show after they input their data.  

[DrSimi]

Hi @SpedTeam,

I came across a similar requirement not too long ago and it turns out the solution is quite simple, but does require manually building and maintaining your HTML table.

Here's what I did:

1) Add an empty Table with the Headers in the Footer of the DataPage. The amount or text of the columns can be customized as needed, but should ideally match the same columns you are showing when there are Results returned in the report.

<table class="cbResultSetTable cbResultSetTableCellspacing cbReportSpa" data-cb-name="cbTable" id="cbTable_noResults" style="display:none;" title="Data table">
<thead>
<tr class="cbResultSetTableHeader" data-cb-name="header">
<th class="cbResultSetLabel cbResultSetHeaderCell"></th>
<th class="cbResultSetLabel cbResultSetHeaderCell" scope="col"><a class="cbResultSetLabelLink" href="unsafe:void(0);">Ticket</a></th>
<th class="cbResultSetLabel cbResultSetHeaderCell" scope="col"><a class="cbResultSetLabelLink" href="unsafe:void(0);">Account ID</a></th>
<th class="cbResultSetLabel cbResultSetHeaderCell" scope="col"><a class="cbResultSetLabelLink" href="unsafe:void(0);">Customer Name</a></th>
<th class="cbResultSetLabel cbResultSetHeaderCell" scope="col"><a class="cbResultSetLabelLink" href="unsafe:void(0);">City</a></th>
<th class="cbResultSetLabel cbResultSetHeaderCell" scope="col"><a class="cbResultSetLabelLink" href="unsafe:void(0);">Country</a></th>
<th class="cbResultSetLabel cbResultSetHeaderCellNumberDate" scope="col"><a class="cbResultSetLabelLink" href="unsafe:void(0);">Reported Date</a></th>
<th class="cbResultSetLabel cbResultSetHeaderCell" scope="col"><a class="cbResultSetLabelLink" href="unsafe:void(0);">Ticket Status</a></th>
<th class="cbResultSetLabel cbResultSetHeaderCell" scope="col"><a class="cbResultSetLabelLink" href="unsafe:void(0);">SLA</a></th>
<th class="cbResultSetLabel cbResultSetHeaderCell" scope="col"><a class="cbResultSetLabelLink" href="unsafe:void(0);">Company</a></th>
<th class="cbResultSetLabel cbResultSetHeaderCell"><span>&nbsp;</span></th>
</tr>
</thead>
</table>

 

If you want the "No records found" text displayed as the first row of the empty table, you can add it manually too. Adjust the colspan value depending on the number of columns you have:

<table class="cbResultSetTable cbResultSetTableCellspacing cbReportSpa" data-cb-name="cbTable" id="cbTable_noResults" style="display:none;" title="Data table">
<thead>
<tr class="cbResultSetTableHeader" data-cb-name="header">
<th class="cbResultSetLabel cbResultSetHeaderCell"></th>
<th class="cbResultSetLabel cbResultSetHeaderCell" scope="col"><a class="cbResultSetLabelLink" href="unsafe:void(0);">Ticket</a></th>
<th class="cbResultSetLabel cbResultSetHeaderCell" scope="col"><a class="cbResultSetLabelLink" href="unsafe:void(0);">Account ID</a></th>
<th class="cbResultSetLabel cbResultSetHeaderCell" scope="col"><a class="cbResultSetLabelLink" href="unsafe:void(0);">Customer Name</a></th>
<th class="cbResultSetLabel cbResultSetHeaderCell" scope="col"><a class="cbResultSetLabelLink" href="unsafe:void(0);">City</a></th>
<th class="cbResultSetLabel cbResultSetHeaderCell" scope="col"><a class="cbResultSetLabelLink" href="unsafe:void(0);">Country</a></th>
<th class="cbResultSetLabel cbResultSetHeaderCellNumberDate" scope="col"><a class="cbResultSetLabelLink" href="unsafe:void(0);">Reported Date</a></th>
<th class="cbResultSetLabel cbResultSetHeaderCell" scope="col"><a class="cbResultSetLabelLink" href="unsafe:void(0);">Ticket Status</a></th>
<th class="cbResultSetLabel cbResultSetHeaderCell" scope="col"><a class="cbResultSetLabelLink" href="unsafe:void(0);">SLA</a></th>
<th class="cbResultSetLabel cbResultSetHeaderCell" scope="col"><a class="cbResultSetLabelLink" href="unsafe:void(0);">Company</a></th>
<th class="cbResultSetLabel cbResultSetHeaderCell"><span>&nbsp;</span></th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="10" style="color:red; text-align:center; padding:10px">No records found.</td>
</tr>
</tbody>
</table>

 

2) In the Localization for the DataPage, add this script as the Custom Text. It will display the Table in the footer only when there are no Results:

<script>document.querySelector('#cbTable_noResults').style.display="block";</script>

 

Hope this helps!

[SpedTeam]

That works perfect!  Thank you so much!