Edit Dashboard | SeekTable

^* Name

^* Enable Exports

All-dashboard exports to download multiple reports as a one file.

^* HTML Template Hint: use copy-paste to edit HTML code in your favourite editor (VSCode, Notepad++ etc).

<style>
.dashboardTitle { display:none; font-size:20px; }
body.stPdfExport .dashboardTitle { display:block; }
</style>
<div class="dashboardTitle">Sample dashboard PDF export</div>

<div class="stFilter">
   <Widget:Parameter>{"CubeId":"northwind-orders", "ParameterName": "filter_country"}</Widget:Parameter>
</div>
<ul class="tabs">
  <li class="active"><a href="#tab_overview">Overview</a></li>
  <li><a href="#tab_orders">Last Ordered Items</a></li>
</ul>
<div id="tab_overview">
  <div class="w50 h100">
   <Widget:Report>{
    "ReportId":"f1117f18a5954782b326c87bc607bbdc" ,
    "ClientWidgetName": "sales_years",
    "DashboardExport": { "ExcelWorksheetName": "Sales Overview"}
   }</Widget:Report>
<a href="#"  class="stExportButton stSmallButton"  data-report="sales_years" data-format="pdf" data-loadingspinner="true">PDF</a>
<a href="#"  class="stExportButton stSmallButton"  data-report="sales_years" data-format="excel" data-loadingspinner="true">Excel</a>
  </div>
  <div class="w50 h25">
    
    <Widget:Report>{ 
      "ReportId":"f1117f18a5954782b326c87bc607bbdc", 
      "ClientCustomRenderFunction": "renderHighlights", 
      "ChartOnly":true,
      "DashboardExport": { "Excel":false }
     }</Widget:Report>
    <script>
    function applyChangeClass($el, prevVal, currentVal) {
        if (prevVal < currentVal)
          $el.addClass("change-up");
        if (prevVal > currentVal)
          $el.addClass("change-down");
    }
    function renderHighlights(context) {
      // console.log(context.reportData);    // -- uncomment to see report's data
      // init report's container with a custom HTML template
      context.$el.html( $('#highlightsTemplate').html() );
      // report columns are ordered by year asc, take a last one (if no columns use a grand total)
      var lastYearValues = context.reportData.ColumnKeys.length>0 ? context.reportData.ColumnTotals[ context.reportData.ColumnKeys.length-1 ] : context.reportData.GrandTotal;
      // 1st value is for 'sales' measure
      var $salesVal = $('#highlights_sales_value').removeClass("change-up change-down");
      $salesVal.text( lastYearValues[0] );
      // 2nd value is for 'orders' measure
      var $ordersVal = $('#highlights_orders_value');
      $ordersVal.text( lastYearValues[1] );
      // if prev values are present - compare with the last year to show up/down arrows
      if (context.reportData.ColumnKeys.length>1) {
        var prevYearValues = context.reportData.ColumnTotals[ context.reportData.ColumnKeys.length-2 ];
        applyChangeClass($salesVal, prevYearValues[0], lastYearValues[0]);
        applyChangeClass($ordersVal, prevYearValues[1], lastYearValues[1]);
      }
    }
    </script>
    <style>
    table.highlights {
     height:100%;
     width:100%;
     border:1px solid #ddd;
    }
    table.highlights td {
       padding:10px;
       text-align:center;
       font-size:22px;
    }
    table.highlights .change-up::after {
       display:inline-block;
       color:green;
       margin-left:10px;
       content: '⇧';
    }
    table.highlights .change-down::after {
       display:inline-block;
       color:red;
       margin-left:10px;
       content: '⇩';
    }
    </style>  
   <script type="text/template" id="highlightsTemplate">
      <table class="highlights">
        <tr>
          <td valign="middle" width="50%">
              <small>Last year sales:</small><br/>
              <b>$<span id="highlights_sales_value"></span></b>
          </td>
          <td valign="middle" width="50%">
              <small>Last year orders:</small><br/>
              <b><span id="highlights_orders_value"></span></b>
          </td>
        </tr>
      </table>
    </script>
  </div>
  <div class="w50 h75">
    <Widget:Report>{
     "ReportId":"96c642c41bc9465caa81ee5339efa8ef",
     "ClientWidgetName": "orders_product_country",
     "DashboardExport": { "ExcelWorksheetName": "Products x Countries"}
    }</Widget:Report>
<a href="#"  class="stExportButton stSmallButton"  data-report="orders_product_country" data-format="pdf" data-loadingspinner="true">PDF</a>
<a href="#"  class="stExportButton stSmallButton"  data-report="orders_product_country" data-format="excel" data-loadingspinner="true">Excel</a>
  </div>
</div>
<div id="tab_orders">
  <div class="w100 h100">
    <Widget:Report>{  "ReportId":"f420ac4b5cdb4fff9a8d825f4654a767", "DashboardExport": { "ExcelWorksheetName": "Last 50 Orders"} }</Widget:Report>
  </div>
</div>

Insert report Insert parameter Insert "Filter" button Template reference

Cancel