Creating Dashboards with Multi-Page Table Visuals

Create the Custom Table Style

These steps show how to create and add a dashboard style for printing long tables over multiple pages. This table must be the last visual in the dashboard.

1. Create a new style, Named Print PDF table - CSS/JS, as covered in CSS Custom Styles. The optional Description for this style can be as follows:

   Add this Style to the table to be printed on multiple pages.  
   The table must be the last visual in the dashboard.

2. In the CSS tab, add the following code. Note that you can download it as multi-page-table.css.

   @charset "UTF-8";
   /* CSS Document */
   
   
   /* screen table style */
   .print-pdf-table table.table-bordered.dataTable {
     border-collapse: collapse !important;
   }
   
   .print-pdf-table .dataTables_scrollBody table tbody tr td {
     height: 0.53cm !important;  /* table row height */
     box-sizing: border-box;
     font-size: 10px;
   } 
   
   @media print {
     @page {
       size: letter landscape;
       margin: 1.27cm 1.27cm 1.27cm 1.27cm;
     }
     
     .print-pdf-table .dataTables_scrollBody table thead tr th {
       border: solid 1px #bbb;
       border-bottom: solid #000 2px !important;  /* bottom border of table header */
       font-size: 12px;
       font-weight: bold;
       height: 1.48cm !important;  /* adjust for height of table header */
       padding: 12px 8px !important;
     }
   
     .print-pdf-table .dataTables_scrollBody table thead tr th > div {
       height: 1.48cm !important;  /* adjust for height of table header */
       display: flex;
       justify-content: center;
       flex-direction: column;
     }
     
     .print-pdf-table table.dataTable.table-viz thead > tr > th.sorting {
       padding: inherit;
       padding-right: 8px; /* remove extra space where sort icon is displayed */
     }
   
     .print-pdf-table .dataTables_scrollBody table tbody tr td {
       height: 0.53cm !important;  /* table row height */
       box-sizing: border-box;
       font-size: 10px;
     }  
   
     .gs-w.print-pdf-table .dataTables_scrollBody {
       max-height: none !important;
     }
   
   /* the class below to print the table on the second page */
   /* remove to print normally */
     .gs-w.print-pdf-table {
        position: absolute;
        top: 23.59cm; /* page height in landscape */
     }
   
     .gs-w.print-pdf-table {
       height: unset !important;
     }
   
     .print-pdf-table .dash-viz-wrapper { 
       display: contents;
     }
     .print-pdf-table .arc-viz-container {
       overflow: unset !important;
     }
   
     .main-app.arc-app-container.view-mode {
       display: contents;
     }
   
     .arc-dashboard-title-container {
       padding-top: 1cm;  /* adjust if want more or less space at the top of the first page  */
     }
   
     .builder-container.view-mode,  
     .builder-container-app,
     .builder-container {
       display: contents;
     }
   
     .main-app-view,
     .main-view {
       overflow: visible !important;
       top: 0;
     }
   
     .main-view.view-mode {
       top: 0;
     }
   
     .print-pdf-table .table-bordered td {
       border: 1px solid #bbb !important;  /* border color */
     }
   
     .print-pdf-table table.table-bordered.dataTable {
       border-collapse: collapse !important;
     }
   
     .print-pdf-table  .arc-viz-title-container {
       display: none;  /* hide table title to print properly */
     }
     .print-pdf-table .dash-viz-wrapper {
       padding: 0;
     }
   
     .print-pdf-table .dataTables_scrollHead {
       height: 0;
     }
    
     .print-pdf-table .table {
       border-width: 0;
     }
   
     .print-pdf-table thead {
       break-inside: avoid;
       display: table-header-group;
     }
   
     .print-pdf-table table {
       page-break-after: always;
     }
   
     .print-pdf-table tfoot {
       break-inside: avoid;
       display: table-header-group;
     }
   
   /* hide elements when printing  */
     #extension-print-btn,  /* extension buttons */
     #toggle-filter-container /* filter collapse icon */
     { 
       display: none;
     }
   
   }

3. In the JS tab, add the following code. Note that you can download it as multi-page-table.js.

   return function() { 
       var f = function() {};
       f.version = "1";
       f.afterDraw = function() {
         var $sel = $('#' + arcapi.chartId());
         $sel.closest('.gs-w').addClass('print-pdf-table');
       };
      return f;
   }();

4. Save the new style.

Create the Dashboard

Create a dashboard on your target dataset. See Creating Dashboards.

Add several visuals to the dashboard, such as KPIs, summary tables, pie charts, and so on.

Add all necessary filters to the dashboard.

Specify Dashboard Downloads Settings

Specify the settings necessary to print the dashboard using the PDF options:

1. On the right side of Visual Designer, click the Settings menu.
2. In the Settings menu, click on Downloads to open that menu.

3. In the Downloads menu, make the following selections and changes:

   • Enable "Download as Image/PDF"
   • Enable print style PDF
   • Print PDF Scale set to 100
   • PDF Page Size set to Letter
   • PDF Page Orientation set to Landscape
   • Enable PDF Header and Footer

   

Add Time Stamp

<span style="color:#aaa">Today:</span> 
<span id="tdate"></span>

<script>
$(document).ready(function() {
  var today = new Date();
  $('#tdate').html( 
  $.datepicker.formatDate('MM dd, yy', today));
});
</script>

When you add this extension visual to the dashboard, it would look similar to this (in View mode).

Add Capabilities to Print Dashboard and Download PDF

Using the following definition in an extension visual creates two buttons:

• Print button with an icon, Print
• Download PDF button with an icon, Download PDF

<div id="extension-print-btn">
  <button class="btn btn-xs btn-primary" 
  onclick="window.print();return false;">
  <span class="fa fa-print"></span> Print</button>

  <button class="pdf-download btn btn-xs btn-primary" 
  onclick="$('#report-menu-list').find('[data-arc-imageformat=&quot;pdf-current&quot;]')[0].click();”>
  <span class="fa fa-download"></span> Download PDF</button>
  <div class="image-dropdown-submenu"></div>

</div>

When you add this extension visual to the dashboard, it would look similar to this (in View mode).

Create the Table Visual

Create and customize the main table visual. Note that this visual should be the last (lowest) one in the dashboard.

1. Create the table visual on the target dataset, as described in Table Visuals.

2. On the right side of Visual Designer, click the Style menu.

   

3. In the Style menu, click Table Style.

   

4. In the Table Style menu, make the following selections and changes:

   • Choose the first table template
   • Table Header Alignment set to Align with contents
   • Enable Full Table Width
   • Wrap Column Contents

   

5. Add the custom style we created earlier, Print PDF table - CSS/JS, to the visual, as described in Adding Custom Styles to Visuals and Adding Included Styles to Visuals.

   Note that the ID of your custom style may be different. Arcadia Enterprise generates sequential ID on each instance.

   

6. When you finished configuring the table, it would look similar to this in View mode of the dashboard. Ensure that this table visual is the last item on the dashboard.

   

Print and Download

After saving the dashboard, switch to View mode.

Click the Print button on the dashboard, and then follow system prompts to complete the printing process.

Click the Download PDF button on the dashboard, and then follow system prompts to complete the PDF download of the dashboard.