GBC 5.01.05 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.

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.

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:

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:

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.)

New MainContainer theme variables

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.

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.

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

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

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.

New close action for applications in the sidebar

Hover over any application in the sidebar to reveal an X. Click the X to trigger the close action.