GBC 5.01.04 new features and upgrade notes

A summary of new features and changes in functionality introduced with Genero Browser Client (GBC) 5.01.04. Note the changes you may need to make when moving to this version of the GBC.

Important:

This page covers only those new features introduced with the Genero Browser Client version specified in the page title. Check prior new features pages if you migrate from an earlier version.

For a detailed list of GBC 5.01.04 changes, please refer to the list of fixes on our issue tracker.

Previous new features page: GBC 5.01.03 new features and upgrade notes.

New theme framework

This new framework is changing how theme variables are organized, named, and how they interact. We advice you to use the new naming for the theme variables as described below but your current customization should work without making these changes.

Concepts

New UI design concepts were introduced with this new theme framework in an effort to improve design consistency and to help make it as easy as possible for users to understand and navigate your apps. Furthermore, the UI design concepts will help you customize the GBC.

Theme variables are organized into layers, forming a hierarchy

This reorganization involves renaming and recategorizing the variables into layers and groups. This may not alter your approach to customizing the GBC, but it could provide you with new insights to enhance your customization process.

Top UI designer layer: This new top layer introduces variables in the ui-* namespace, which map to the existing theme-* variables, providing a foundation for UI customization.
UI Toolkit layer: This layer contains variables in the mt-* namespace, establishing a base for themes and styles that are applied to Genero application widgets.
Genero widgets layer: This layer features variables in the gbc-* namespace, enabling customization of Genero and GBC widgets within your application.

For more details on these changes, go to Theme variables overview.

Variable naming consistency

Variable names are defined more consistently in the format [name-space]-[identifier].

name-space is mainly ui, mt, or gbc.
identifier is a dash-separated name.

For example, where previously gbc-DateEdit-color was set with theme-secondary-color, it is now set with ui-text-icon-color instead.

What is changing

Previous customizations should not be affected by this new framework, as every old theme variable has been kept as an alias.

Note:

Old variables are still valid, but they are deprecated and will be subject to disappear. If you have customizations, don't hesitate to change variables names to fit the new ones.

For more information about theme variables, see Theme variables reference.

Deprecated theme variables

The theme-* namespace is now deprecated. This namespace contained variables that allowed you to apply customization settings globally to the user interface (UI) and to specific widgets. It has been replaced by the ui-* namespace.

The existing theme-* variables serve as aliases for the ui-* variables, allowing you to continue using them. However, if you have customizations, feel free to update the variable names to match the new ones.

For more information about ui variables, see General styling.

New gbc-* variables

Each table in this section illustrates the relationship between the new $gbc variables and their old theme-related corresponding aliases.

Table 1. New gbc-* variables
Variable	Alias (for compatibility)
`$gbc-css-prefix`	`mdi-css-prefix`
`$gbc-cust-icons`	`mdi-cust-icons`
`$gbc-droid-font-path`	`droid-font-path`
`$gbc-font-path`	`mdi-font-path`
`gbc-max-icon-size`	`theme-max-icon-size`
`gbc-small-icon-size`	`theme-small-icon-size`

Table 2. `New gbc-action-name-backward-compatibility variable`
Variable	Alias (for compatibility)
`gbc-action-name-backward-compatibility`	`theme-action-name-backward-compatibility`

Table 3. `New gbc-border variables`
Variable	Alias (for compatibility)
`gbc-border-xs`	`theme-border-xs`
`gbc-border-s`	`theme-border-s`
`gbc-border-m`	`theme-border-m`

Table 4. New gbc-CheckBoxWidget-checkbox-size variable
Variable	Alias (for compatibility)
`gbc-CheckBoxWidget-checkbox-size`	`theme-checkbox-size`

Table 5. New `gbc-ChromeBarWidget-inactive-window-background-color` variable
Variable	Alias (for compatibility)
`gbc-ChromeBar-inactive-window-background-color`	`theme-chromebar-inactive-window-background-color`

Table 6. `New gbc-ComboBoxWidget-* Variables`
Variable	Alias (for compatibility)
`gbc-ComboBoxWidget-margin`	`theme-combobox-margin`
`gbc-ComboBoxWidget-padding`	`theme-combobox-padding`

