GBC 5.01.06 new features and upgrade notes

Support for the phoneEdit style attribute value

GBC supports international phone number decoration and input features for EDIT text input fields that have the customWidget style attribute to "phoneEdit". This style activates input helpers and visual decorations for international phone numbers, including country flags.

You can further customize the phoneEdit widget. One example of customization is changing the flag displayed when the form loads. By default, the phoneEdit widget shows a flag based on the user's IP address if the field is empty. To override this behavior, you can set the _initialCountry property in the PhoneEditWidget.js file, located at $GBC_DIR/src/js/base/widget/widgets/formfields/PhoneEditWidget.js. Assigning a specific country code, such as "fr" for France or "us" for the United States, explicitly defines which flag appears by default.

Another customization option is controlling which countries appear in the dropdown list. By default, the external phone library used by the widget includes all supported countries. To limit this list, configure the external phone library within the same file. Initialize the library with the onlyCountries option, which accepts an array of country codes to be displayed:

this._iti = tel(input, {
  initialCountry: this._initialCountry,
  separateDialCode: true,
  autoPlaceHolder: "aggressive",
  dropdownContainer: document.body,
  onlyCountries: ["fr", "de", "us", "mex", "gb"]
});

A demo application of the phoneEdit widget is provided within the tests/genero_samples directory of the GBC project package.

For more details on this presentation style, go to Phone number fields in the Genero Business Development Language User Guide.

Support for the tagEdit style attribute value

GBC supports multi-value input for EDIT and BUTTONEDIT input fields that have the customWidget style attribute to "tagEdit".

Tags are rendered as chips inside the edit field. The left and right arrow keys shift focus across tags. A single tag can be removed via the close icon (X) displayed on each chip. The Remove all icon clears all tags and appears only in tagEdit (not in ButtonTagEdit). In disabled state, the Remove all icon is hidden.

The Delete key removes the focused tag. The Backspace key removes the last tag in the input field.

{
  "gwc": {
    "main": {
      "tagedit": {
        "newTag": "(+)"
      }
    }
  }
}

A demo application of the tagEdit widget is provided within the tests directory of the GBC package.

For more details on this presentation style, go to Edit style attributes in the Genero Business Development Language User Guide.

New mt-* variables

The following variables are renamed to be consistent with naming use in ui-* variables:

Removed mt-* variables

Update to mt-toolbar-item-height variable

The $mt-toolbar-item-height variable is computed based on the$ui-field-height-ratio. Previously it was based on the $ui-margin-ratio.

New tests directory

The GBC project package includes a tests directory containing two subdirectories:

The genero_samples directory includes working examples of the phoneEdit and tagEdit widgets.