Skip to Content
avatar image
Former Member

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"> 
       <h1>ErrorDetail</h1> 
     </div> 

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();
		elem.empty();
		dvHeader.remove('h1');
                //function buildHeader returns html text of a div etc
		var txt = buildHeader(h1Str);
		dvNewHeader = $(txt);
		dvHeader.append(dvNewHeader);	
	});

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.

Thanks.

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

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

2 Answers

  • avatar image
    Former Member
    Sep 22, 2011 at 04:04 PM

    Justin, Is this for BB5 or BB6?

    Add comment
    10|10000 characters needed characters exceeded

    • Former Member Former Member

      Hello,

      The ability to empty out that top header looks to be the best solution. Much appreciation Andrew!

      -Justin

      Edited by: JUSTIN MCGREW on Sep 23, 2011 6:57 PM

  • avatar image
    Former Member
    Sep 23, 2011 at 01:22 AM

    Hello Justin,

    Not very sure but may be you can try with adding a css with new css rule for header.

    Add comment
    10|10000 characters needed characters exceeded