Add footer text

This procedure shows you how to add footer text to your application.

Steps

1. Create and edit gbc-project-dir/customization/customization-project-dir/js/MyFooterBarWidget.js:

   "use strict";
   
   // 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 */
         };
       });
       cls.WidgetFactory.registerBuilder('MyFooterBar', cls.MyFooterBarWidget);
     });

2. Create and edit gbc-project-dir/customization/customization-project-dir/js/MyFooterBarWidget.tpl.html:

   <div>
        This is my NEW footer text!
   </div>

3. Edit MyMainContainerWidget.js.
   1. Open the gbc-project-dir/customization/customization-project-dir/js/MyMainContainerWidget.js file with a text editor.
   2. Add the code in the example to include the MyFooterBarWidget.

      "use strict";
      
      modulum('MyMainContainerWidget', ['MainContainerWidget', 'WidgetFactory'],
      
        function(context, cls) {
      
              cls.MyMainContainerWidget = context.oo.Class(cls.MainContainerWidget, function($super) {
                    return {
                      __name: "MyMainContainerWidget",
      
                      constructor: function(opts) {
                        $super.constructor.call(this, opts);
      
                        var footerBar = cls.WidgetFactory.createWidget("MyFooterBar");
                        footerBar.setParentWidget(this);
                        this.getElement().querySelector("footer").appendChild(footerBar.getElement());
                      }
                    };
                  });
      
          cls.WidgetFactory.registerBuilder('MainContainer', cls.MyMainContainerWidget);
        });

   3. Save your changes.
4. Edit gbc-project-dir/customization/customization-project-dir/js/MyMainContainerWidget.tpl.html.

   Remove any content from the <footer> element. Your file should resemble the following:

   <div>
     <header>
       Place your header here
     </header>
     <!-- GBC will be rendered in this div -->
     <div class="containerElement"></div>
     <footer></footer>
   </div>

5. Create and edit gbc-project-dir/customization/customization-project-dir/sass/MyFooterBarWidget.scss.

   .gbc_MyFooterBarWidget {
     font-size:2em;
   }

   Note:

   You can define the custom style you want here for your widget.

6. Update customization.scss.
   1. Open the gbc-project-dir/customization/customization-project-dir/sass/customization.scss file for editing.
   2. Copy the code shown in the example and save.

   @import "MyMainContainerWidget";
   @import "MyFooterBarWidget";

7. Save your changes and rebuild your customization using gbc build:

   $ gbc build --customization customization-project-dir

8. Test the footer is displayed as expected by closing and reopening your application.
   Tip:

   You may need to use CTRL + F5 to clear the browser cache before you see your changes.