Table 7. `New gbc-default-reduceFilter` variable
Variable	Alias (for compatibility)
`gbc-default-reduceFilter`	`theme-default-reduceFilter`

Table 8. New gbc-disable-context-menu variable
Variable	Alias (for compatibility)
`gbc-disable-context-menu`	`theme-disable-context-menu`

Table 9. New gbc-disable-ending-popup variable
Variable	Alias (for compatibility)
`gbc-disable-ending-popup`	`theme-disable-ending-popup`

Table 10. New gbc-enable-degraded-mode-alerts variable
Variable	Alias (for compatibility)
`gbc-enable-degraded-mode-alerts`	`theme-enable-degraded-mode-alerts`

Table 11. New gbc-grid-* variables
Variable	Alias (for compatibility)
`gbc-grid-inner-gutter`	`theme-grid-inner-gutter`
`gbc-grid-inner-gutter-x`	`theme-grid-inner-gutter-x`
`gbc-grid-inner-gutter-y`	`theme-grid-inner-gutter-y`

Table 12. New gbc-GroupWidget-collapser-position variable
Variable	Alias (for compatibility)
`gbc-GroupWidget-collapser-position`	`theme-collapser-position`

Table 13. `New gbc-MessageWidget-* variables`
Variable	Alias (for compatibility)
`gbc-MessageWidget-background-color`	`theme-message-background-color`
`gbc-MessageWidget-color`	`theme-message-color`
`gbc-MessageWidget-error-color`	`theme-error-color`
`gbc-MessageWidget-error-display-position`	`theme-error-display-position`
`gbc-MessageWidget-error-display-time`	`theme-error-display-time`
`gbc-MessageWidget-message-display-time`	`theme-message-display-time`
`gbc-MessageWidget-message-display-position`	`theme-message-display-position`

Table 14. New gbc-network-* variables
Variable	Alias (for compatibility)
`gbc-network-use-credentials-headers`	`theme-network-use-credentials-headers`
`gbc-network-retry-on-error`	`theme-network-retry-on-error`
`gbc-network-retry-timeout`	`theme-network-retry-timeout`

Table 15. New gbc-radiobutton-size variable
Variable	Alias (for compatibility)
`gbc-radiobutton-size`	`theme-radiobutton-size`

Table 16. `New gbc-radius-* variables`
Variable	Alias (for compatibility)
`gbc-radius-s`	`theme-radius-s`
`gbc-radius-m`	`theme-radius-m`

Table 17. New gbc-responsive-* variables
Variable	Alias (for compatibility)
`$gbc-responsive-small-width`	`$responsive-small-width`
`$gbc-responsive-medium-width`	`responsive-medium-width`

Table 18. New gbc-scrollers-* variables
Variable	Alias (for compatibility)
`gbc-scrollers-clickonly`	`theme-scrollers-clickonly`
`gbc-scrollers-speed`	`theme-scrollers-speed`

Table 19. `New gbc-space-* variables`
Variable	Alias (for compatibility)
`gbc-space-xxs`	`theme-space-xxs`
`gbc-space-xs`	`theme-space-xs`
`gbc-space-s`	`theme-space-s`
`gbc-space-m`	`theme-space-m`
`gbc-space-l`	`theme-space-l`
`gbc-space-xl`	`theme-space-xl`

Table 20. New gbc-SplitterWidget-splitter-size variable
Variable	Alias (for compatibility)
`gbc-SplitterWidget-splitter-size`	`theme-splitter-size`

Table 21. New gbc-table-* variables
Variable	Alias (for compatibility)
`gbc-table-default-widget`	`theme-table-default-widget`
`gbc-table-minimal-row-height`	`theme-table-minimal-row-height`
`gbc-table-minimal-row-height-on-touchscreen`	`theme-table-minimal-row-height-on-touchscreen`
`$gbc-TableWidget-table-margin`	`theme-table-margin`

Table 22. New gbc-traditional-mode-letter-spacing variable
Variable	Alias (for compatibility)
`gbc-traditional-mode-letter-spacing`	`theme-traditional-mode-letter-spacing`

New html-* variables

Each table in this section illustrates the relationship between the new $html variables and their old theme-related corresponding aliases.

Table 23. `New html-selection-* variables`
Variable	Alias (for compatibility)
`html-selection-text-color`	`theme-selection-text-color`
`html-selection-background-color`	`theme-selection-background-color`

