Widgets Customization
Available widget types for the QSC Dashboard are listed below, along with their functionality and configuration options examples.
Chart Widgets
Visualize your search analytics using bar, Donut, or pie charts:
- Properteis: Chart displayType, labels, title...
- Data Source: Aggregation queries or pre-processed data
- Use Case: Track query volume, top search terms, filter trends...
Bar Chart Widget
Configuration example:
{ "widgetType": "api",
"tenant": {
"code": "demo",
"name": "demo",
"color": "green",
"versioning": true,
"serviceAwsCredentials": false,
"textExtractHttpType": false,
"createdAt": "2023-05-31T08:43:24Z",
"changedAt": "2023-05-31T08:43:24Z"
},
"code": "chart-searches",
"name": "chart-searches",
"type": "widget",
"createdAt": "2024-05-30T13:00:39Z",
"changedAt": "2024-05-30T15:29:14Z",
"properties": {
"displayType": "chart",
"config": {
"yAxisValue": "customData.searches",
"title": "Bar Chart Widget",
"xLabel": "Date Time",
"yLabel": "Searches",
"maxLabels": 20
}
},
"uiConfig": {
"tabs": [
{
"name": "General",
"inputs": [
{
"label": "displayType",
"path": "properties.displayType",
"type": "input"
}
]
},
{
"name": "Config",
"inputs": [
{
"label": "title",
"path": "properties.config.title",
"type": "input"
},
{
"label": "xLabel",
"path": "properties.config.xLabel",
"type": "input"
},
{
"label": "yLabel",
"path": "properties.config.yLabel",
"type": "input"
},
{
"label": "maxLabels",
"path": "properties.config.maxLabels",
"type": "input"
}
]
}
]
},
"dataSources": {
"ctr": {
"id": "ctr-tbl",
"endpoint": "ctr-tbl",
"type": "search"
}
},
"mapping": {
"type": "jsonPath",
"values": {
"facet": "$.ctr-tbl.result.ctr-tbl.facets[?(@.id=='timestamp')][0]"
}
}
}
Properteis
- properties are mapped directly to the data part of the API
{
"properties": {
"displayType": "chart",
"config": {
"yAxisValue": "customData.searches",
"title": "Searches",
"xLabel": "Date Time",
"yLabel": "Searches",
"maxLabels": 20
}
}
}
Datasources
- the key and the id of the datasource must be equal
ctr-tbl - type: search - references a qsc search by the endpoint
ctr-tbl - endpoint: ctr-tbl - is the code of the qsc search
- just search from the same tenant can be used
{
"dataSources": {
"ctr": {
"id": "ctr-tbl",
"endpoint": "ctr-tbl",
"type": "search"
}
}
}
Mapping
Map the json to the data block of the API response
- the jsonPath references at first the id of the datasource
ctr-tbl
{
"mapping": {
"type": "jsonPath",
"values": {
"facet": "$.ctr-tbl.result.ctr-tbl.facets[?(@.id=='timestamp')][0]"
}
}
}
Donut Chart Widget
Configuration example:
{ "widgetType": "api",
"tenant": {
"code": "demo",
"name": "demo",
"color": "green",
"versioning": true,
"serviceAwsCredentials": false,
"textExtractHttpType": false,
"createdAt": "2023-05-31T08:43:24Z",
"changedAt": "2023-05-31T08:43:24Z"
},
"code": "nam-donut-chart",
"name": "nam-donut-chart",
"type": "widget",
"createdAt": "2025-01-29T16:28:43Z",
"changedAt": "2025-01-30T09:52:23Z",
"uiConfig": {
"tabs": [
{
"name": "General",
"inputs": [
{
"label": "displayType",
"path": "properties.displayType",
"type": "input"
},
{
"label": "title",
"path": "properties.config.title",
"type": "input"
},
{
"label": "description",
"path": "properties.config.description",
"type": "ace-editor",
"componentProperties": {
"lang": "html"
}
}
]
}
]
},
"variables": [],
"properties": {
"displayType": "donutChart",
"config": {
"title": "Donut Chart",
"description": "<p><strong>D3 Donut chart widget</strong> , where the <br>pie arcs are configurable, so that <img src=\"https://qsc-dev.quasiris.de/console/img/qsc-logo.fee482c1.png\" alt=\"Placeholder Image\"> I can visualize data in a flexible and meaningful way. </p>"
}
},
"dataSources": {
"products": {
"id": "products",
"endpoint": "products",
"type": "search"
}
},
"mapping": {
"type": "jsonPath",
"values": {
"facet": "$.products.result.products.facets[?(@.id=='supplierName')][0]"
}
}
}
Properteis
- properties are mapped directly to the data part of the API
{
"properties": {
"displayType": "donutChart",
"config": {
"title": "Donut Chart",
"description": "<p><strong>D3 Donut chart widget</strong> , where the <br>pie arcs are configurable, so that <img src=\"https://qsc-dev.quasiris.de/console/img/qsc-logo.fee482c1.png\" alt=\"Placeholder Image\"> I can visualize data in a flexible and meaningful way. </p>"
}
}
}
Datasources
- the key and the id of the datasource must be equal
products - type: search - references a qsc search by the endpoint
products - endpoint: products - is the code of the qsc search
- just search from the same tenant can be used
{
"dataSources": {
"products": {
"id": "products",
"endpoint": "products",
"type": "search"
}
}
}
Mapping
Map the json to the data block of the API response
- the jsonPath references at first the id of the datasource
products
{
"mapping": {
"type": "jsonPath",
"values": {
"facet": "$.products.result.products.facets[?(@.id=='supplierName')][0]"
}
}
}
Data Table widget
Visualize your search analytics using data table:
Configuration example:
{
"widgetType": "api",
"tenant": {
"code": "demo",
"name": "demo",
"color": "red",
"versioning": true,
"serviceAwsCredentials": false,
"textExtractHttpType": false,
"createdAt": "2023-05-31T08:43:24Z",
"changedAt": "2023-05-31T08:43:24Z"
},
"code": "datatable",
"name": "datatable",
"type": "widget",
"createdAt": "2024-08-21T08:54:15Z",
"changedAt": "2024-08-21T10:03:43Z",
"uiConfig": {
"tabs": [
{
"name": "General",
"inputs": [
{
"label": "displayType",
"path": "properties.displayType",
"type": "input"
}
]
}
]
},
"variables": [
{
"key": "description",
"value": "Search app html"
}
],
"properties": {
"displayType": "dataTable"
},
"dataSources": {
"hb_products_mki": {
"id": "hb_products_mki",
"endpoint": "hb_products_mki",
"type": "search"
}
},
"mapping": {
"type": "jsonPath",
"values": {
"result": "$.hb_products_mki.result.hb_products_mki"
}
}
}
Variables
- variables are not visible in the API response
- variables can be used just internally, e.g. in templates and rendering
- a variable has alway a key and a value
- the value can be any simple type (string, int, long, float, ...) and also complex types are supported
{
"variables": [
{
"key": "description",
"value": "Search app html"
}
]
}
Properteis
- properties are mapped directly to the data part of the API
{
"properties": {
"displayType": "dataTable"
}
}
Datasources
- the key and the id of the datasource must be equal
hb_products_mki - type: search - references a qsc search by the endpoint
hb_products_mki - endpoint: hb_products_mki - is the code of the qsc search
- just search from the same tenant can be used
{
"dataSources": {
"hb_products_mki": {
"id": "hb_products_mki",
"endpoint": "hb_products_mki",
"type": "search"
}
}
}
Mapping
Map the json to the data block of the API response
- the jsonPath references at first the id of the datasource
hb_products_mki
{
"mapping": {
"type": "jsonPath",
"values": {
"result": "$.hb_products_mki.result.hb_products_mki"
}
}
}
Input Widgets
Allow users to configure input fields like date pickers, dropdowns, search boxes, and a refresh button to filter the dashboard data based on their preferences:
Search box Widget
Allow users to define search box input for filtering dashboard data:
Configuration example:
{
"widgetType": "api",
"tenant": {
"code": "demo",
"name": "demo",
"color": "green",
"versioning": true,
"serviceAwsCredentials": false,
"textExtractHttpType": false,
"createdAt": "2023-05-31T08:43:24Z",
"changedAt": "2023-05-31T08:43:24Z"
},
"code": "demo-input-searchbox",
"name": "demo-input-searchbox",
"type": "widget",
"createdAt": "2024-04-08T14:05:08Z",
"changedAt": "2024-04-08T14:05:20Z",
"variables": [],
"uiConfig": {
"tabs": [
{
"name": "General",
"inputs": [
{
"label": "displayType",
"path": "properties.displayType",
"type": "input"
}
]
}
]
},
"properties": {
"displayType": "searchbox"
}
}
Dropdown Widget
Allow users to define dropdown for filtering dashboard data:
Configuration example:
{
"widgetType": "api",
"tenant": {
"code": "demo",
"name": "demo",
"color": "green",
"versioning": true,
"serviceAwsCredentials": false,
"textExtractHttpType": false,
"createdAt": "2023-05-31T08:43:24Z",
"changedAt": "2023-05-31T08:43:24Z"
},
"code": "demo-input-dropdown",
"name": "demo-input-dropdown",
"type": "widget",
"createdAt": "2024-04-08T14:05:08Z",
"changedAt": "2024-04-08T14:05:20Z",
"uiConfig": {
"tabs": [
{
"name": "General",
"inputs": [
{
"label": "displayType",
"path": "properties.displayType",
"type": "input"
}
]
}
]
},
"variables": [],
"properties": {
"displayType": "dropdown"
},
"dataSources": {
"products": {
"id": "products",
"endpoint": "products",
"type": "search"
}
},
"mapping": {
"type": "jsonPath",
"values": {
"facet": "$.products.result.products.facets[?(@.id=='supplierName')][0]"
}
}
}
Datasources
- the key and the id of the datasource must be equal
products - type: search - references a qsc search by the endpoint
products - endpoint: products - is the code of the qsc search
- just search from the same tenant can be used
{
"dataSources": {
"products": {
"id": "products",
"endpoint": "products",
"type": "search"
}
}
}
Mapping
Map the json to the data block of the API response
- the jsonPath references at first the id of the datasource
products
{
"mapping": {
"type": "jsonPath",
"values": {
"facet": "$.products.result.products.facets[?(@.id=='supplierName')][0]"
}
}
}
Date picker Widget
Allow users to configure a date picker for filtering dashboard data, with options for selecting either a specific date range or a relative range, such as the past month,...
Configuration example:
{
"widgetType": "api",
"tenant": {
"code": "demo",
"name": "demo",
"color": "green",
"versioning": true,
"serviceAwsCredentials": false,
"textExtractHttpType": false,
"createdAt": "2023-05-31T08:43:24Z",
"changedAt": "2023-05-31T08:43:24Z"
},
"code": "demo-input",
"name": "demo-input",
"type": "widget",
"createdAt": "2024-02-08T12:41:16Z",
"changedAt": "2024-02-23T13:59:08Z",
"uiConfig": {
"tabs": [
{
"name": "General",
"inputs": [
{
"label": "displayType",
"path": "properties.displayType",
"type": "input"
}
]
}
]
},
"variables": [],
"properties": {
"displayType": "datepicker"
}
}
Refresh button Widget
Allow users to configure a refresh button that enables them to refresh the dashboard data on demand:
Configuration example:
{
"widgetType": "api",
"tenant": {
"code": "demo",
"name": "demo",
"color": "green",
"versioning": true,
"serviceAwsCredentials": false,
"textExtractHttpType": false,
"createdAt": "2023-05-31T08:43:24Z",
"changedAt": "2023-05-31T08:43:24Z"
},
"code": "demo-refresh",
"name": "demo-refresh",
"type": "widget",
"createdAt": "2024-02-08T12:41:16Z",
"changedAt": "2024-02-23T13:59:08Z",
"uiConfig": {
"tabs": [
{
"name": "General",
"inputs": [
{
"label": "displayType",
"path": "properties.displayType",
"type": "input"
}
]
}
]
},
"variables": [],
"properties": {
"displayType": "button"
}
}
Markdown widget
Insert custom markdown content directly into your dashboard:
Configuration example:
{
"widgetType": "markdown",
"tenant": {
"code": "demo",
"name": "demo",
"color": "green",
"versioning": true,
"serviceAwsCredentials": false,
"textExtractHttpType": false,
"createdAt": "2023-05-31T08:43:24Z",
"changedAt": "2023-05-31T08:43:24Z"
},
"code": "demo-markdown",
"name": "demo-markdown",
"createdAt": "2024-02-08T12:41:16Z",
"changedAt": "2024-02-23T13:59:08Z",
"uiConfig": {
"tabs": [
{
"name": "Markdown",
"inputs": [
{
"label": "Markdown",
"path": "template.template",
"type": "markdown-editor"
}
]
}
]
},
"variables": [],
"properties": {
"displayType": "markdown",
"title": "Das ist mein Widget"
},
"template": {
"template": "# Alexander Bürkle Dokumentation\n\nSearch app configuration\n--------------------------------------\n\nBest Summer part yever"
},
}
template
- template are mapped directly to the data part of the API
- it contains the raw Markdown content that is used for rendering.
{
"template": {
"template": "# Alexander Bürkle Dokumentation\n\nSearch app configuration\n--------------------------------------\n\nBest Summer part yever"
}
}
Html widget
Insert custom HTML content directly into your dashboard:
- Content: Static or dynamic HTML
- Use Case: Add custom notes, links, branding elements, or styling
Configuration example:
{
"widgetType": "html",
"tenant": {
"code": "demo",
"name": "demo",
"color": "green",
"versioning": true,
"serviceAwsCredentials": false,
"textExtractHttpType": false,
"createdAt": "2023-05-31T08:43:24Z",
"changedAt": "2023-05-31T08:43:24Z"
},
"code": "demo-html",
"name": "demo-html",
"createdAt": "2024-02-08T12:41:16Z",
"changedAt": "2024-02-23T13:59:08Z",
"variables": [],
"properties": {
"displayType": "html"
},
"uiConfig": {
"tabs": [
{
"name": "General",
"inputs": [
{
"label": "displayType",
"path": "properties.displayType",
"type": "input"
},
{
"label": "template",
"path": "template.template",
"type": "ace-editor",
"componentProperties": {
"lang": "html"
}
}
]
}
]
},
"template": {
"template": "<h2>Html test Searchapp documentation</h2><br><p>Search app configuration</p>\n<p>foo bbar</p>"
},
}
template
- template are mapped directly to the data part of the API
- it contains the raw HTML content, which will be used to render the structure and content.
{
"template": {
"template": "<h2>Html test Searchapp documentation</h2><br><p>Search app configuration</p>\n<p>foo bbar</p>"
}
}
Open API Widget
Fetch and display data from external APIs:
Configuration example:
{
"widgetType": "api",
"tenant": {
"code": "demo",
"name": "demo",
"color": "green",
"versioning": true,
"serviceAwsCredentials": false,
"textExtractHttpType": false,
"createdAt": "2023-05-31T08:43:24Z",
"changedAt": "2023-05-31T08:43:24Z"
},
"code": "demo-openapi-url",
"name": "demo-openapi-url",
"createdAt": "2024-02-08T12:41:16Z",
"changedAt": "2024-02-23T13:59:08Z",
"variables": [],
"uiConfig": {
"tabs": [
{
"name": "General",
"inputs": [
{
"label": "displayType",
"path": "properties.displayType",
"type": "input"
},
{
"label": "url",
"path": "properties.url",
"type": "input"
}
]
}
]
},
"properties": {
"displayType": "openapi",
"url": "https://qsc-dev.quasiris.de/api/v1/search-docs/swagger/ab/products"
},
}
Properteis
- properties are mapped directly to the data part of the API.
- url contains the endpoint URL for fetching open api data.
- here the template section can hold raw template data, such as an OpenAPI definition but does not include the url.
{
"properties": {
"displayType": "openapi",
"url": "https://qsc-dev.quasiris.de/api/v1/search-docs/swagger/ab/products"
}
}
🔧 Each widget can be edited, resized, or removed at any time through the dashboard interface.