Customizing the UI and your application

You have several methods for customizing your Genero application user interface.

Consider GBC customization as like web design, where you first define a system design (your global rules) and then use style sheets (css) in your application for specific needs.

Similarly, in GBC customization:
  • you should use GBC customizations for user interface design at a global level. This may involve setting theme variables, editing style sheets, or editing widgets to provide a consistent look-and-feel, such as logo, brand color, and so on, across all your applications.
  • you should use Genero presentation styles (4st) – when there is a Genero presentation style available – for screen-specific changes for an application at a local level. For example, use styles to display important values in a different color.

Therefore, you should aim to have only one customization for all your applications rather than multiple customizations. If you provide multiple themes in a customization, the end-user can choose a theme that displays a preferred look-and-feel.

GBC customizations also rely on Genero presentation styles. It is recommended you:
  • set presentation styles attributes to define what is visible to the end user in the window list (windowListVisible) and the application list (applicationListVisible). For details about customizing user interface style attributes, go to the Application page for GBC.
  • If a presentation style is duplicated in several applications on any item, you may need to consider setting a presentation style in the customization instead of setting the same presentation style in a 4st file for each application.

For information about Genero presentation styles, see the Genero Business Development Language User Guide.

The recommended approach to GBC customization is to go from the simplest to the most complex:

  1. For a few specific needs, you can simply replace an existing file. For example, to update the favicon image, you overwrite the current gbc_logo.ico file.
  2. You can update the look-and-feel of the user interface by setting theme variables. For example, you can use theme variables to display or hide the sidebar.
  3. You may need to edit a style sheet. For example, you can edit a style sheet to display a loading icon in the center of the screen.
  4. You may need to edit a widget. For example, you edit a header widget to modify the application header.
Important:

Use the simplest method possible for customization. If you can complete a customization requirement by setting a theme variable or by extending a widget, then set the theme variable! Extending a widget should be a last resort.