Add header text

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

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.