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 in a self-hosted SeekTable version.
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"}, "ChartOnly":false, "ChartLegendPosition": "right", "ClientWidgetName" : "myReport", "ClientCustomRenderFunction": "customVisualGlobalJsFunctionName" }</Widget:Report>
JSON option | Description |
---|---|
ReportId |
Id of the report (required). It can be found in the address bar when report is opened. |
ApplyParameters |
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). |
ChartOnly |
Hides pivot table to display only the chart (makes sense only if report has a chart). |
TableOnly |
Hides chart and displays only the table (makes sense only if report has a chart). |
ChartLegendPosition |
The position where to display chart's legend. Possible values are: right , top , bottom . |
ClientWidgetName |
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 }); |
ClientCustomRenderFunction |
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 ) ); }; |
Widget:Parameter
tag defines a placeholder for the parameter (filter control). This tag contains JSON with widget options.
CubeId
and ParameterName
.
<Widget:Parameter>{ "CubeId":"cubeId", "ParameterName": "cubeParamName", "Label": "Parameter Label", "Value":null }</Widget:Parameter>
ParameterName
and Editor
.
<Widget:Parameter>{ "ParameterName": "year", "Value":1997, "Editor": { "Control":"DropdownDynamic", "DropdownCubeId": "cubeIdForDropdownItems", "DropdownValueDimension": "order_date_year", "DropdownTextDimension": "order_date_year", } }</Widget:Parameter>
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:
|
Typical layouts are supported with the following predefined CSS classes:
stFilter
w100
, w75
, w66
, w50
, w33
, w25
h100
, h75
, h66
, h50
, h33
, h25
ul.tabs
<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>
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
reportData
getChartData()