Table 24. New html-webkit-* variables
Variable	Alias (for compatibility)
`html-webkit-scollbars-global-enable`	`theme-webkit-scrollbars-global-enable`
`html-webkit-scollbars-size`	`theme-webkit-scrollbars-size`
`html-webkit-scollbars-color`	`theme-webkit-scrollbars-color`

New mt-* variables

Each table in this section illustrates the relationship between the new $mt variables and their old theme-related corresponding aliases.

Table 25. `New mt-button-default-width`
Variable	Alias (for compatibility)
`mt-button-default-width`	`theme-button-default-width`

Table 26. `New mt-field-* variables`
Variable	Alias (for compatibility)
`mt-field-border-color`	`theme-field-border-color`
`mt-field-default-height`	`theme-field-default-height`
`mt-field-disabled-background-color`	`theme-field-disabled-background-color`
`mt-field-input-padding-top`	`theme-field-input-padding-top`
`mt-field-input-padding-right`	`theme-field-input-padding-right`
`mt-field-input-padding-bottom`	`theme-field-input-padding-bottom`
`mt-field-input-padding-left`	`theme-field-input-padding-left`
`mt-field-readonly-background-color`	`theme-field-readonly-background-color`
`mt-field-textarea-padding-top`	`theme-field-textarea-padding-top`
`mt-field-textarea-padding-right`	`theme-field-textarea-padding-right`
`mt-field-textarea-padding-bottom`	`theme-field-textarea-padding-bottom`
`mt-field-textarea-padding-left`	`theme-field-textarea-padding-left`

Table 27. `New mt-field-active-* variables`
Variable	Alias (for compatibility)
`mt-field-active-border-width`	`theme-active-border-width`
`gbc-mt-field-active-color`	`theme-active-color`
`mt-field-active-color-on-color`	`theme-active-color-on-color`
`mt-field-active-opacity`	`theme-active-opacity`
`mt-field-active-opacity-on-color`	`theme-active-opacity-on-color`

Table 28. `New mt-field-focus-* variables`
Variable	Alias (for compatibility)
`mt-field-focus-border-width`	`theme-focus-border-width`
`mt-field-focus-color`	`theme-focus-color`
`mt-field-focus-color-on-color`	`theme-focus-color-on-color`
`mt-field-focus-opacity`	`theme-focus-opacity`
`mt-field-focus-opacity-on-color`	`theme-focus-opacity-on-color`

Table 29. New *-field-hover-* variables
Variable	Alias (for compatibility)
`mt-field-hover-outline-width`	`theme-hover-border-width`
`gbc-mt-field-hover-color`	`theme-hover-color`
`mt-field-hover-opacity`	`theme-hover-opacity`
`mt-field-hover-opacity-on-color`	`theme-hover-opacity-on-color`

Table 30. New mt-field-placeholder-color variable
Variable	Alias (for compatibility)
`mt-field-placeholder-color`	`theme-placeholder-color`

Table 31. New mt-list-currentrow-* variables
Variable	Alias (for compatibility)
`mt-list-currentrow-color`	`theme-currentrow-color`
`mt-list-currentrow-background-color`	`theme-currentrow-background-color`

Table 32. `New mt-sidebar-*` variables
Variable	Alias (for compatibility)
`mt-sidebar-always-visible-min-width`	`theme-sidebar-always-visible-min-width`
`mt-sidebar-animation-duration`	`theme-animation-duration`
`mt-sidebar-item-color`	`theme-sidebar-color`
`mt-sidebar-background-color`	`theme-sidebar-background-color`
`mt-sidebar-default-width`	`theme-sidebar-default-width`
`mt-sidebar-max-width`	`theme-sidebar-max-width`
`mt-sidebar-settings-color`	`theme-sidebar-settings-color`
`mt-sidebar-show-child-name`	`theme-sidebar-show-child-name`
`mt-sidebar-title-color`	`theme-sidebar-title-color`

Table 33. New mt-toolbar-item-height variable
Variable	Alias (for compatibility)
`mt-toolbar-item-height`	`theme-host-action-default-height`

New UI variables

Each table in this section illustrates the relationship between the new $ui variables and their old theme-related corresponding aliases.

