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

Prerequisite

Check if you have all that you need:

• You have a project directory, <GBC_PROJECT_DIR>/customization/<customization_project_dir>.
• You have completed the procedure to extend the MainContainerWidget (see Extend the MainContainerWidget) and as a result you have the following files:
• In <GBC_PROJECT_DIR>/customization/<customization_project_dir>/js, you have:
  • MyMainContainerWidget.tpl.html
  • MyMainContainerWidget.tpl.js
• In <GBC_PROJECT_DIR>/customization/<customization_project_dir>/sass, you have
  • MyMainContainerWidget.scss

Create MyFooterBarWidget JavaScript and template files

Create and edit file <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);
  });

Create and edit file <GBC_PROJECT_DIR>/customization/<customization_project_dir>/js/MyFooterBarWidget.tpl.html:

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

Edit MyMainContainerWidget.js

Open <GBC_PROJECT_DIR>/customization/<customization_project_dir>/js/MyMainContainerWidget.js with a text editor.

Copy the code in the example. Save your changes.

"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);
  });

Update MyMainContainerWidget.tpl.html

Open the <GBC_PROJECT_DIR>/customization/<customization_project>/js/MyMainContainerWidget.tpl.html file for editing.

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>

Create MyFooterBarWidget.scss

Create and edit file <GBC_PROJECT_DIR>/customization/<customization_project>/sass/MyFooterBarWidget.scss:

.gbc_MyFooterBarWidget {
  font-size:2em;
}

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

Update customization.scss

Open the <GBC_PROJECT_DIR>/customization/<customization_project>/sass/customization.scss file for editing.

Copy the code shown in the example to import the MyFooterBarWidget.scss file and save.

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

Rebuild using grunt.

$ grunt --customization=<customization_project_dir>

Test

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.