Database to list in WebOS

This tutorial shows how to insert record into SQL Storage(HTML5) and Populate the rows in List widget.

Refer to List Widget

Step1 : Create Basic Scene “DatabaseList”

in DatabaseList-Scene.html

<div>Database Tutorial</div>

<div id="textField"></div>
<div id="button-1"></div>
<div id="listId" class="listClass"></div>

Step2 : Create one html file for List Widget
in myRowTemplate.html

<div class="palm-row">
<div style="float: left;">#{data}</div>


Step 3: DatabaseList-assistant.js Creating a new table named”ofive_table” with two columns ID – Autoincrement Column Title – Text column

DatabaseListAssistant.prototype.setup = function() {
var name = "MainDB";  // required
var version = "1";  // required

var db = openDatabase(name, version);

if (!db) {
  Mojo.Log.error("Could not open database");
} else {

  	function (transaction)
	    transaction.executeSql("CREATE TABLE IF NOT EXISTS Ofive_Table(id integer primary key autoincrement, Title TEXT)",[],
    		function(transaction, results)
    	       {"Successfully created table")},
               function(transaction, error)
               {Mojo.Log.error("Could not create table: ")});
this.controller.setupWidget('button-1',{},{buttonLabel: 'Insert'});
this.controller.setupWidget('textField',{},{original : 'initial value'});
Mojo.Event.listen(this.controller.get('button-1'),Mojo.Event.tap, this.InsertRow)
var attributes = {
             itemTemplate: 'DatabaseList/myRowTemplate',
             swipeToDelete: true,
this.controller.setupWidget('listId', attributes);  

Step 4: Include the following function which performs

Reference for Queries
– Inserting a new record into the Table (ofive_Table)
– Retrieve all records from the table and Populate into the List widget

var db = openDatabase("MainDB", "1"); // this is all that is required to open an existing DB

db.transaction( function (transaction) {
  transaction.executeSql("INSERT INTO Ofive_Table(Title) VALUES (?)",  [$('textField').innerText],
      function(transaction, results) {    // success handler"Successfully inserted record");
      function(transaction, error) {      // error handler
       Mojo.Log.error("Could not insert record: " + error.message);
  transaction.executeSql("SELECT * FROM Ofive_Table",  [],
                         function(transaction, results) {    // success handler
			  var Ar1=[]
			  Ar1.push({data: results.rows.item(i).Title})
			 $("listId").mojo.noticeUpdatedItems(0, Ar1);
                         function(transaction, error) {      // error handler
                           Mojo.Log.error("Could not insert record: " + error.message);