---
title: "AbstractWidget"
slug: "abstract-widget"
updated: 2025-02-24T08:33:47Z
published: 2025-02-24T08:33:47Z
canonical: "learn.servitly.com/abstract-widget"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://learn.servitly.com/llms.txt
> Use this file to discover all available pages before exploring further.

# AbstractWidget

`AbstractWidget` is a base class that provides common functionality and helper methods for defining widgets, it can be extended by concrete widget classes that implement specific UI elements (e.g. charts, tables, diagrams).

Here is an example of how to inherit from the `AbstractWidget` class.

```javascript
class MyCustomWidget extends AbstractWidget {
    
    constructor(config) {
        super(config);
    }

    onInit(context) {
        return super.onInit(context).then(function () {
            // do initialization stuff            
        }).catch(error => {
            // handle error            
        });
    }

    onDestroy(context) {
       super.onDestroy();
       // dispose allocated resources
    }
}
```

You can find more details about how to define widgets into this [article](/docs/editing-a-widget).

By extending the abstract widget class you can leverage these methods:

| *addPeriodPicker(container, options, callback, context)* | Create a period picker embedded in the widget. For more details refer to `createPeriodPicker(…)` *method in the* [App Utils](/docs/app-utils) class. |
| --- | --- |
| *hideMessage()* | Hides the displayed message added by the `showMessage` *or* `showError` methods. |
| *loadMetricDefinitions(context, resolve, reject)* | Enriches the template metrics, accessible in the `Context.metrics` object, with the referenced metric definitions. This can be helpful, in case you need to display data by using metric information not present in the template (e.g. dictionary, ranges). |
| *setLoaderVisible(visible)* | Shows or hides the overlay spinner during asynchronous data loading according to the `visible` flag. |
| *showError(error)* | Displays an `error` message (e.g. Unable to load data). |
| *showMessage(text, severity)* | Displays a `text` message with a colored badge with a certain `severity` (*info, warning, danger*). |
| *showNoDataAvailable()* | Displays the `No data available` message. |