Dashboards

Dashboards group several reports and present them on a single page. In SeekTable dashboards are defined by HTML template that can contain special placeholders for:

You can use any HTML tags inside the template; you can reference external CSS/JS and place <script> blocks with your JS code.

Dashboards may be shared to other users (with "Team Sharing") and published/embedded (with "Advanced publishing") in the same way as reports. Currently dashboards are available only for self-hosted SeekTable installations.

Report Widget

Widget:Report tag defines a placeholder for the report. This tag contains JSON with widget options; the only required option is ReportId.

<Widget:Report>{
  "ReportId":"report_id",
  "ApplyParameters" : {"dashboard_param_name" : "report_param_name"},
  "SetParameterValues" : {"param_country" : "UA"},
  "ChartLegendPosition": "right",
  "ClientWidgetName" : "myReport"
}</Widget:Report>
JSON option Type Description
ReportId string Id of the report (required). It can be found in the address bar when report is opened.
ApplyParameters object Determines dashboard parameters that should affect this report and how they should be mapped to report's parameters. If dashboard parameters are referenced from report's cube they are applied automatically (no need to specify them explicitely).
SetParameterValues object Hardcoded parameter values for this report (these values override user input). For example: {"filter_year":2022}
ChartOnly bool Hides pivot table to display only the chart (makes sense only if report has a chart).
ChartLegendPosition string The position where to display chart's legend. Possible values are: right, top, bottom.
TableOnly bool Hides chart and displays only the table (makes sense only if report has a chart).
Static bool Render only static table's HTML without interactivity (no fixed headers/pager/sort/expand-collapse).
ClientWidgetName string Optional name for this widget. Using this name you can get report's JSON export data from your JS code in this way:
Dashboard.loadReportJsonData("clientWidgetName", function(res) {
  var jsonExportData = res.pivotData;
  var chartData = res.getChartData(); // JSON with series
}, false);
The callback can be invoked each time when report changes if 3rd (optional) parameter is true - this is useful if you have something that should be in sync with the report.
ClientCustomRenderFunction string The name of the global JS function that renders a custom visual. Widget's placeholder element and report's data are passed in the 1st argument:
window.myCustomVisual = function(context) {
  var jsonExportData = res.pivotData;
  var chartData = res.getChartData(); // JSON with series
  context.$el.html( JSON.stringify( chartData ) );
};
DashboardExport object When dashboard export is enabled you may specify these options:
{
  Pdf: true,  // set 'false' to exclude this report from dashboard's PDF export
  Excel: true,  // set 'false' to exclude this report from dashboard's Excel export
  ExcelWorksheetName: "Custom name",  // custom worksheet's name for this report
  ExportAllData: true // ignore pager, export up to 50k rows/columns (false by default)
}
ExportAllData 50k limit can be extended in a self-hosted SeekTable version.

Parameter Widget

Widget:Parameter tag defines a placeholder for the parameter (filter control). This tag contains a JSON with options. Dashboard parameters are 'global' in meaning that they may affect all reports (visuals) of that dashboard (cross-filtering). At the same time you can explicitely control how dashboard parameters are applied to reports via report's widget ApplyParameters options.

If this is a reference to existing cube's parameter required options are CubeId and ParameterName.
<Widget:Parameter>{
  "CubeId":"cubeId",
  "ParameterName": "cubeParamName",
  "Label": "Parameter Label",
  "Value":null
}</Widget:Parameter>
When parameter widget references cube's parameter it automatically affects all reports based on that cube. To apply it as a cross-filter for reports based on another cubes use ApplyParameters option.
For a dashboard-specific parameter required options are ParameterName and Editor.
<Widget:Parameter>{
  "ParameterName": "year",
  "Value":1997,
  "Editor": {
    "Control":"DropdownDynamic",
    "DropdownCubeId": "cubeIdForDropdownItems",
    "DropdownValueDimension": "order_date_year",
    "DropdownTextDimension": "order_date_year",
  }
}</Widget:Parameter>
To apply this parameter it should be specified in reports widgets explicitely (in ApplyParameters option).
JSON option Description
ParameterName The name of the parameter.
CubeId Id of the cube with the specified parameter. It can be found in the address bar when cube is opened.
Value Initial value for the parameter in this dashboard.
Label The label for the parameter.
DataType A type for parameter's value (not applicable if CubeId is set). Possible values are: String (default), Int32, Int64, Decimal, DateTime, Boolean.
Multivalue Determines whether this parameter can hold multiple values (not applicable if CubeId is set).
Editor UI control configuration for this parameter (not applicable if CubeId is set). Editor's options:
Control
Possible values are: Textbox, Checkbox, Dropdown, DropdownDynamic.
DropdownCubeId
Only if Control=DropdownDynamic: id of the cube to load dropdown items from.
DropdownValueDimension
Only if Control=DropdownDynamic: a dimension name for values.
DropdownTextDimension
Only if Control=DropdownDynamic: a dimension name for item's text.
DropdownValues
If Control=Dropdown: a list of dropdown items. For example:
"DropdownValues": [
  {"Value":"1", "Text":"One"},
  {"Value":"2", "Text":"Two"}
]
If Control=DropdownDynamic: can contain extra predefined items (they always go first in the items list). Also custom 'no selection' text may be defined here in this way:
"DropdownValues": [
  {"Value":"", "Text":"-- no selection --"}
]
Dependencies
Only if Control=DropdownDynamic: a list of parameters that affect loaded items (dependencies). For example:
"Dependencies" : [ { "ParameterName": "country" } ]
Values of these parameters are used in the query that loads dropdown items; also these items are re-loaded each time when 'parent' parameter's value is changed.
TextboxPlaceholder
A placeholder (hint) that is shown when input is empty.
ClientCustomRenderFunction The name of the global JS function that renders a custom parameter's editor:
window.myCustomParameterEditor = function(context, onChangeHandler) {
  console.log(context);
  var dropdownItems = context.DropdownValues;

  $('#myCustomInput').change(function() {
    var newValue = $(this).val();
    // when editor's selection is changed
    onChangeHanlder( newValue );
  });

  // optional: return a function that sets a new value to this editor
  // without this function dashboard will re-render editor each time
  // when parameter's value is changed (outside of this editor).
  return function(setVal) {
    $('#myCustomInput').val(setVal);
  };
};

