GBC 5.01.05 new features and upgrade notes

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

Important:

Release 5.01.05 includes updates to the UX/UI that may affect the user experience. We recommend reviewing and testing the release to assess any impact before deploying. If you identify issues that require you to stay on version 5.01.04, please contact your support center to request interim fixes.

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.05 changes, please refer to the list of fixes on our issue tracker.

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

UX-UI improvements

Starting with the release of version 5.01.05, the GBC main interface has undergone significant rework and improvements to enhance user experience and align with modern best practices in page layout responsiveness.

  • SideBarRail: The permanent thin sidebar provides quick access to the application list, featuring either application icons or abbreviations of application names.

    You can control the SideBarRail visibility via the applicationListVisible 4st variable. For more information, refer to UserInterface style attributes page in the Genero Business Development Language User Guide.

    The following new theme variables have been added to support the SideBarRail:

    Variable Description
    $gbc-SideBarRail-width Defines the sidebar rail width.
    $gbc-SideBarRail-color

    Defines the sidebar rail text color.

    $gbc-SideBarRail-background-color Defines the sidebar rail background color.
  • SideBarDrawer: The start menu sidebar is activated via the App Grid Icon ("nine-squares" icon) at the top left of the interface. It displays the application list with full names and includes the StartMenu. The SideBarDrawer floats but can also be pinned for easier access. For more information on the sidebars, go to Application page.

    The APPLICATION and STARTMENU categories can be collapsed or expanded, with APPLICATION collapsed by default when there is a STARTMENU.

    The following new theme variables have been added to support the SideBarDrawer:
    Table 1. SideBarDrawer specific variables
    Variable Description
    $gbc-SideBarDrawer-min-width

    Defines the sidebar drawer min width.

    $gbc-SideBarDrawer-max-width

    Defines the sidebar drawer max width.

    $gbc-SideBarDrawer-width

    Defines the sidebar drawer width.

    $gbc-SideBarDrawer-z-index Defines the floating panel z-index.
    $gbc-SideBarDrawer-color Defines the sidebar drawer text color.
    $gbc-SideBarDrawer-background-color Defines the sidebar drawer background color.
    $gbc-SideBarDrawer-AppsSection-show Controls the visibility of the APPS section in the SideBarDrawer.
    The following new theme variables have been added to support the StartMenu:
    Table 2. StartMenuWidget spaces
    Variable Description
    $gbc-StartMenuWidget-item-height Defines the height of the items in the StartMenu.
    $gbc-StartMenuWidget-icon-height Defines the height of the item icons in the StartMenu.
    $gbc-StartMenuWidget-item-indent Defines the StartMenu group content indentation.
    Table 3. StartMenuWidget state layer
    Variable Description
    $gbc-StartMenuItemWidget-hover-color Defines the overlay color of hovered StartMenuWidget item.
    $gbc-StartMenuItemWidget-active-border-width Defines the outline width of active StartMenuWidget item.
    $gbc-StartMenuItemWidget-active-color Defines the outline color of active StartMenuWidget item.
    $gbc-StartMenuItemWidget-focus-border-width Defines the outline width of focused StartMenuWidget item.
    $gbc-StartMenuItemWidget-focus-color Defines the outline color of focused StartMenuWidget item.
    Table 4. StartMenuItemWidget spaces
    Variable Description
    $gbc-StartMenuItemWidget-vertical-padding Define the top and bottom padding of items in the StartMenu.
    $gbc-StartMenuItemWidget-indent Define the left space for sub items.
  • Quick Close Button: You can close any application item in both the SideBarRail and the SideBarDrawer by hovering over it to reveal a small close button. This allows you to execute the close action for the current dialog, just like the close icon in the ChromeBar.
  • StartMenu persistence: Once created by an application, the StartMenu remains visible across all other applications. It is no longer limited to its parent application. If the application that created the StartMenu is deleted, the StartMenu disappears everywhere.

  • TopMenu appearance update: When TopMenu is set as "sidebar" for topmenuDesktopRendering and topmenuMobileRendering, it now appears in a dropdown instead of the left sidebar. The left "3-dots" icon in the Chromebar remains active to display it. For more information on TopMenu, go to Application page.

  • Back button icon in Chromebar: When a "back" Action is active, it now appears as a left arrow icon in the Chromebar next to the title, instead of as a button in the action panel.

  • Chromebar upgrade: The Chromebar has been upgraded from a widget perspective to a component perspective, while maintaining its overall appearance . This change, along with updates to other page layout placeholders, enhances functionality and performance. For an upgrade guide on the these changes. go to Chromebar changes section.

  • Overflow panel: The right sidebar displays all Chromebar actions that overflow the screen width, ensuring that users have access to all available options.

  • Windowlist removal: The windowlist has been temporarily removed from the Chromebar in this release, as it is undergoing improvements.

  • Enhanced modal window management: Multiple modal windows can now be viewed on top of the normal (non-modal) window, while the normal window continues to be displayed underneath. Each modal window is stacked on top, similar to any standard windowing system.

