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:

Properties: Chart displayType, labels, title...
Data Source: Aggregation queries or pre-processed data
Use Case: Track query volume, top search terms, filter trends...

Configuration example:

{   "widgetType": "api",
    "code": "chart-searches",
    "name": "chart-searches",
    "type": "widget",
    "properties": {
        "displayType": "chart",
        "config": {
            "yAxisValue": "customData.searches",
            "title": "Bar Chart Widget",
            "xLabel": "Date  Time",
            "yLabel": "Searches",
            "maxLabels": 20
        }
    },
    "dataSources": {
        "ctr": {
            "id": "ctr-tbl",
            "endpoint": "ctr-tbl",
            "type": "search"
        }
    },
    "mapping": {
        "type": "jsonPath",
        "values": {
            "facet": "$.ctr-tbl.result.ctr-tbl.facets[?(@.id=='timestamp')][0]"
        }
    }
}

Properties

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]"
        }
    }
}

Configuration example:

{   "widgetType": "api",
    "code": "nam-donut-chart",
    "name": "nam-donut-chart",
    "type": "widget",
    "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]"
        }
    }
}

Properties

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]"
        }
    }
}

Visualize your search analytics using data table:

Configuration example:

{
    "widgetType": "api",
    "code": "datatable",
    "name": "datatable",
    "type": "widget",
    "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 always 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"
        }
    ]
}

Properties

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:

Allow users to define search box input for filtering dashboard data:

Configuration example:

{
    "widgetType": "api",
    "code": "demo-input-searchbox",
    "name": "demo-input-searchbox",
    "type": "widget",
    "variables": [],
    "properties": {
        "displayType": "searchbox"
    }    
}

Allow users to define dropdown for filtering dashboard data:

Configuration example:

{
    "widgetType": "api",
    "code": "demo-input-dropdown",
    "name": "demo-input-dropdown",
    "type": "widget",
    "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]"
        }
    }
}

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",
    "code": "demo-input",
    "name": "demo-input",
    "type": "widget",
    "variables": [],
    "properties": {
        "displayType": "datepicker"
    }
}

Allow users to configure a refresh button that enables them to refresh the dashboard data on demand:

Configuration example:

{   
    "widgetType": "api",
    "code": "demo-refresh",
    "name": "demo-refresh",
    "type": "widget",
    "variables": [],
    "properties": {
        "displayType": "button"
    }
}

Insert custom markdown content directly into your dashboard:

Configuration example:

{
    "widgetType": "markdown",
    "code": "demo-markdown",
    "name": "demo-markdown",
    "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"
    }
}

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",
    "code": "demo-html",
    "name": "demo-html",
    "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>"
    }
}

Fetch and display data from external APIs:

Configuration example:

{
    "widgetType": "api",
    "code": "demo-openapi-url",
    "name": "demo-openapi-url",
    "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"
    },
}

Properties

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.

Widgets Customization

Chart Widgets

Bar Chart Widget

Properties

Datasources

Mapping

Donut Chart Widget

Properties

Datasources

Mapping

Data Table widget

Variables

Properties

Datasources

Mapping

Input Widgets

Datasources

Mapping

Date picker Widget

Refresh button Widget

Markdown widget

template

Html widget

template

Open API Widget

Properties

Chart Widgets​

Bar Chart Widget​

Properties​

Datasources​

Mapping​

Donut Chart Widget​

Properties​

Datasources​

Mapping​

Data Table widget​

Variables​

Properties​

Datasources​

Mapping​

Input Widgets​

Search box Widget​

Dropdown Widget​

Datasources​

Mapping​

Date picker Widget​

Refresh button Widget​

Markdown widget​

template​

Html widget​

template​

Open API Widget​

Properties​

Chart Widgets

Bar Chart Widget

Properties

Datasources

Mapping

Donut Chart Widget

Properties

Datasources

Mapping

Data Table widget

Variables

Properties

Datasources

Mapping

Input Widgets

Search box Widget

Dropdown Widget

Datasources

Mapping

Date picker Widget

Refresh button Widget

Markdown widget

template

Html widget

template

Open API Widget

Properties