Add header text

Add header text to the MainContainerWidget of your Genero Web Client for JavaScript (GWC-JS) project user interface.

Before you begin:
You have a project directory and your project_dir/customization/custom_project_dir directory contains the following .js, .tpl.html, and .scss files in the appropriate directories:
  • MyMainContainerWidget.tpl.html
  • MyMainContainerWidget.tpl.js
  • MyMainContainerWidget.scss
  • MyHeaderBarWidget.tpl.html
  • MyHeaderBarWidget.js
Note: These files may be copied from your project_dir/customization/default/ directory or you can use the default customization.
  1. Open the project_dir/customization/custom_project_dir/js/MyHeaderBarWidget.tpl.html file with a text editor.
  2. Replace the existing div element with your changes:
    <div>
         This is the header text
      </div>
  3. Open your project_dir/customization/custom_project_dir/MyMainContainerWidget.js file. The header bar widget is added. Check that the main container class has code that adds the header bar class as a child of the main container widget.
    "use strict";
    
    modulum('MyMainContainerWidget', ['WidgetGroupBase', 'WidgetFactory'],
            
           ...
    
            constructor: function() {
              $super.constructor.call(this);
    
              var headerBar = new cls.MyHeaderBarWidget();
              headerBar.setParentWidget(this);
              this.getElement().querySelector("header").appendChild(headerBar.getElement());
            }
          };
        });
    
        cls.WidgetFactory.register('MainContainer', cls.MyMainContainerWidget);
      });
    In the highlighted code in the JavaScript example, you can see:
    • The variable headerBar references an instance of the MyHeaderBarWidget class.
    • The .getElement().querySelector method inserts the header bar widget as a child of the header element in the main container element of the interface.
  4. In your project_dir/customization/custom_project_dir/scss/customization.scss file add a reference to the MyMainContainerWidget.scss. In this example we import the MyMainContainerWidget style.
    @import "MyMainContainerWidget";
  5. Rebuild using grunt.
What to do next

View the changes by opening the GAS demos application in your browser. You can do this by configuring the demos application for your project, see Test customization using the demo.

The GWC-JS header text is now changed.