Main changes in GBC customization

There is a change in concept from widget to component that affects the GBC Main Page layout in particular. The sections on this page are now seen as components and are controlled differently, which will have implications for customizations.

Until now, the sections listed here were defined as widgets; however, they are now simply HTML elements controlled by a global service, MainContainerService.
  1. Main Container
  2. Chromebar
  3. Sidebars
  4. Overflow panel

The focus for customization will no longer be on overriding widgets and managing their lifecycle. Instead, static services are used to control a static page layout.

To this end, numerous theme variables have been reworked to allow you to customize these sections using just theme variables. You can change margins, padding, and item spacing in the application, as well as reduce spacing in sidebars.

New theme variables have also been added to control the display of sections like the Chromebar and the "Applications" section of the SideBarDrawer. The key variables include:
  • $gbc-ChromeBar-show: This variable can be used to control the visibility of the Chromebar. The default value for this variable is TRUE, except when using GDC-UR.

  • $gbc-ChromeBar-flow-gbc-items: When set to TRUE, the GBC menu items in the Chromebar will shift to the right sidebar if there is insufficient space and they overflow. This option is FALSE by default. For more details on the changes to the Chromebar, go to Chromebar changes

  • $gbc-SideBarDrawer-AppsSection-show: This variable hides the "Application" section of the SideBarDrawer. Since application items are already accessible in the SideBarRail, hiding this section can help the SideBarDrawer focus solely on displaying the StartMenu. By default, this setting is enabled.

Removed, updated, and added classes

As described in Main changes in GBC customization, the GBC main page layout was primarily managed by widgets, but it is now mostly managed by static services. This new architecture has allowed us to simplify and refactor much of the code, resulting in the removal of many classes that can no longer be used. Here is a list of the major classes which have been updated, removed, or added and which may impact existing customizations:

Note:

This list isn’t exhaustive. Only main files that are used in customization have been listed, but many more internal classes have been removed or updated.

Table 5. Removed classes
Removed Comment
ApplicationHostSidebarBackdropWidget Unused class
ApplicationHostSidebarWidget Unused class
ChromeBarItemBackButtonWidget Unused class
ChromeBarLayoutEngine Unused class
ChromeBarTitleWidget Unused class
ChromeBarWidget Unused class
ChromeRightBarWidget Unused class
HostLeftSidebarService Unused class
RSidebarApplistWidget Unused class
RSidebarTopMenuWidget Unused class
RSidebarWidget Unused class
SessionSidebarApplicationItemWidget Unused class
SessionSidebarApplicationStackItemWidget Unused class
SessionSidebarApplicationStackListWidget Unused class
SessionSidebarWidget Unused class
SessionSidebarWindowItemWidget Unused class
Table 6. Updated classes
Updated Comment
MainContainerWidget.tpl.html Changes to the HTML structure.
Table 7. Added service classes
Added Comment
ApplicationListService.js Service dedicated to navigation management. It displays app items (icon & text) for each running application in the SideBarRail and SideBarDrawer.
ChromeActionService.js Service responsible for managing Chromebar items for Genero actions in the action panel or in back button.
MainContainerService.js A static service providing helper methods to control, add, update, and remove content in different "static" areas of the main page. See New MainContainerService
NavigationButtonService.js Service responsible for the navigation button behavior. It creates/destroys buttons depending on available actions.
StartMenuService.js Service dedicated to managing start menu elements in the SideBarDrawer.
TopMenuService.js Service dedicated to managing TopMenus.
WindowListService.js Service dedicated to managing the window list.

New MainContainerService

The MainContainerService JavaScript class is a static service which provides helper methods to control, add, update, and remove content in different "static" areas of the main page, such as Chromebar and Sidebars.

The MainContainerService is independent of Genero business rules and solely provides entry points for managing various placeholders. Its method names do not reference business titles like "ApplicationList"; instead, it uses purely placeholder names such as "SideBarRail", "SideBarDrawer", and "ChromeBarStartContainer".

To understand the DOM elements referenced by this service, you should examine the HTML structure in the MainContainerWidget.tpl.html file.

The MainContainerService is utilized internally by other services (refer to Table 7) to populate the application list in the SideBarRail and SideBarDrawer, update the Chromebar (including title and actions), add the StartMenu in the SideBarDrawer, manage overflow actions in the Chromebar, and handle the back button, among other functions.

