You can use widgets to customize your user interface.

For further details about widgets, see Widgets.

This is a general procedure to follow when customizing your user interface. For specific examples of widget customization, see:

• Add header image
• Add header image using style class
• Add header text
• Add footer text
• Change file loading icon
• Redirect application end
• Extend the MainContainerWidget

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"

Compile

$ gbc build --customization <customization_project_dir>

Test

Test your customization.