Override widget instantiation

You can override the instantiation of widgets in the theme configuration file, theme.config.json, by using the widgetFactory section.

The widgetFactory section maps widget names to their corresponding classes, indicating to the theme which version of a widget to use. By overriding the entries that define each widget, you can specify custom implementations for your theme. For example:

{
"widgetFactory": {
    "DateEdit": "cls.MyDateEditWidget",
    "SpinEdit": "cls.MyCustomSpinerWidget"
  }
}

In this example, all new instances of the specified widgets are replaced with the defined versions. For more information on widgetFactory and its use in theme configuration, go to theme.config.json file.

In this task, you will change the default theme for mobile devices regarding widget instantiation. Instead of using the standard mobile widget for DateTimeEdit, you will revert to the default GBC DateTimeEdit widget.

The GBC DateTimeEdit widget is often preferred because it offers a more ergonomic design and is easier to use, particularly when entering historical dates, such as dates of birth.

Steps

  1. Navigate to the theme.config.json file located in the gbc-project-dir/theme/platform/mobile directory
  2. Remove the theme setting for cls.DateEditMobileWidget.
    Before:
    {
      "conditions": ["isMobile"],
      "widgetFactory": {
        "DateEdit": "cls.DateEditMobileWidget",
        "DateTimeEdit": "cls.DateTimeEditMobileWidget",
        "TimeEdit": "cls.TimeEditMobileWidget",
        "SpinEdit": "cls.SpinEditMobileWidget"
      }
    }
    
    After:
    {
      "conditions": ["isMobile"],
      "widgetFactory": {
        "DateEdit": "cls.DateEditMobileWidget",
        "TimeEdit": "cls.TimeEditMobileWidget",
        "SpinEdit": "cls.SpinEditMobileWidget"
      }
    }
    
  3. Save your changes and rebuild your customization:
    $ gbc build --customization customization-project-dir

    All new instances of the DateTimeEdit widget for mobile will use the default GBC DateTimeEdit widget.