New MainContainerWidget theme variable

The following new theme variables have been added to support the MainContainerWidget:

Variable Description
$gbc-MainContainerWidget-icon-size

Defines the ChromeBar and SideBar font size for icons.

$gbc-MainContainerWidget-z-index

z-index for MainContainer.

Chromebar changes

Name change

Note that the variables for the ChromeBar have been renamed from gbc-ChromeBarWidget-* to gbc-ChromeBar-*.

This change reflects the fact that, from a strict GBC implementation perspective, the ChromeBar is not a widget but rather a component of the MainContainerWidget.

We advice you to use the new naming for the theme variables but your current customization should work without making these changes.

Table 8. New gbc-ChromeBar variables
Variable Alias (for compatibility)
$gbc-ChromeBar-height $gbc-ChromeBarWidget-height
$gbc-ChromeBar-item-height

$gbc-ChromeBarWidget-item-height

$gbc-ChromeBar-item-toggle-margin $gbc-ChromeBarWidget-item-toggle-margin
$gbc-ChromeBar-title-margin $gbc-ChromeBarWidget-title-margin
$gbc-ChromeBar-item-spacing $gbc-ChromeBarWidget-item-spacing
$gbc-ChromeBar-visible-items $gbc-ChromeBarWidget-visible-items
$gbc-ChromeBar-flow-gbc-items $gbc-ChromeBarWidget-flow-gbc-items
$gbc-ChromeBar-item-error-color $gbc-ChromeBarWidget-item-error-color

Apart from renaming of the existing variables, we have added the following new theme variable:

Variable Description
$gbc-ChromeBar-color Defines the ChromeBar text color.
$gbc-ChromeBar-background-color

Defines the ChromeBar background color.

$gbc-ChromeBar-pin-close-button Enabled or disabled the Close button in the ChromeBar. When enabled, ChromeBar icons do not overflow.
$gbc-ChromeBar-show Enable or disable the visibility of the ChromeBar.

Following variables are removed:

  • gbc-ChromeBarWidget-inactive-window-background-color
  • gbc-ChromeBarWidget-right-item-height
  • gbc-ChromeBarWidget-right-item-margin
  • gbc-ChromeBarWidget-right-item-image-margin

New FloatingPanel theme variables

The following new theme variables have been added to support the Chromebar overflow menu and the TopMenu when displayed in the sidebar (when the TopMenu displays as a drop-down menu.)

Variable Description
$gbc-FloatingPanel-min-width Defines the floating panel min width.
$gbc-FloatingPanel-max-width Defines the floating panel max width.
$gbc-FloatingPanel-z-index Defines the floating panel z-index.
$gbc-FloatingPanel-color Defines the floating panel text color.
$gbc-FloatingPanel-background-color Defines the floating panel background color.

New MainContainer theme variables

The following new theme variables have been specifically added to support the UX changes to areas of the main page.
Variable Description
$gbc-MainContainerWidget-icon-size Defines the ChromeBar and SideBar font size for icons
$gbc-MainContainerWidget-z-index Defines the z-index (stacking order of elements) in the MainContainer.

New gbc create-test command

The gbc create-test command generates a base .spec.ts file for writing TestCafe tests in a GBC project.

This command helps quickly scaffold new test files that follow the expected structure and import the necessary GBC test utilities.

You can 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 argument, type:
gbc create-test --help

To use this tool to generate a test, the command is:

gbc create-test testname [ customApp ]
  • testname: The name of the test or full path (for example, GBC-1234 or tests/mydir/GBC-1234.spec.ts)
  • customApp: Is optional. The name of the Genero sample app the test targets.

For more information and examples of use, go to the gbc tool page.

New gbc testcafe command

The gbc testcafe command runs tests using TestCafe, with configuration adapted to GBC projects. It simplifies the execution of automated tests in your customization environment.

You can 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 argument, type:
gbc testcafe --help

To use this tool to run a specific test file (for example, myTest.spec.ts), the command is:

gbc testcafe -f myTest 

For more information and examples of use, go to the gbc tool page.

New gbc testcase command

The gbc testcase command compiles and deploys one or more testcases (.xcf) for your GBC project. It takes care of:
  • Compiling Genero source (.4gl) and form (.per) files.
  • Building a Genero Archive (.gar).
  • Deploying the Genero Archive to the GAS using the gasadmin command.

You can execute the tool from the command line of the folder where your tests are located in your GBC project.

To display help and get more details about the tool's options and arguments, type:
gbc testcase --help

To use this tool to compile and deploy testcases matching a name filter (for example, myTestcase.xcf because a testcase must include a .xcf configuration file) the command is:

gbc testcase -f myTestcase 

For more information and examples of use, go to the gbc tool page.