Customizing Generated Code

Modify Custom.js to change a generated Hybrid App.

Until now, this tutorial has shown how to customize your Hybrid App in the Designer, by modifying the properties of screens, menus, and controls. Your generated code reflects those changes. This topic demonstrates how to customize the generated code directly, by editing a special file, Custom.js.

Custom.js is generated the first time you generate the Hybrid App package. It contains commonly used functions from the SAP Mobile Platform API and instructions for modifying them. Any modifications you make in Custom.js override the default behavior of those functions. However, unlike other generated files, Custom.js is not overwritten the next time you regenerate your package. In this way, your custom code is preserved.

The customization in this tutorial adds your own image, such as a company logo, to the top of the application screen.

To add the header image:

Copy the image that you want to use in your header to Generated Hybrid App\travelrequest\html\images in your project folder. Name the copy "header.png".
For example:
In Workspace Navigator, open the file, Generated Hybrid App\travelrequest\html\js\Custom.js for editing.

In Custom.js, find the customAfterHybridAppLoad method. At the bottom of the function, add this code to display the header image:

hwc.customAfterHybridAppLoad = function() {
.
.
.
  hwc.log("customAfterHybridAppLoad", "DEBUG", false );
  hwc.log("Application " + hwc.getVersionURLParam(), "DEBUG", false );
  hwc.log("Platform: isIOS=" + hwc.isIOS() + ", isAndroid=" + hwc.isAndroid() + ", 
   isBB=" + hwc.isBlackBerry() + ", isWin=" + hwc.isWindows() + ", 
   isWinMobile=" + hwc.isWindowsMobile(), "DEBUG", false );

  var screenKey = getCurrentScreen();
  var form = document.forms[screenKey + "Form"];
  if (form) {
    var topOfFormElem = document.getElementById("topOf" + screenKey + "Form");
    topOfFormElem.innerHTML = '<img alt="header" src="images/header.png">'; 
  }
}

Note: For the src value, use the name of the image file that you saved in Step a.

Save your changes to Custom.js.

Run the Hybrid App Generation wizard again.