Customize the User Interface

Regardless of your customization needs, there is a general procedure to follow when customizing your user interface for a Genero Web Client for JavaScript (GWC-JS) front-end.

Before you begin, you must prepare your environment for customization and have a customization project identified.

This procedure provides the generic outline for any customization project. For specific examples of customization and to see sample code, see the procedures found in this section. .

Identify the widget you want to modify. Most of the UI elements are widgets that use the same name as in the AUI tree, such as the EditWidget or the TableWidget. If you are not sure which widget to modify, you can use browser developer tools to inspect the elements of a GWC-JS application interface and identify the widget. Browser developer tools are accessed by pressing the F12 key.
Modify the stylesheets (.scss).
1. Add entries directly in customization.scss, or create additional stylesheet (.scss) files. Place new stylesheet files in the project's sass directory.
2. 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.
1. 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. Specify a template file with a different name with __templateName:
```
__name: xxx,
__templateName: "yyy"
```
Rebuild your project with grunt.
Test your customization.