Customizing the Default Widgets

Platform widgets are developed using Angular framework and Clarity HTML/CSS framework. If you are not familiar with Angular development here are some useful links:

Most of the Platform Widgets can be customized by implementing custom GeneWidgetControllers. These controllers let you override part of the Widgets default behaviors, such as titles, buttons, menu items, data loading, etc.

When a project is created, the web modules contains samples of custom GeneWidgetControllers for the different widgets under the following folder web/src/app/module/sample-controllers.

For example, it is possible to override the colors generated to represent entities. This can be done by registering an implementation of GeneColorPalette associated to an entity type, or by setting the color hint for entities by specifying the corresponding business key. In the following example, a custom color is set for one Plant, and will be used in tables, instance pickers and charts (provided that the category field is set to Plant instance). More examples are available in SampleControllersModule.

        colorService.setEntityColorHint('Plant', [
            {fieldName:'plantId', fieldValue:'Paris'},
            {fieldName:'country.id', fieldValue:'FRA'},
        ], '#765fb6');

When we need to write a custom widget controller, we need to check a few things. First, the widget needs to support custom widget controllers. This capability it declared in the widget Manifest.

export interface GeneWidgetManifest {

    ...

    /**
     * When true the widget supports providing custom controllers
     */
    supportsCustomController?: boolean;
}

When a Widget is compatible with custom Controllers, it usually provides a specific interface to override some of its specific behaviors (in addition to standard title, buttons and menu items customizations). The corresponding interface can be found in the Widget documentation or declaration.

Here is a list of compatible widgets and their controller classes:

  • GeneKpiComponent (using GeneKpiController controller class)

  • GeneTableComponent (using GeneTableController controller class)

  • GeneChartComponent (using GeneChartController controller class)

  • GeneNavigationButtonComponent (using GeneNavigationButtonController controller class)

  • GeneDataExplorerComponent (using DefaultWidgetController controller class)

  • GeneJobDetailsComponent (using DefaultWidgetController controller class)

  • GeneJobListComponent (using DefaultWidgetController controller class)

  • GenePivotTableComponent (using DefaultWidgetController controller class)

  • GeneScenarioListComponent (using DefaultWidgetController controller class)

  • GeneScenarioTimelineComponent (using DefaultWidgetController controller class)

  • GeneWorkspaceListComponent (using DefaultWidgetController controller class)

Note: All widgets inheriting from GeneBaseDataWidget are supporting custom controllers implementing DefaultWidgetController, with a minimal customization of title, buttons and menu items.