When creating own widgets, you typically start off by creating a custom widget type. As described in the previous sections, the dashboard is configured in terms of columns and widget states. Each widget state carries a widget type id which associates it with its widget type. In order to get from widget states to the actual widget instances shown on the dashboard, the different widget types are consulted. A widget type is responsible for creating the widget components from their associated widget states.

You could define your own widget type by creating a class from scratch that implements the interface WidgetType. However, a convenient default implementation ComponentBasedWidgetType, is provided out of the box. For many cases it is sufficient to just use it or to let let your own widget type extend it. In order to do so, you have to define a widget component that defines the UI for widgets of your new widget type. For instance, the predefined SimpleSearchWidgetType is simply defined as follows:

import Config from "@jangaroo/runtime/Config";
import ConfigureDashboardPlugin from "@coremedia/studio-client.main.editor-components/sdk/dashboard/ConfigureDashboardPlugin";
import ComponentBasedWidgetType from "@coremedia/studio-client.main.editor-components/sdk/dashboard/ComponentBasedWidgetType";
import SimpleSearchWidget from "@coremedia/studio-client.main.editor-components/sdk/dashboard/widgets/search/SimpleSearchWidget";

//...
new ConfigureDashboardPlugin({
  //...

  types: [
    new ComponentBasedWidgetType({
      name: "...",
      description: "...",
      iconCls: "...",
      widgetComponent: Config(SimpleSearchWidget),
    }),
  ],
})

Besides setting the parameters name, description and iconCls, the widget component SimpleSearchWidget is set. The SimpleSearchWidget can be configured with the parameters searchText and contentType in order to show a corresponding search result. Executing the search and obtaining the search results is carried out in the base class SimpleSearchWidgetBase. When extending that class, a value expression that references the search result can be obtained via getContentValueExpression() and is used by a WidgetContentList to display the result.

There is one further important aspect concerning the base class SimpleSearchWidgetBase. It implements the Reloadable interface. This indicates that a reload button should be placed in the widget header, calling the widget's reload() method for refreshing the widget's contents. In this case, the base class simply triggers a new search.