Skip to Content
Former Member
Sep 22, 2011 at 03:17 PM

Changing the Header in a Hybrid Web Container app on BlackBerry


Hello Experts!

I am trying to add a custom header to Hybrid Web Container Apps on SUP 2.0. It would be nice to add branding or additional text - even the ability to center the text would be nice. I have tried various jQuery approaches and can see the changes working when I test via Chrome. However when deploying to my BlackBerry simulator the changes are not reflected. If I had to guess - it would appear the entire Header area is not modifiable. To add more context to the problem review the generated code below from workflow_jQueryMobileLookAndFeel.html

<div data-role="page" data-theme='a' id="ErrorDetailScreenDiv">       
      <div data-role="header" data-position="inline"> 

Recall that each screen is a div with the data-role attribute page; similarly the div with data-role header is the area in question that I am trying to modify.

Here is the jQuery I am using in the customBeforeWorkflowLoad method in the Custom.js file.

$('[data-role="header"]').each(function() {
		var dvHeader = $(this);	
		var elem = dvHeader.find('h1');
		var h1Str = elem.text();
                //function buildHeader returns html text of a div etc
		var txt = buildHeader(h1Str);
		dvNewHeader = $(txt);

Again when testing in chrome the text is removed and the new header is added.

If I had to guess - I would say the Workflow application which wraps around the Hybrid Web Container App is interfering; I assume the workflow (native) application reads the h1 tags and the header we see on the device is the workflow app and not the Hybrid Web Container. My other guess would be the Header area is somehow locked in the BlackBerry scenario.


Edited by: JUSTIN MCGREW on Sep 22, 2011 5:18 PM

Edited by: JUSTIN MCGREW on Sep 22, 2011 5:21 PM

Edited by: JUSTIN MCGREW on Sep 22, 2011 5:22 PM