Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Developer
Posts: 114
Registered: ‎06-14-2010
My Device: Passport
My Carrier: Virgin Mobile Canada

BBUI.js Pill Buttons: best practices for use in a "change the view of current data" context.

[ Edited ]

What I'm trying to do is have a list of items that are siblings (from a data structure point of view let's call them Items and Locations) that can be grouped and sorted either as

 - "Items, and the Locations at which they can be acquired" or

 - "Locations, and Items that can be acquired there".

I want to use Action Bar "Buttons" to choose which type of view of the same data you choose, and, within each of the two views, you can filter on "All", "Favourites" and either "Missing" or "Nearby" respective to "Item" or "Location" groupings... so that's three "filters" for each of the two "sortings"... that's two groups of 3 pill buttons

I thought I'd draw all the controls on the screen and by pressing Action Bar buttons, either show or hide the relevant groups of controls. Maybe I should just be using completely separate "screens" for these two views, but they're two views of the same data, so I thought it makes sense to have them on the same page just showing and hiding the different view based on user selection.

I'm not sure if I'm doing something fundamentally wrong or not, but when I try to group controls within <div> objects and then try to show or hide them using the .show() and .hide() methods, testing in Ripple causes Chrome JavaScript console to throw:

Uncaught TypeError: Object #<HTMLDivElement> has no method 'show()'

 

but using "style.display='none'" doesn't work.

 

In trying to work this out, a few approaches have had the Pill Buttons are behaving oddly...

I tried having a single "pill-buttons" <div> containing 6 individual "pill-button" objects, then trying to have 3 hidden at a time, but when I hide the first triplet and show the second triplet, the rendering is odd. So I tried wrapping the triplets each in "<div>" elements inside the "pill-buttons" <div> which had no data-bb-type attribute does have unique id attribute values (like "pilGroup1" and "pilGroup2") and using the show() and hide() methods on them like "document.getElementById('pilGroup1').hide()" but that didn't work either.

I'm sure it would work with separate screens, but that seems like a lot of overhead and state-maintenance to have to do to just resort the data.

 

Is there a best way to do this, or should only one "group" of Pill Buttons ever be used on a screen, and tampering with them via javascript is not recommended?

Developer
Posts: 114
Registered: ‎06-14-2010
My Device: Passport
My Carrier: Virgin Mobile Canada

Re: BBUI.js Pill Buttons: best practices for use in a "change the view of current data" context.

A gentle bump... does anyone have advice, including a suggestion of the most appropriate place to post this?

New Contributor
Posts: 7
Registered: ‎08-22-2013
My Device: Z10
My Carrier: Movistar

Re: BBUI.js Pill Buttons: best practices for use in a "change the view of current data" context.

I had problems with pill button and one solution i found when interacting with the buttons dynamically is to use:

var mybuttons = document.getElementById('myPillButtons');
mybuttons.initialize();

 

This will re-render the pill buttons that you added or removed, hope it helps.