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.scssfile. For example, if the stylesheet is
MyHeader.scss, you would add the following to
If additional customization is needed, extend the widget
.js)and template (
__templateName. For example:
__name: xxx, __templateName: "yyy"
Test your customization.