How to change a title bar's accent text and image? #466

jpbb opened this Issue Nov 22, 2012 · 18 comments


None yet
6 participants

jpbb commented Nov 22, 2012

define a title bar like

<div data-bb-type="title" data-bb-caption="xxx" data-bb-accent-text="yyy" data-bb-img="foo.png"></div>

We can change the caption by using setCaption(value), then how to change the access text and img?

jpbb closed this Nov 22, 2012

jpbb reopened this Nov 22, 2012


tneil commented Nov 22, 2012

It's currently not available. I'll assign this issue to v0.9.5

jpbb commented Dec 5, 2012

Hi Tim, I wonder if this issue has been solved in v0.9.5. Thank you.


tneil commented Dec 5, 2012

It hasn't been implemented yet in v0.9.5, there have been some other title bar changes, but not this one yet

jpbb commented Dec 5, 2012

This feature is very important for app development. I wonder when it will be solved.


tneil commented Dec 5, 2012

It is a complicated change. The title bar applies styles and changes based on what is/isn't provided as attributes. So setting the accent text, or making it empty will change the layout depending on what has been provided.

Changing the text if it is already there is easy, but the corner cases is what makes it more complicated


tneil commented Dec 6, 2012

Retrieving the Accent Text is now available with pull request #486 using getAccentText()

jpbb commented Dec 12, 2012

If we cannot change the picture and the accent text, we have to create two hundred static pages for one hundred friends with status of "available" and "offline". Developers will not be able to use title bar like this.


tneil commented Dec 12, 2012

This functionality is going to be added.. it just hasn't been added yet.


tneil commented Dec 12, 2012

You can also update the these properties in the onscreenready ready event for your screen. The onscreenready event fires before the screen appears.

These JavaScript functions (setAccentText, setImage) only when necessary after the screen has already been shown to the user. You really only want to use these javascript functions if there are very good reasons not to make the changes in the onscreenready event

jpbb commented Dec 12, 2012

My project cannot continue without this important feature. Please let me kown when it will be done.


tneil commented Dec 12, 2012

I currently have no time schedule for when this feature will be done.

I would suggest leveraging the onscreenready event and opening up your target screen and passing it the information for your title bar.

bb.pushScreen('myscreen.htm', 'myscreen', {title : 'my dynamic title', accent : 'my dynamic accent', img: 'http://foo/1.png'}); 

and then in the onscreenready event

function myonscreenready(element, id, params) {
    if (id == 'myscreen') {
        var titleBar = element.getElementById('myTitleBarId');
        titleBar.setAttribute('data-bb-caption', params.title);
        titleBar.setAttribute('data-bb-accent-text', params.accent);
        titleBar.setAttribute('data-bb-img', params.img);

Is there a scenario in your app where this will not work?

This is the most efficient way with the best performance

haixuanc commented Feb 6, 2013

Hi Tim, did you implement this feature request? If not, I can work on it. What about place the image, caption, and accent text in the middle when title-bar button(s) is present?
Screen Shot 2013-02-05 at 10 55 42 PM


tneil commented Feb 6, 2013

Nope, I haven't started work on this one yet... The combination which you have shown doesn't really follow the BB10 UX guidelines. We're trying to keep bbUI right on spec with the BB10 UX so we wouldn't likely want to add it.

There are JavaScript functions for changing the caption, back caption and action caption, but none for the accent text and image. Will these functions be added to bbUI?

I have a details page with a refresh action on the action bar and would like to display a status icon in the title bar. The icon image would have to be updated after a refresh.


tneil commented May 2, 2013

Those functions are outlined as items in this issue to add to the framework. It isn't available yet

sh2sg commented May 4, 2013

my workaround to update title bar accent text:

<div data-bb-type="title" data-bb-caption="Title Bar Caption" data-bb-img="images/icon.png" data-bb-accent-text="<div id='myAccent'>AAAAAAA</div>"></div>

document.getElementById("myAccent").innerHTML = "BBBBB";

marc25v commented Aug 23, 2013

Wondering what the status of this issue was? Has any progress been made as of yet for both the accent text and image?

Thanks for the great work up to now.


tneil commented Aug 23, 2013

There hasn't been progress on this specific item... most work right now is getting the foundation ready for the v1.0 milestone. This functionality will be available as part of that work

tneil closed this Jul 17, 2014

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment