Seek
Table
Reports
Dashboards
Help
demo@seektable.com
Signup
Dashboards
Northwind Orders
Northwind World Map
ECharts Demos
Custom Filter
Northwind Invoice
Bar chart as a slicer
ECharts export to PDF
Dashboards
→
Edit Dashboard
Save
Delete
Cancel
*
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).
<div class="stFilter"> <Widget:Parameter>{"CubeId":"48bd26aa515641b19fdcfecb3ac4c88b","ParameterName":"filter_customer_id"}</Widget:Parameter> <Widget:Parameter>{"CubeId":"48bd26aa515641b19fdcfecb3ac4c88b","ParameterName":"filter_order_id"}</Widget:Parameter> </div> <div class="orderIdNotSelected" style="padding:20px;margin-right:10px;background-color:#F0F0F0;text-align:center;font-size:14px;display:none;">Please select an order.</div> <div class="orderIdSelected" style="display:none;"> <style> .customerInfo { font-size:14px; } .customerInfo th, .customerInfo td { padding-bottom:5px; vertical-align:top; border:0px; } .customerInfo th { padding-right:20px; } </style> <script type="text/template" id="customerInfoTpl"> <div style="padding:20px;background-color:#F0F0F0;"> <div style="float:left; font-size:30px;"> Northwind Company </div> <div style="float:right;"> <div style="font-weight:bold; font-size:30px; color:#999;">INVOICE</div> <div style="font-size:12px; text-align:right;">Invoice №: <span class="OrderID"/></div> <div style="font-size:12px; text-align:right;">Order Date: <span class="OrderDate"/></div> </div> <div style="clear:both;"></div> </div> <div style="float:right; margin-top:40px;"> <div style="border-bottom:1px solid black;font-size:14px;margin-bottom:5px;">Bill to</div> <table class="customerInfo"> <tr> <th>Company:</th><td class="CompanyName"></td> </tr> <tr> <th>Contact Name:</th><td class="ContactName"></td> </tr> <tr> <th>Address:</th> <td> <div class="Address"></div> <div><span class="City"/>, <span class="PostalCode"/></div> <div class="Country"></div> </td> </tr> <tr> <th>Phone:</th><td class="Phone"></td> </tr> </table> </div> <div style="clear:both;"></div> </script> <Widget:Report>{ "ReportId":"cf976bd9a76743a89f5a54570a67c40a", "ClientCustomRenderFunction": "renderCustomerInfo", "ApplyParameters": { "filter_order_id":"filter_order_id" } }</Widget:Report> <script> function renderCustomerInfo(context) { console.log(context.reportData); var orderSelected = context.reportData.Data.length==1; $('.orderIdSelected').toggle(orderSelected ); $('.orderIdNotSelected').toggle(!orderSelected); if (!orderSelected) return; context.$el.html( $('#customerInfoTpl').html() ); var $orderEl = $('.orderIdSelected'); var orderRow = context.reportData.Data[0]; for (var i=0; i<context.reportData.Columns.length; i++) { var colName = context.reportData.Columns[i]; var colVal = orderRow[i]; $orderEl.find('.'+colName.Name).text(colVal); } } </script> <style> .invoiceLineItems { margin-top:40px; margin-bottom:20px;} .invoiceLineItems th { background-color:transparent !important; } .invoiceLineItems th.pvtRowLabel { width:70% !important; color:black !important; } .invoiceLineItems th.pvtMeasure { width:10% !important; } .invoiceLineItems td, .invoiceLineItems th { border-right: none !important; border-left: none !important; padding:5px; } .invoiceLineItems table { border:none !important!; font-size: 14px; } .invoiceLineItems tr:last-child th, .invoiceLineItems tr:last-child td { border-bottom:none !important; } .invoiceLineItems th.pvtRowLabel, .invoiceLineItems th.pvtColumn { border-top:none !important; } .invoiceLineItems tr:not(:last-child) td, .invoiceLineItems th.pvtRow { font-weight:normal !important; } </style> <div class="invoiceLineItems"> <Widget:Report>{ "ReportId":"9aa49b503fac432a943ee75aa827f829", "Static":true, "ApplyParameters": { "filter_order_id":"filter_order_id" } }</Widget:Report> </div> <div style='text-align:center;'><a href="#" class="stExportButton" data-format="pdf" data-loadingspinner="true">Generate Invoice PDF</a></div> </div>
Apply parameters: On change
Apply parameters: Filter button
Insert report
Insert parameter
Insert "Filter" button
Template reference
Save
Cancel