Learn what options are available to you, to change which icons and actions appear in the GBC chromebar.

To change which application icons appear in the chromebar, you will follow this procedure.

To have action views appear in the chromebar, instead of in a toolbar, menu, or action panel, you would use Genero presentation styles. See the topic "Action views within GBC chrome" in the Genero Business Development Language User Guide.

What is the chromebar?

The chromebar sits along the right-hand side of the application interface. By default, it displays the Settings icon, the Close Application icon (unless implemented by the application as an action view), the Upload Status icon (when files are actively being uploaded), and Runtime Status icon (for when the DVM is busy.)

To learn more about the chromebar, see Application page.

Figure 1: Chromebar with default icons

The list of application icons

The icons that the chromebar displays depend on the setting of the gbc-ChromeBarWidget-visible-items theme variable. Values can be:

The default value is "uploadStatus runtimeStatus settings".

Note: Applications in debug mode always display the debug, runInGDC, proxyLog, and VMLog icons, in addition to those set by the theme variable.

Before you begin

This procedure assumes you are comfortable updating theme parts and themes. For the basic principles behind themes and theme parts, see Customization fundamentals. For instructions about adding and modifying themes and theme parts, see Manage themes.

Update the theme variable

1. Identify the theme part you plan to update. If you are creating a new theme part, prepare the directory.

2. In the theme part, open the theme.scss.json file in a text editor.

3. To change the icons that display in the chromebar, set the gbc-ChromeBarWidget-visible-items. For example:

   // in theme.scss.json
   {
     ...
     "gbc-ChromeBarWidget-visible-items": "about uploadStatus runtimeStatus settings bookmark",
     ...
   }
   

   In this example, the chromebar will display the About and Bookmark icons, as well as the default icons for Settings, Runtime Status, and Upload Status.

4. If you created a new theme part, add it to one or more themes.

Compile

After updating theme.scss.json with the theme variable and ensuring the theme part is assigned to one or more themes, you compile your customization.

$ gbc build --customization <customization_project_dir>

Test

Test that your changes work as expected. Open your application and view the chromebar.

Note: You may not be able to view the Upload Status icon (which displays only when a file is being uploaded into your application) or the Runtime Status progress bar (which displays only when the GBC is waiting for a response from the server).

Figure 1: Chromebar with customized icons

TIP: You may need to use CTRL + F5 to clear the browser cache before you see your changes.

If your tests do not behave as expected, ensure you are using your newly-compiled custom GBC. Depending on your development environment, you may need to package and deploy a custom GBC client. For information on which customization and theme you are using, see Customization and Theme Selection.