Add footer text

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

1. Copy the sampleItem.js file found in project_dir/customization/template directory to your project_dir/customization/custom_project_dir/js/ directory, and rename it MyFooterBarWidget.js.
2. Open MyFooterBarWidget.js with a text editor.
   Replace the references to sampleItem with the new widget name where found:

   • in the class creation method (modulum)
   • in the context function variable (cls)
   • in the reference to the template file name (_name)

   Save your changes.

   // declare the dependency to inheritedWidget (here WidgetBase) module
   modulum('MyFooterBarWidget', ['WidgetBase', 'WidgetFactory'],
     function(context, cls) {
   
       cls.MyFooterBarWidget = context.oo.Class(cls.WidgetBase, function($super) {
         return {
           __name: "MyFooterBarWidget"
   
           /* your custom code */
         };
       });

3. Create the project_dir/customization/custom_project_dir/js/MyFooterBarWidget.tpl.html file with a text editor.
4. Inside a div element add your footer text. Save your changes:

     <div>
        This is the Footer text
     </div>

5. Open your project_dir/customization/custom_project_dir/MyMainContainerWidget.js file. The footer bar widget is added. Check that the main container class has code that adds the footer 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());
   
             var footerBar = new cls.MyFooterBarWidget();
             footerBar.setParentWidget(this);
             this.getElement().querySelector("footer").appendChild(footerBar.getElement());
           }
         };
       });
   
       cls.WidgetFactory.register('MainContainer', cls.MyMainContainerWidget);
     });

   In the highlighted code in the JavaScript example, you can see:
   • The variable footerBar references an instance of the MyFooterBarWidget class.
   • The .getElement().querySelector method inserts the footer bar widget as a child of the footer element in the main container element of the interface.
6. 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";

7. Rebuild using grunt.