Table 34. New UI variables
Variable	Alias (for compatibility)
`ui-primary-color`	`theme-primary-background-color`
`ui-primary-color-emphasized`	`theme-primary-emphasis-background-color`
`ui-primary-color-faded`	`theme-primary-faded-background-color`
`ui-on-primary-color`	`theme-primary-color`
`ui-background-color`	`gbc-primary-background-color` and `theme-secondary-background-color`
`ui-background-color-disabled`	`theme-disabled-background-color`
`ui-field-color`	`theme-field-background-color`
`ui-container-color`	`theme-secondary-alternative-background-color`
`ui-border-color`	`theme-separator-color`
`ui-text-icon-color`	`theme-secondary-color`
`ui-text-icon-color-disabled`	`theme-disabled-color`
`ui-text-icon-color-faded`	`theme-secondary-faded-color`
`ui-overlay-color`	`theme-overlay-background-color`
`ui-error-color`	`theme-error-background-color`
`ui-font-family`	`theme-font-family`
`ui-font-family-monospace`	`theme-font-family-monospace`
`ui-density`	No associated alias.

Table 35. New derivated UI variables
Variable	Alias (for compatibility)
`ui-primary-color-emphasized`	`$gbc-primary-medium-color, theme-primary-emphasis-background-color`
`ui-primary-color-faded`	`$gbc-primary-light-color, theme-primary-faded-background-color`
`ui-background-color-disabled`	`$gbc-disabled-color, theme-disabled-background-color`
`ui-container-color`	`$gbc-secondary-background-color, theme-secondary-alternative-background-color`
`ui-text-icon-color-faded`	`$theme-secondary-faded-color`
`ui-text-icon-color-disabled`	`$theme-disabled-color`
`ui-overlay-color`	`$theme-overlay-background-color`
`ui-field-height-ratio`	`$gbc-field-height-ratio, theme-field-height-ratio`
`ui-font-size-ratio`	`$gbc-font-size-ratio, theme-font-size-ratio`
`ui-margin-ratio`	`$gbc-margin-ratio, theme-margin-ratio`

Main color changes

New concepts were introduced with the new theme framework that affects colors.

Generated palettes are deprecated

The Main color palettes are now deprecated. Color schemes are now defined using the ui-*-color and widget specific color (gbc-*Widget-*-color) variables. Their defaults are hardcoded using RGB values or set with default values calculated from other ui-* color variables.

Color variables naming consistency

In previous versions of GBC, some complexity existed in variable naming and identifying what element they targetted.

We introduced new variables to have more consistency and to simplify the process. Variable names are now defined in a format that identifies their role and their target UI element.

In this system, you select a primary color (ui-primary-color ) to represent your brand and your primary color can also be used to accent UI elements by adjusting it using an algorithm to get variants, such as *-faded, *-emphasized, or *-disabled. For more details, go to the Optional top design layer. You can set the main color scheme for your application with the following variables:

ui-primary-color aims featured elements like buttons, toolbars, highlighted table rows.
ui-background-color defines the background color for your application.
ui-field-color aims form field backgrounds, including components like comboboxes, text edits, and text areas.
ui-text-icon-color defines the color for primary text and icons.

On colors

"On" colors are introduced in the context of Google Material Design. They refer to the colors used for elements, such as text or icons, that appear on top of surfaces with different colors. The "on" color for the primary color is defined by ui-on-primary-color.

For more details and usage examples, go to the Themes and colors page.

New front call variables

New gbc-frontcalls* variables have been introduced for managing device geolocation, implemented using the standard API GeoLocation.getCurrentPosition. For more details, see the MDN Geolocation options (external link). This API allows you to specify options such as timeout, position accuracy, and position aging. Additionally, new theme variables enable customization of these options.

Table 36. Frontcall variables
Variable	Comment
`gbc-frontcalls-blob-expiration-timeout`	Timeout (in seconds) after which a blob URI (generated by media front calls such as choosePhoto) will be revoked. Default: 300
`gbc-frontcalls-geolocation-enableHighAccuracy`	See MDN Geolocation options (external link). Default: false
`gbc-frontcalls-geolocation-timeout`	See MDN Geolocation options (external link). Default: 5000
`gbc-frontcalls-geolocation-maximumAge`	See MDN Geolocation options (external link). Default: 0

