This procedure shows you the general steps involved in customizing your user interface.

Overview

This is a general procedure to follow when customizing your user interface. For specific examples of customization and to see sample code, see the procedures found in this page.

Identify the widget you want to modify

Most UI elements are widgets that use the same name as in the AUI tree, such as the EditWidget, or the TableWidget, see API reference. If you are not sure which widget to modify, you can use browser developer tools to inspect the elements of a GBC application interface and identify the widget. Browser developer tools are accessed by pressing the F12 key.

Modify the stylesheets (.scss)

• Add entries directly in customization.scss, or create additional stylesheet (.scss) files. Place new stylesheet files in the project's sass directory.
• Reference any added stylesheet (.scss) files in the customization.scss file. For example, if the stylesheet is MyHeader.scss, you would add the following to customization.scss:

@import "MyHeader";

If additional customization is needed, extend the widget

• Create the JavaScript (.js) and template (.tpl.html) files needed to extend the widget. By default, the JavaScript and template files share the same name. Save these files in the project's js directory.
• If your template file uses a different name, or if you want to reuse an existing template file, specify the template file in the JavaScript file with __templateName. For example:

__name: xxx,
__templateName: "yyy"

Rebuild using grunt.

$ grunt --customization=<customization_project_dir>

Test

Test your customization.