List Widget in webOS

Refer Palm App :Basic App for Creating a basic App

The list is the most common component. In Webos, list objects are rendered into
the provided HTML templates.

Two HTML templates are necessary to render the list objects. listTemplate and

List has many attributes to define among which

1. listTemplate – declaration to refer listTemplate

2. itemTemplate – declaration to refer itemTemplate

3. emptyTemplate – declaration to refer is values are empty

Step1 : Create a basic scene “List”


List Declaration

<div x-mojo-element=”List” id=”listId” class=”listClass” name=”listName”></div>

Step 2: Defining the List itemTemplate, create a new HTML file in the same folder
of List named “myRowTemplate”. This template name to be referenced in “itemTemplate”
attribute property.


<div class=”palm-row” x-mojo-tap-highlight=”momentary”>
//x-mojo-tab-highlight to highlight the list item when the user taps,
palm-row is an inbuilt class.#{data} // is the Object Name from the declaration


Step 3: In scene assistant:

ListAssistant.prototype.setup = function() {


this.attributes = {

itemTemplate: ‘List/myRowTemplate’,

swipeToDelete: true,


this.model = {

listTitle: ‘Servers’,

items : [







Modifying myRowTemplate a little bit

<div class=”palm-row” x-mojo-tap-highlight=”momentary”>
<div style=”float:left”><img src=”images/RightArrow.png” /></div><div

Output 2