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

New Developer
Posts: 13
Registered: ‎09-23-2009
My Device: Not Specified

help with html5 database display and bbui.js

I am very new to this environment and am beignning my learning with some sample code (specifically from html5rocks.com) which is a todo list.


I have managed to establish a screen that allows me to Add a text field to a html5 database and display it on that screen however the results are being displayed in a <li> and not using the bbui.js image-list atttribute. 


my menu.html file displays content with the following

<div data-bb-type="image-list" id="todoItems" data-bb-style="arrowbuttons" data-bb-header-justify="left" >

 Here is the loadToDo result and render.  I am sure i need to render the results in a special way so that each row shows up using the bbui.js "image-list" type but am unsure what to do.  Any help would be greatly appreciated. thank you.


 html5rocks.webdb.onSuccess = function(tx, r) {
        // re-render the data.
      html5rocks.webdb.getAllTodoItems = function(renderFunc) {
        var db = html5rocks.webdb.db;
        db.transaction(function(tx) {
          tx.executeSql("SELECT * FROM todo", [], renderFunc,
      function loadTodoItems(tx, rs) {
        var rowOutput = "";
        var todoItems = document.getElementById("todoItems");
        for (var i=0; i < rs.rows.length; i++) {
          rowOutput += renderTodo(rs.rows.item(i));
        todoItems.innerHTML = rowOutput;
      function renderTodo(row) {
        return "<li>" + row.todo  + " [<a href='javascript&colon;void(0);'  onclick='html5rocks.webdb.deleteTodo(" + row.ID +");'>Delete</a>]</li>";


BlackBerry Development Advisor
Posts: 43
Registered: ‎01-11-2013
My Device: BlackBerry Z10
My Carrier: Rogers

Re: help with html5 database display and bbui.js

[ Edited ]

Hey Gaofee -


Once the page is loaded you need to use the JS interface for image list to add items so that they get the proper formatting.


Have a look at the Wiki page https://github.com/blackberry/bbUI.js/wiki/Image-List


You'll probably want to use the appendItem and insertItemBefore methods either inside or instead of your renderTodo function.



Senior Systems Software Developer - Enterprise R&D


1.Please resolve your thread by clicking the "Accept as Solution" button below the post which solved your problem!
2. If any post helps you please click the like/thumbs up button below the post(s)