SeekTable

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 in a self-hosted SeekTable version.

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"},
  "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 ) );
};

Parameter Widget

Widget:Parameter tag defines a placeholder for the parameter (filter control). This tag contains JSON with widget 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>
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>
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
Only if Control=Dropdown: a list of dropdown items. For example: 
"DropdownValues": [
  {"Value":"1", "Text":"One"},
  {"Value":"2", "Text":"Two"}
]

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>

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).