Adding custom JavaScript and HTML
headers to your Pega Mobile application
Summary
Pega Mobile offers an extensive list of controls and functionality. Beginning with Pega Mobile 3.2,
you extend that functionality by adding your own custom JavaScript and including it with the load of
the Pega Mobile app. Further, you can add tags, CSS, and HTML to the document header.
Add custom JavaScript
The Static Content Bundle rule, pymobile_customization:







Allows you to include your own JavaScript files on the initial load of your mobile
application
Provides a standard, rule-based method to include JavaScript files in the application
Improves run-time by combining all the JavaScript files into one large JavaScript file,
thereby reducing the number of server hits
Allows further optimization through compression and obfuscation
Keeps you from having to edit the HTML header with extensions
Maintains all of your custom JavaScript files in one place as an extension point
Optimizes the JavaScript files in the same manner as the Pega Mobile base
functionality
Custom JavaScript files included in this rule are available when, for example, calling Run
Script actions on buttons, links, and navigation
rules. The pzmobile_customization_example file is provided as an example to show how
to include your JavaScript file in the the bundle.
When you are using Apple Safari or Google Chrome to debug an issue with your application,
search for the bundle name, pymobile_customization, and not your individual JavaScript file
name, as all the JavaScript files are combined into one upon load of the static content bundle.
In this example, you add a JavaScript function for barcode scanning to your application
ruleset.
1. Create the JavaScript file that addresses your needed functionality, such
as pzmobile_barcode_example.js.
2. Open the pymobile_customization static content bundle rule, and save it into your
application ruleset.
3. In the App Name field, enter webwb. Enter your JavaScript file name and extension.
4. Save, close, and check in the rule.
5. As a developer, you now have access to the JavaScript function, and can use it with
the Run Script action on buttons, links, and navigation rules.
6. Save, close, and check in the rule.
7. If you are logged into a mobile client, log out, then log back in to see the added
functionality.
Add HTML to the document header
Pega Mobile offers two rules to add tags, CSS, and HTML to the document header.

pyCustomHTMLHeader - You can use this rule to include header tags, CSS, and
HTML, optionally based on PRPC logic. Typically, custom CSS is entered in
the pyMobileThemeOverrides.css file, and JavaScript is included in
the pymobile_customization bundle. However, you can conditionally include them

(i.e. for iPhones only) using pyCustomHTMLHeader using
<pega:choose><pega:when> tags.
pyCustomHTMLBodyScripts - This rule functions
like pyCustomHTMLHeader above, but you use it for logic that runs after the
HTML body has loaded.
You may want to add custom HTML to the document header to, for example, use additional
fonts. An insurance company determines that they want to use Google fonts, as shown in the
user form below.
To make Google fonts available to the application, you can add a link to the external CSS file
for the fonts:
1. Include link to the Google fonts in the HTML Fragment pycustomHTMLHeader.
2. Save, close, and check in the HTML Fragment rule.
3. The link loads as part of the HTML header for the document.You can now reference
the font in the pymobilethemeoverrides.css file.
4. If you are logged into a mobile client, log out, then log back in to see the added
functionality. (Due to Safari caching issues, you may need to log out and log in a
second time.)