Predefined CSS classes

Typical layouts are supported with the following predefined CSS classes:

stFilter
Used for div that wraps placeholders for dashboard parameters.
w100, w75, w66, w50, w33, w25
Used for report's wrapping div to specify the width in % (w100 = 100%, w50 = 50% etc).
h100, h75, h66, h50, h33, h25
Used for report's wrapping div to specify the height in % (h100 = 100%, h50 = 50% etc). The height value is calculated with JS code; 100% height corresponds to the page's free space excluding elements with classes "h<value>".
ul.tabs
Built-in tabs with lazy-load of reports inside tabs content. Tabs are useful for dashboards with many reports. For example:
<ul class="tabs">
  <li class="active"><a href="#tab_overview">Overview</a></li>
  <li><a href="#tab_by_items">By items</a></li>
</ul>
<div id="tab_overview">
  <div class="w50 h100">
    <!-- report widget here -->
  </div>
  <div class="w50 h100">
    <!-- report widget here -->
  </div>
</div>
<div id="tab_by_items">
  <div class="w100 h100">
    <!-- report widget here -->
  </div>
</div>
a.stExportButton
A built-in style and handler for the export button:
<a href="#" class="stExportButton" data-report="reportClientWidgetName" data-format="exportFormat" data-loadingspinner="true">ButtonText</a>
In addition stSmallButton CSS class may be added to make button smaller.

Report Widget Export

It is possible to initiate an export for the concrete report widget in this way:

Dashboard.getReportByName('clientWidgetName').publishedReport.export('format', callbackFunc)
clientWidgetName
value of ClientWidgetName from widget's JSON definition.
format
pdf, csv, excel, excelpivottable (can be used only for exporting pivot table reports), html, json, png (image).
callbackFunc
An optional function that is called when export is completed; it can be used to hide some kind of 'loading' indicator, for instance.

Export link example:

<a href="javascript:;" onclick="Dashboard.getReportByName('clientWidgetName').publishedReport.export('pdf')">Export to PDF</a>

Alternatively you can place a button (or link) with stExportButton class to use a built-in export handler:

<a href="#" class="stExportButton stSmallButton"
    data-report="clientWidgetName" data-format="pdf" data-loadingspinner="true">PDF</a>

Dashboard Export

You may enable 'all-dashboard' export when multiple reports are exported into a one file. The following formats are supported for this kind of export:

When dashboard's export is enabled it can be initiated in JS code:

Dashboard.exportDashboard('format', callbackFunc)
format
Currently this can be only excel.
callbackFunc
An optional function that is called when export is completed; it can be used to hide some kind of custom 'loading' indicator, for instance.

Alternatively you can place a button (or link) with stExportButton class to use a built-in export handler:

<a href="#" class="stExportButton stSmallButton" data-format="excel" data-loadingspinner="true">Download All (Excel)</a>

Custom visual

You can implement custom rendering of report's data in this way:

<Widget:Report>{
  "ReportId":"<pivotReportIdToLoadDataFrom>",
  "ClientCustomRenderFunction": "myCustomVisual"
}</Widget:Report>
<script>
function myCustomVisual(context) {
  // simply display a grand total value
  context.$el.html("<center style='font-size:22px;'>"+ context.pivotData.GrandTotal+"</center>");
  // how to access report's data
  console.log(context.reportData);
  // how to get report's data transformed into chart series
  console.log(context.getChartData());
}
</script>

Render function is called when visual needs to be displayed; context contains the following properties:

$el
jQuery element of the report's placeholder div-container.
reportData
JSON export of the report. The structure depends on the report type (pivot table or flat table).
getChartData()
The function that returns pivot data in the form of chart series (applicable only for pivot-table reports).

Embed dashboards

To embed a dashboard it is enough to enable a public link and then use this link inside iFrame. If your SeekTable installation is configured for secure embedding with JWT it is possible to restrict access to dashboard's public link:

Dashboard Form: Restrict access to published dashboard via JWT

When Replace JWT payload variables in HTML option is enabled you can pass variables in JWT payload and use them in dashboard's HTML Template, for example:

<p>This is a dashboard. Hello, @varName!</p>

Variable placeholder's syntax is the same as for report parameters in cubes:

@
identifies that this is a placeholder for the parameter
varName
variable name that corresponds to a claim name in the JWT payload. Should start with a letter and contain only alphanumerics or '_'.
[prefix{0}suffix]
optional template which specifies what should be inserted into HTML template. A content between square brackets is used when variable is defined and {0} is replaced with actual variable's value.
You may define an alternative content that is used when variable is not defined in this way:
@varName[{0};not_defined_value]

Variables are placed into HTML Template as-is; this means that you can use them inside widgets (for instance, to resolve cubes/reports IDs) and even pass raw HTML/JS code in JWT payload.