Change footer text

This procedure shows you how to change a footer using a front call.

1. In the gbc-project-dir/customization/customization-project-dir/js directory, add a js file called myFrontCallModule.js or add the functions contained in the modulum method to your existing module:

   // in myFrontCallModule.js
   "use strict";
   
   modulum('FrontCallService.modules.myfcmodule', ['FrontCallService'],
     function(context, cls) {
       context.FrontCallService.modules.myfcmodule = {
   
         myCustomSyncFunction: function (name) {
           if (name === undefined) {
             this.parametersError();
             return;
           }
           if (name.length === 0) {
             this.runtimeError("name shouldn't be empty");
             return;
           }
           return ["Hello " + name + " !"];
         },
   
          replace_html: function (id, value) {
             document.getElementById(id).innerHTML=value;
             //return;
             return ["0"];
         },
   
         myCustomAsyncFunction: function (name) {
           if (name === undefined) {
             this.parametersError();
             return;
           }
           if (name.length === 0) {
             this.runtimeError("name shouldn't be empty");
             return;
           }
   
           window.setTimeout(function () {
             this.setReturnValues(["After 5s, Hello " + name + " !"]);
           }.bind(this), 5000);
         }
       };
     }
   );

   In this example the customization is defined in the replace_html function. This function is called by the front call. It has two parameters: the id is the identifier of the DIV element where the footer is added, and the text (value) to display in the footer is provided in the second parameter.

2. Edit MyMainContainerWidget.js.
   1. Open gbc-project-dir/customization/customization-project-dir/js/MyMainContainerWidget.js with a text editor.
   2. Remove the existing code. Your file should resemble the code in the following example.

      "use strict";
      
      modulum('MyMainContainerWidget', ['MainContainerWidget', 'WidgetFactory'],
        function(context, cls) {
      
          /**
           * @class MyMainContainerWidget
           * @memberOf classes
           * @extends classes.MainContainerWidget
           */
          cls.MyMainContainerWidget = context.oo.Class(cls.MainContainerWidget, function($super) {
            return /** @lends classes.MyMainContainerWidget.prototype */ {
              __name: "MyMainContainerWidget",
      
            };
          });
      
          /*
           *  This is a sample widget that would replace the default one in GBC
           *  To activate it, please uncomment the line below. This will override
           *  the original widget registration to this one.
           */
      
          cls.WidgetFactory.registerBuilder('MainContainer', cls.MyMainContainerWidget);
        });

   3. Save your changes.
3. Edit MyMainContainerWidget.tpl.html.
   1. Open gbc-project-dir/customization/customization-project-dir/js/MyMainContainerWidget.tpl.html with a text editor.
   2. Modify the code to explicitly illustrate the main container elements. Your file should resemble the code in the following example.

      <div>
        <!-- GBC will be rendered in this div -->
        <div class="containerElement"></div>
        <footer>
          Place your footer here
          <div id="gbc_cust_username">User Name will go here</div>
        </footer>
      </div>

   3. Save your changes.
4. Save your changes and rebuild your customization using gbc build:

   $ gbc build --customization customization-project-dir

5. In your Genero BDL app, create a simple form for the user to enter text.
   1. Your file should resemble the code in the following example.

      LAYOUT (TEXT="Replace HTML")
      GRID
      {
      Text to go into footer [f01                            ][b01         ]
      }
      END
      END
      ATTRIBUTES
      f01 = formonly.txt, SCROLL;
      BUTTON b01: replace, TEXT="Replace";

   2. Save your file as replace_html.per
   3. Compile your form.
6. View the changes by opening the app with a front call command to call the replace_html function.

   MAIN
   DEFINE txt STRING
   DEFINE result INTEGER
   
       OPTIONS INPUT WRAP
       OPTIONS FIELD ORDER FORM
   
       OPEN WINDOW w WITH FORM "replace_html"
       INPUT BY NAME txt ATTRIBUTES(UNBUFFERED, ACCEPT=FALSE)
           ON ACTION replace
               CALL ui.Interface.frontCall("myfcmodule","replace_html",["gbc_cust_username",txt], result)
               # do something
       END INPUT
   END MAIN

   In this example, the replace_html form is opened. The front call to the replace_html function is made when the user clicks the Replace button after inputting text. In the call to ui.Interface.frontCall() the ["gbc_cust_username",txt] specifies the id of the DIV element where the footer is added and the text to add.