Front calls implemented for table width

We have introduced two new front calls designed to adjust the width of table columns when displayed. These front calls serve the same purpose as the actions you would typically perform by right-clicking on the table header and selecting "autofitAllColumns" or "fitToViewAllColumns." However, the advantage of using these front calls is that they can be invoked within a BEFORE DISPLAY block in your code.

Additionally, a new module named table.js has been created to support these front calls.

For more information on using these front calls, refer to the Table front calls section of the Genero Business Development Language User Guide. For examples of customizations using front calls, go to Customizing your application using front calls.

New `create-widget` command to generate a widget structure

The gbc tool now includes a new command, create-widget, aimed at simplifying the process of creating a widget. This command automatically generates all the essential files you need to get started, including the required JavaScript, template, and SCSS files.

You must execute the tool from the command line of a GBC project directory. To display help and get more details about the tool's options and arguments, type:

gbc create-widget --help

For example, to use this tool to generate a new widget based on WidgetBase (the default) in your myCusto customization, the basic command is:

gbc create-widget customization/myCusto MyCustomWidget

You can also extend any custom base widget (rather than using the default WidgetBase) to suit your specific needs. For more details and usage examples, go to the gbc tool page.

New SplitterWidget theme variable

A new theme variable, gbc-splitterWidget-performanceMode, has been introduced to enable a new mode for the SplitterWidget. This variable supports two values: realtime (default) and deferred.

In realtime mode, the SplitterWidget triggers a relayout or resize of the surrounding widgets while the splitter is being moved, which can lead to performance issues in complex forms.

In contrast, deferred mode prevents any relayout or resize of the surrounding widgets during the splitter's movement. Instead, a feedback rectangle is displayed, and the surrounding widgets are resized only after the splitter is released, at which point the feedback rectangle is also removed.

Deleted theme variables

The following variables, which were previously marked as deprecated or which have been unused in previous GBC releases, are now removed. The GBC build tool will raise an error if a customization sets them.

Table 37. Deleted theme variables
Variable	Comment
`theme-alternate-row-background-color`	Unused variable
`theme-chromebar-goto-active-window-background-color`	Unused variable
`theme-chromebar-goto-active-window-background-hover-color`	Unused variable
`theme-density-scale`	Unused variable
`theme-group-separation-size`	Unused variable
`theme-header-color`	Replaced by `ui-background-color` to initialize Accordion Folder widget background and window header.
`theme-hover-color-on-color`	Unused variable
`theme-primary-emphasis-color`	Unused variable
`theme-toggle-chromebar-min-width`	Unused variable
`theme-toggle-right-sidebar-min-width`	Unused variable

Table 38. Deleted gbc variables
Variable	Comment
`gbc-ChromeBarWidget-goto-back-active-window-background`	Unused variable
`gbc-ChromeBarWidget-goto-back-active-window-background-hover`	Unused variable
`gbc-FolderWidget-separator-color`	Unused variable
`gbc-GroupWidget-margin`	Unused variable
`gbc-GroupWidget-padding`	Unused variable
`gbc-MonitorDebug-*`	Unused variables
`gbc-primary-medium-color`	Unused variable
`gbc-primary-strong-color`	Unused variable
`gbc-secondary-color`	Using `ui-text-icon-color` instead
`gbc-TableWidget-margin`	Unused variable
`gbc-TableWidget-border-width-top`	Unused variable
`gbc-TableWidget-border-width-right`	Unused variable
`gbc-TableWidget-border-width-bottom`	Unused variable
`gbc-TableWidget-border-width-left`	Unused variable
`gbc-TableWidget-resizer-z-index`	Unused variable
`gbc-TableWidget-focus-border-width-top`	Unused variable
`gbc-TableWidget-focus-border-width-right`	Unused variable
`gbc-TableWidget-focus-border-width-bottom`	Unused variable
`gbc-TableWidget-focus-border-width-left`	Unused variable
`gbc-TableWidget-field-disabled-background-color`	Unused variable
`gbc-TableWidget-dnd-border-color`	Unused variable
`gbc-toggle-right-sidebar-min-width`	Unused variable